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

Create a Jest, Mocha, Karma, or Vitest run configuration, select it from the Run widget on the toolbar, click next to it., and select Run '<configuration name>' with Coverage from the list.
Alternatively, use the test icons in the gutter to quickly run a specific suite or a test with coverage:

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.2\coverage

~/.cache/JetBrains/WebStorm2024.2/coverage

~/Library/Caches/JetBrains/WebStorm2024.2/coverage

Manage suites

In the main menu, go to Run | Manage Coverage Reports 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 Run | Show Code Coverage Data 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 (View | Tool Windows | Coverage).
Click coverage highlighting in the gutter and select Hide coverage.

Configure code coverage

Press Ctrl+Alt+S to open settings and then 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.

Change colors of the coverage highlighting

Press Ctrl+Alt+S to open settings and then select Editor | Color Scheme | General.
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.

Configuring colors for indicating coverage status in the editor

Last modified: 11 October 2024