JavaScript / TypeScript test coverage

SonarQube Cloud supports the reporting of test coverage information as part of the analysis of your JS/TS project.

However, SonarQube Cloud does not produce the coverage report itself. Instead, you must set up a third-party tool to produce the report as part of your build process. You then need to configure your analysis to tell the SonarScanner where the report is located so that it can pick it up and send it to SonarQube Cloud, where it will be displayed on your project dashboard along with the other analysis metrics.

For JS/TS projects, SonarQube Cloud directly supports all coverage tools that produce reports in the LCOV format. Additionally, a generic coverage format is also supported if you wish to use an unsupported tool (though you will have to convert its output to the generic format yourself).

In this section, we discuss the directly supported JS/TS LCOV coverage feature. For information on the generic format, see Generic Test Data.

Use CI-based, not automatic analysis

Usually, when you import a new JS/TS project, automatic analysis starts immediately. But, since coverage is not yet supported under automatic analysis, you will need to use CI-based analysis instead. This requires disabling automatic analysis. Here are the steps:

If you have not yet imported your project, just add an empty file called sonar-project.properties to the root of your repository, and then perform the import. SonarQube Cloud will assume that you want to set up a CI-based analysis and display the onboarding tutorial.

If you have already imported your project, then SonarQube Cloud has already run at least once using automatic analysis. Don’t worry, you can still convert your project to use a CI-based approach. Simply go to Administration > Analysis Method and switch SonarQube Cloud Automatic Analysis to OFF. Then, on the same screen, under Supported analysis methods find your preferred CI and click Follow the tutorial.

Follow the tutorial

At this point, you should be in the onboarding tutorial specific to your CI. Follow the tutorial and when it asks, What option best describes your build?, choose Other (for JS, TS, Go, Python, PHP, ...). When you are done with the tutorial, you should have a functioning CI-based analysis setup for your JS/TS project. The next step is to adjust it to get coverage working.

Adjusting your setup

To enable coverage you need to:

• Adjust your build process so that the coverage tool runs before the scanner step.
• Make sure that the coverage tool writes its report file to a defined path in the build environment.
• Configure the scanning step of your build so that the scanner picks up the report file from that defined path.

Adding coverage to your build process

The details of setting up coverage within your build process depend on which tools you are using. 

The following illustrates how to do this for a JS/TS project that uses Yarn and Jest in the GitHub Actions CI. Simply add the following to your build.yml file:

.github/workflows/build.yml

- name: Install dependencies
   run: yarn
- name: Test and coverage
   run: yarn jest --coverage

The resulting file should look something like this:

.github/workflows/build.yml

name: Build
on:
 push:
   branches:
     - master
 pull_request:
   types: [opened, synchronize, reopened]
jobs:
  sonarqube:
    name: SonarQube
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          fetch-depth: 0 
      - name: Install dependencies
        run: yarn
      - name: Test and coverage
        run: yarn jest --coverage
      - name: SonarQube Scan
        uses: SonarSource/sonarqube-scan-action@v4
        env:
          SONAR_TOKEN: ${{ secrets. SONARCLOUD_TOKEN }}

First, you install all your project dependencies and then invoke jest with the ——coverage option to run your tests and write out the coverage data to a file.

If, as here, you do not specify an output file, the default  ./coverage/lcov.info is used. 

If you are using a different package manager or a different testing tool these details will be different.

The essential requirements are that the tool produces its report in the LCOV format and writes it to a place from which the scanner can then pick it up.

Adding the coverage analysis parameter

The next step is to add sonar.javascript.lcov.reportPaths to your analysis parameters. This parameter must be set to the path of the report file produced by your coverage tool. The path can be either absolute or relative to the project root. In this example, that path is set to the default produced by Jest: ./coverage/lcov.info. It is set in the sonar-project.properties file, located in the project root:

sonar-project.properties

sonar.projectKey=<project-key>
...
sonar.javascript.lcov.reportPaths=./coverage/lcov.info

Wildcards and a comma-delimited list of paths are supported. See Test Coverage Parameters for details.

The parameter sonar.typescript.lcov.reportPaths was formerly used for TypeScript coverage. This parameter has been deprecated. The parameter sonar.javascript.lcov.reportPaths is now used for both JavaScript and TypeScript.