Add JavaScript Code Coverage to SonarQube for your Gradle Java Web Project

Preconditions

This setup runs JavaScript tests using Facebooks Jest framwork. Any other JavaScript test framework like Mocha with Istanbul for coverage reports would also work. Furthermore this Java project is set up with Gradle build tool.

NodeJS setup

The test execution and report generation should be initiated by a Gradle task for a better integration into the common build process for our Java Project. But JavaScript test frameworks are running usually in a NodeJS enviroment. Therefore an integration of NodeJS into the Gradle build is needed (build.gradle):

...
apply plugin: 'com.moowork.node'
node {
 
 download = true

 // NodeJS version
 version = '6.9.5'

 npmVersion = '3.10.10'
 distBaseUrl = 'https://nodejs.org/dist'
 workDir = file("${project.buildDir}/nodejs")
 nodeModulesDir = file("${project.projectDir}")
}
...

This configuration will download a predefined NodeJS and NPM version into your build directory to run the JavaScript tests directly out of your Gradle build. The next step is to create a package.json file and configure your JavaScript test framework. In our case the package.json with configured Jest framework looks like this:

{
 "name": "my-project", 
 "version": "1.0.0",
 "engines": {
  "node": "6.5.0"
 },
 "private": true,
 "jest": {
  "collectCoverage": true,
  "collectCoverageFrom": [
   "web/scripts/**/*.{js}"
  ],
  "coverageDirectory": "build/sonar",
  "testResultsProcessor": "jest-sonar-reporter",
  "setupTestFrameworkScriptFile": "<rootDir>/web/build/setupTests.js",
  "cache": false
 },
 "jestSonar": {
  "reportPath": "build/sonar"
 },
 "devDependencies": { 
  "jest": "^20.0.4",
  "jest-sonar-reporter": "^1.2.0",
  "sonar-web-frontend-reporters": "3.2.0"
 }
}

Finally we create a task in the build.gradle to be able to run the JavaScript tests using Gradle:

...
task testJS(type: NodeTask, dependsOn: ['npmInstall'], description: 'run JS tests') {
 script = file("${project.projectDir}/node_modules/jest/bin/jest.js")
}
...

The new created task is of type "NodeTask" and depends on the other task "npmInstall". This ensures that all dependencies are installed before the JavaScript tests are running.

SonarQube setup

Unfortunately SonarQube is not able to support JavaScript measurement out of the box. Therefore you need to install an additional extension. We use the Sonar Web Frontend Plugin because it supports ESLint and other meaningfull features.

As you already have set up the coverage for your Java code you only need to extend the SonarQube configuration in the build.gradle for your JavaScript coverage:

...
sonarqube {
 properties {
  ...
  property "sonar.language", "js"
  property "sonar.sources", "web/scripts"
  property "sonar.tests", "web/tests"
  property "sonar.testExecutionReportPaths", "build/sonar/test-report.xml"
  property "sonar.sii.coverage.ut.js.report.path", "build/sonar/lcov.info"
 }
}
...

Jest generates in conjunction with an additional plugin two reports. The first report is a lcov.info file for the code coverage which needs to be set for the special property "sonar.sii.coverage.ut.js.report.path" of the Sonar Web Frontend Plugin. The second report includes information about the test success status and is set for the default SonarQube property "sonar.testExecutionReportPaths".The other two properties "sonar.sources" and "sonar.tests" are also important to run the SonarQube analysis successfully. It is necessary to seperate the JavaScript test files from the regular files. Otherwise we experienced a failed SonarQube analysis build.

Run it and enjoy!

./gradlew testJS sonarqube