WebStorm 2019.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 tool window and marks covered and uncovered lines visually right in the editor.

  • The Coverage tool window tool window shows the percentage of covered classes and lines for each folder and the percentage of covered lines in each file.

  • When a file is opened in the editor, lines executed during simulation are marked green and those that were not involved are marked red.

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 Mocha tests and Karma tests.

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:


Configure code coverage behavior

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to 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. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | Color Scheme | General 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 November 2019