Testing With Jest in WebStorm
Note: This post was updated in September, 2021.
Jest, the testing framework developed by Facebook, is becoming more and more popular each day, especially for testing React applications. Jest is fast, easy to get started with, and has lots of useful features, such as snapshot testing and test coverage, available out of the box.
Let’s see how WebStorm can help you test your app with this popular framework. We’ll use the react-dropzone project, which uses Jest, as our example.
For instructions on how to install and set up Jest in a project, please refer to Jest’s official documentation.
In this blog post we’ll cover:
- Run all tests
- View test results
- Run a single test, test suite, or file
- Rerun failed tests
- Run tests in watch mode
- Snapshot testing
- Debug tests
- Test coverage
Run all tests
First, let’s see how you can run all the tests in your project. We need to create a run/debug configuration:
- In the main menu select Run | Edit Configurations.
- Then click + in the top left-hand corner and select Jest from the drop-down list.
Usually, you don’t have to change anything in the configuration, but if there’s a Jest configuration file in the project or you need to pass additional flags to Jest, you can always tweak the settings in the created configuration.
For now, we’ll just select the All tests radio button and click OK to save the run/debug configuration. You will immediately see the new configuration in the top right-hand corner of the IDE. Click the green icon next to it to run it.
View test results
In the Run tool window that opens, you can track the test progress and see all the test results. You can also see the test results in the editor, right next to the test.
All the tests will be listed in a tree view on the left side of the tool window. On the right, you will see a stack trace for the tests that failed.
Double-click the test name in the list to open it in the editor. For failed tests, it will open the line that was at the top of the stack trace.
Use the icons at the top of the Run tool window to show or hide all the passed tests from the results.
If you want to find a particular test in the test results, just start typing its name and then use the up and down arrows to jump between the matched test names.
Run a single test, test suite, or file
If you have lots of tests and you only want to run some of them, you have several options available.
In the editor, next to each test and test suite you can see an icon that shows the test status for the tests that you’ve run recently. If you click it, you can select whether you want to run or debug this particular test or suite.
When you run a test this way, WebStorm creates a new run/debug configuration specifically for it. The IDE will use the predefined template for Jest run/debug configurations. You can modify it by going to Run | Edit Configurations in the main menu and clicking on Edit configuration templates.
If you want to run the whole test file with Jest, right-click it and select Run in the context menu that opens.
Rerun failed tests
If you have implemented a fix for the failed tests and now want to run them again to check the fix, click the Rerun Failed Tests button in the tool window.
Run tests in watch mode
One of Jest’s greatest features is its watch mode for running tests. In this mode, tests will be restarted automatically as soon as you make any changes to them or to any related files. By default, WebStorm disables watch mode when running all tests, but you can enable it easily.
Open the Jest run/debug configuration that you created earlier and add --watchAll to the Jest options field, save the configuration, and then run it again.
Note that the individual tests started from the editor will not be run in watch mode until you add --watch to the template for the Jest configuration.
Now, if you fix a failed test or add a new test and save the changes, Jest will rerun the tests and you will see the new results in the Run tool window.
This is especially useful if you’re doing test-driven development and you first develop the tests and then add the feature they cover – you will see how your tests turn from red to green in the test view without having to restart them every time.
By the way, you can quickly jump from the file to its test file and back by using the ⌘⇧T / Ctrl+Shift+T shortcut. This navigation works if the files follow one of the popular naming conventions, such as app.js and app.spec.js, or app.test.js.
Snapshot testing
Another feature provided by Jest is snapshot testing. Snapshot files describe the DOM elements in a special format, so your tests can check the UI against these snapshots and the IDE will warn you if the UI component changes unexpectedly.
The first time you run a test that has a .toMatchSnapshot() method, Jest creates a snapshot file in the snapshots folder. You can jump from the test to the related snapshot by clicking the camera icon next to it.
Then, if the tested component has changed and it no longer matches the snapshot, the test will fail.
To make it easier to spot the difference between the actual and expected results, we’ve added a diff view for snapshots. Click the link in the test output next to the stack trace to see the diff.
If the change was intentional, you can update the snapshot by using the Click to update snapshot link in the Run tool window.
Debug tests
To investigate why a test is failing, you can debug it in WebStorm. Click the gutter icon on the left of the test in the editor, and then select Debug to debug just one test.
The breakpoint can be set either in the test file or in the source code that is being tested. Once the breakpoint is hit, you can step through the code, see the call stack and variables, use the console, and so on.
If you want to debug all your tests at once, click the green Debug icon next to the All Tests configuration that we created earlier.
When using Jest with JavaScript and the babel-jest package, the inline source maps that are needed for debugging should work out of the box. If you use them with TypeScript, don’t forget to add one of these two options to your tsconfig.json: “sourceMap”: true or “inlineSourceMap”: true.
Test coverage
To make sure that all your source code is well-tested, you can build a code coverage report. All you need to do is click the Run with Coverage button next to the run/debug configuration. The report will show how many files were covered with tests and what percentage of lines in those files are covered.
From this report, you can jump to the file and see which lines were covered (marked green) and which ones were not (marked red).
That’s it! We hope you have found this guide useful and have a great experience testing with Jest in WebStorm. If you run into any problems or would like to share your suggestions, feel free to submit an issue in our issue tracker.
The WebStorm team
Subscribe to WebStorm Blog updates
