Running, debugging, testing, and deploying applications
Testing
Code coverage

Code coverage

Last modified: 08 September 2023

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.

Coverage results in the Coverage tool window, 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

Create a Mocha or Karma run configuration, select it from the list on the toolbar, and click next to the list.
Alternatively, use the test icons in the editor to quickly run a specific suite or a test with coverage:

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 Run | Show Code Coverage Data from the main menu, or press CtrlAltF6.

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 CtrlAlt0S to open the IDE 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.

Configure colors to highlight code coverage results

Go to the Editor | Color Scheme | General page of the IDE settings CtrlAlt0S 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:

Thanks for your feedback!

Was this page helpful?

Code coverage

See also

Procedures

Reference

Code coverage﻿

Run tests with coverage﻿

Viewing code coverage results﻿

Coverage tool window﻿

Code Coverage tool window options﻿

Coverage results in the editor﻿

Coverage results in the Project tool window﻿

Configure code coverage behavior﻿

Configure colors to highlight code coverage results﻿

See also

Procedures

Reference

Code coverage

Run tests with coverage

Viewing code coverage results

Coverage tool window

Code Coverage tool window options

Coverage results in the editor

Coverage results in the Project tool window

Configure code coverage behavior

Configure colors to highlight code coverage results