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
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …