jest: setting up coverage reports

When it comes to testing your application, it’s often useful to know how much of your code is covered in one way or another by tests. Coverage reports, while not perfect, are a great tool for this! Let’s discuss how to configure coverage reports for Jest.

Jest has a built in coverage report that’s available just by passing in the --coverage flag:

% jest --coverage

---------------------------|----------|----------|----------|----------|-------------------|
| File                        | % Stmts    | % Branch   | % Funcs    | % Lines    | Uncovered Line #s   |
| --------------------------- | ---------- | ---------- | ---------- | ---------- | ------------------- |
| All files                   | 42.24      | 30         | 39.58      | 41.96      |                     |
| src                         | 23.26      | 13.51      | 23.68      | 22.89      |                     |
| calculator.js               | 21.43      | 13.51      | 23.68      | 20.99      | ... 67,273,279,285  |
| themes.js                   | 100        | 100        | 100        | 100        |                     |
| src/other                   | 100        | 100        | 100        | 100        |                     |
| super-heros.js              | 100        | 100        | 100        | 100        |                     |
| src/shared                  | 95.65      | 72.73      | 100        | 95.65      |                     |
| auto-scaling-text.js        | 92.31      | 75         | 100        | 92.31      | 16                  |
| calculator-display.js       | 100        | 50         | 100        | 100        | 23                  |
| utils.js                    | 100        | 80         | 100        | 100        | 11                  |
| test                        | 100        | 100        | 100        | 100        |                     |
| calculator-test-utils.js    | 100        | 100        | 100        | 100        |                     |
| --------------------------- | ---------- | ---------- | ---------- | ---------- | ------------------- |

Beyond the inline report, however, Jest will also compile data in a new directory coverage which includes a website that visualizes the data.

From the root of the project, you’ll find it in coverage/lcov-report/index.html. Though this is a good start, there’s often configuration required because certain files will be included and others will be excluded that are not desired to be.

This is all solvable, however. We just need to make some tweaks to jest.config.js by adding a collectCoverageFrom item which accepts an array of globs. In a simple case, we can focus on testing only files within the src directory that are Javascript. For example:

module.exports = {
+   collectCoverageFrom: ['**/src/**/*.{js,ts,tsx}']
}

What would happen if we have colocated tests though? That is app.js next to app.test.js? The latter is in the src directory and would get picked up by our glob pattern. What if there are files you actually do want to exclude? The blob syntax that seems to work is one with a leading !:

module.exports = {
  collectCoverageFrom: ["**/src/**/*.{js,ts,tsx}", "!**/*.test.{js,ts,tsx}"],
}

It’s worth noting: Jest automatically exclude any .test files, so the second line is not strictly necessary, but is just demonstrative of how to exclude files.

Additionally, it’s likely not advisable to add --coverage to a watch script as the coverage report would be generated only for the files included in the test run, which is unlikely to be very useful.

Piping Coverage Reports Into CI/CD Pipelines

Now that we have a coverage report, how can we actually use it? Jest has a concept of reporters and test result processors.

The proper configuration for these will depend on how you report out coverage, but there is a community of plugins that you can use.

For example, if you’re using TeamCity, you can use jest-teamcity-reporter to easily configure top level reporting on your project:

module.exports = {
  testResultsProcessor: "jest-teamcity-reporter",
  coverageReporters: ["text", "text-summary", "lcov", "teamcity"],
}

This is all you need in order to get a coverage report built into your runs!