Code coverage
With WebStorm, you can also monitor how much of your code is covered with tests. WebStorm displays this statistics in a dedicated Coverage tool window and marks covered and uncovered lines visually in the editor and in the Project tool window.
The results of a coverage measurement are saved in a coverage suite. You can also merge them with any of the existing suites. In this case, a line is considered covered if it is covered by at least one test run.
Measuring code coverage is available for Jest, Mocha, and Karma.
Run tests with coverage
next to the list.
Viewing code coverage results
The results of measuring coverage are shown in the Coverage tool window, in the editor, and in the Project tool window.
Coverage tool window
The Coverage tool window tool window appears right after you run a configuration with coverage and displays the coverage report. To reopen the Coverage tool window, select from the main menu, or press Ctrl+Alt+F6.
The tool window shows the percentage of covered lines for each folder and the percentage of covered lines in each file. To jump to the source code in the editor, right-click the necessary file in the Code Coverage tool window and select Jump to Source F4.
Code Coverage tool window options
Item | Description |
|---|---|
| Go up one level. |
| If this option is on, WebStorm automatically opens the selected item in the editor. Otherwise, you need to double-click items to open them. |
| If this option is on, WebStorm automatically locates a file in the tool window as soon as you open this file in the editor. |
Coverage results in the editor
When a file is opened in the editor, lines executed during simulation are marked with green stripes in the gutter and those that were not involved are marked red.
To find out how many times a line has been hit, click the color indicator in the gutter. A popup that opens shows the statistic for the line at caret.
Coverage results in the Project tool window
The Project shows the percentage of covered lines for files.
Configure code coverage behavior
Press Ctrl+Alt+S to open the IDE settings and select Build, Execution, Deployment | Coverage.
Define how the collected coverage data will be processed:
To have the Code Coverage dialog shown every time you launch a new run configuration with code coverage, choose Show options before applying coverage to the editor.
To discard the new code coverage results, choose Do not apply collected coverage.
To discard the active suites and use the new one every time you launch a new run configuration with code coverage, choose Replace active suites with the new one.
To have the new code coverage suite appended to the active suites every time you launch a new run configuration with code coverage, choose Add to active suites.
Define the behaviour of the Coverage tool window when an application or test is run with coverage:
To have the Coverage tool window opened automatically, select the Activate Coverage View checkbox.
To open the Coverage tool window manually, clear the Activate Coverage View checkbox.
Configure colors to highlight code coverage results
Go to the Editor | Color Scheme | General page of the IDE settings Ctrl+Alt+S or just click
in the statistics popup. The Color Scheme page opens.In the list of textual components, under the Line Coverage node, select the required type of coverage, for example, Full, Partial or Uncovered, and then choose the desired colors for them:
