WebStorm 2022.3 Help

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.

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 Run with Coverage next to the list.

  • Alternatively, use the test icons in the editor to quickly run a specific suite or a test with coverage:

    Run Jest tests with coverage from the editor

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 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

the Up button

Go up one level.

the Navigate with Single Click button

If this option is on, WebStorm automatically opens the selected item in the editor. Otherwise, you need to double-click items to open them.

the Always Select Opened Element button

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 editor

Coverage results in the Project tool window

The Project shows the percentage of covered lines for files.

Configure code coverage behavior

  1. Press Ctrl+Alt+S to open the IDE settings and select Build, Execution, Deployment | Coverage.

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

  3. 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

  1. Go to the Editor | Color Scheme | General page of the IDE settings Ctrl+Alt+S or just click Coverage Settings in the statistics popup. The Color Scheme page opens.

  2. 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:

    Configuring colors for indicating coverage status in the editor
Last modified: 24 August 2022