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, Karma, and Vitest.
Run tests with coverage
next to it., and select 
Coverage suites
The collection of coverage data for a specific run is called a coverage suite.
WebStorm can display the results for one or more coverage suites at once. If multiple suites are selected, the IDE displays merged results from these suites. This means that a line is considered covered if it was executed in at least one of the selected suites.
The corresponding suite files are located in the WebStorm's system directory:
%LOCALAPPDATA%\JetBrains\WebStorm2024.1\coverage
~/.cache/JetBrains/WebStorm2024.1/coverage
~/Library/Caches/JetBrains/WebStorm2024.1/coverage
Manage suites
In the main menu, go to Ctrl+Alt+F6.
In the Choose Coverage Suite to Display menu:
Use the checkboxes to select active suites. Active suites define the coverage data that is currently displayed in the IDE.
Use
Add to import external suite file, for example, generated in the CI server or sent to you by someone else. Use
Remove to remove a suite from the list but keep the file in the storage.Use
Delete to remove a suite from the list and delete the file from the storage.
Read coverage data
WebStorm shows coverage results in:
Coverage tool window
Project tool window
Editor
Coverage tool window
The tool window shows the percentage of covered lines for each folder and the percentage of covered lines in each file.
The Coverage tool window appears right after you run a configuration with coverage and displays the coverage report. To reopen the Coverage tool window, go to in the main menu, or press Ctrl+Alt+F6.
Code Coverage tool window options
The Coverage tool window has the following options:
Item | Description |
|---|---|
| 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 in the tool window the files that you open in the editor. |
| Import a coverage suite from disk. |
| Filter coverage results. You can choose to view only the files with uncommitted changes to focus on recent updates or hide the files that are fully covered with tests.  |
Coverage results in the editor
When a file is opened in the editor, its lines are highlighted in the gutter according to their coverage status:
Green – lines that have been executed
Red – lines that have not been executed
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 and directories.
Hide coverage data
Do one of the following:
Close the tab with coverage statistics in the Coverage tool window ().
Click coverage highlighting in the gutter and select Hide coverage.
Configure code coverage
Press Ctrl+Alt+S to open settings and then select .
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.
Change colors of the coverage highlighting
Press Ctrl+Alt+S to open settings and then select .
Alternatively, click
in the popup that opens on clicking the coverage indication line in the gutter.In the list of components, expand the Line Coverage node and select a type of coverage: for example, Full, Partial or Uncovered.
Click the Foreground field to open the Select Color dialog.
Select a color, apply the changes, and close the dialog.
