How to configure debugger when running jest for React unit tests with VS Code

We can debug the jest test with console.log (make sure to remove the -silent option). But, attaching a debugger and stepping through the tests sometimes may help us to troubleshoot quicker under certain circumstances.

1. Install Jest Plugin

Install Jest plugin.

2. Configure

Press cmd + shift + p.

Find Jest: Setup Extension (Beta)

Add yarn test (or any test command you usually use for running tests) as Setup Jest Command.

Add launch.json with Setup Jest Debug Config. By using the wizard, it will automatically generate launch.json according to the yarn test command.

3. Run

Add breakpoint and run individual test from the test file. You can see Debug above the test scenario and click it. See the plugin doc for further info.

Front-End
How to set up auto-fix on save by using the project’s Eslint config with VS Code

This is a quick instruction to set up auto-fix on save by using the project’s eslint config with VS Code. It works for both TS and JS. 1. Install ESLint plugin for VS Code. 2. Add config to VS code Go to Code -> Preference -> Settings (or press cmd …

Front-End
Unable to Get Local Issuer Certificate for installing Npm Modules

unable to get local issuer certificate error with yarn install from a private npm repository (such as JFrog), you can try running this command: yarn config set “strict-ssl” false yarn install Error message example error An unexpected error occurred: “https://npco.jfrog.io/artifactory/api/npm/npm-mdh/@mdh/my-library/-/@mdh/my-library-3.21.0.tgz: unable to get local issuer certificate”.

Front-End
Moving away from React.FC and React.VFC

Since the release of React 18, VFC has been deprecated. FunctionalComponent (FC) does not have implicit children any more. See this pull request. It states: Since the release of the React 18 types we haven’t seen any use case for FunctionComponent with implicit children beyond "it breaks existing stuff". As …