Using Jenkins and SonarQube for Unit Test Coverage Reporting
Lastweek was a great week for me. I finally got SonarQube to pick up my test coverage report. I would give you a step by step guide to how I achieved this. I do hope you will find this tutorial helpful.
I am making the assumption that you already use React and Jenkins but, you just want SonarQube to be able to read your test coverage reports. I have also assumed that you have already written your unit tests.
Step 1: Configure your Package.json File
The first step is to configure your package.json file. Create-React-App already comes with a package.json file and jest as the default testing tool. All you need to do is to configure other parameters for jest such as test coverage report format or coverage path as the case may be. Below is a sample config:
Notice that I have written a script called coverage:prodfor modularity. This helps us to be able to use one command to run our tests in different environments. Notice that it contains the same commands without the --watchAll. The --watchAll command watches files for changes and reruns all tests when something changes. In production or CI environment this option is not required. You can learn more about the package.json file here
Step 2: Running Test and Test Coverage Commands locally
In your terminal, type command below to run test:
npm test or npm run testAfter the test is complete, you should see something like the image below.
Also, type the command below in your terminal to generate coverage report:
npm run test --coverage --watchAllyou should see a new folder called coverage in your project root directory. When you open up the coverage folder, you should see something like the below.
When you navigate to lcov-report > index.js, you should see an html report that looks like the image below. If you have these two, it means we are on the same page. Great! Let’s proceed.
Step 3: Configure Package.json for CI environment
You’ll need to do a bit of configuration in your package.json file. There are many test report formats supported by different CI tools. What I showed above is the html report format. The focus of this tutorial is on React, Jenkins and SonarQube, so I will focus more on the cobertura and the lcov report formats. Sonar cube supports many report formats but because this is a React project, our focus would be on the lcov report format.
On your local machine if you try to run your test using npm run test, you will notice that when all the tests have finished running, the terminal doesn’t exit the process. If you are in a CI environment, the same thing will happen, hence blocking other commands from executing. To solve this problem, you will need to tell your terminal that you are in a CI environment using any of the commands below. Notice that the commands vary depending on the terminal you are using. You could test this locally as well and you will see that your tests now exit after running. Cool right?
Windows (cmd.exe)
set CI=true&&npm testset CI=true&&npm run build
(Note: the lack of whitespace is intentional.)
Windows (Powershell)
($env:CI = "true") -and (npm test)($env:CI = "true") -and (npm run build)
Linux, macOS (Bash)
CI=true npm testCI=true npm run build
To run the test coverage, you will need to run the following commands
npm run test --coverage --watchAllStep 4: Run Tests in jenkins
Once you are ready to run my tests and coverage report on the Jenkins CI environment, I will use the following commands (assuming I am using Windows powershell)
($env:CI = "true") -and (npm run coverage:prod -u)After the test run is complete, I should be able to see a folder called coverage (or whatever folder name you specified for coverage report path in your package.json) in your Jenkins workspace folder. You will see the test reports generated in different formats inside that folder. The file lcov.info is exactly what you need to be able to communicate with SonarQube.
Step 5: Configure SonarQube properties on Jenkins
In your SonarQube analysis properties file, include the following:
Once setup is complete, you should save your Jenkins config and rerun your build. You should see your coverage reports analysis in SonarQube
Step 6: Configure Cobertura Report on Jenkins
In the package.json file above, notice that cobertura report format is one of the coverage reporters.This report format can be used to display your test reports on Jenkins if you do not want to use SonarQube. In Jenkins, add a post build action called publish corbertura coverage report. Include the path to the corbertura coverage file as shown below.
