How to configure VSCode to enable debugging for Jest tests.

Getting this immediate feedback within the editor improves productivity and reduces context switching.Ī demo that demonstrates how this plugin can be used for your projects. If you are writing tests using the Jest framework, and your IDE of choice is VSCode, then there is a plugin in the VSCode marketplace that automatically runs tests and shows individual test results inline. What if there was a more streamlined approach that simply displayed the results of tests directly within the IDE, with each result (passing or failing) adjacent to its corresponding test? Microsoft has got a great guide on how to configure jest debugging.įrom: basefactor.When writing tests for your application, it can be tedious and distracting to switch between the terminal and IDE to execute tests and verify that all tests are passing. Official facebook create-react-app guide for debugging tests (including Chrome configuration). You can find all the demo material in the Github Repo jest-vs-code-debugging-exampleĮach folder contains a starting point and the solution implemented. 'runtimeExecutable': '$/node_modules/jest/bin/jest', Let's replace the default config file created by VS Code and place the following one: Step 2 Configuring jest test debugging single run

If you are working on a git repository, check your.

In the next step we will replace the content of this file with a new one that will let us integrate the editor with Jest.

vscode including a default implementation: We got a launch.json file under the folder.

A brand new launch.json file will be displayed.

Click on the add configuration option in the dropdown list.

We will click on the debug icon (left hand sidebar).

Or you can create a project from scratch by calling npx create-react-app myappįirst of all, let's enable debugging on our project, in order to do that:.

As a starting point, you can take the (create-react-app/00-start) sample.

In this case, you don't have direct access to jest, so you have to execute react-scripts to get your tests working. Let's say you have created your project using the create-react-app Facebook helper. Setting up configuration for a create-react-app based project

Visual studio code debug jest