Code coverage in Vitest

Install dependency

There are two options for coverage in Vitest, v8 or instanbul. In this post we’ll use istanbul to generate coverage reports.

Installing is via npm:

npm install -D @vitest/coverage-istanbul@1.5.3

In this case th 1.5.3 version is being used as there is a dependency conflict when using with @cloudflare/vitest-pool-workers.

Configuring

Edit the vitest.config.js file and add a coverage property:

export default defineWorkersConfig({
  test: {
    coverage: {
      include: ['src/**'],
      provider: 'istanbul'
    },
    ...

The include property is an array of relative paths using glob style patterns. The src/** entry means all files in the src directory and any of it’s sub-directories.

The provider property is set to istanbul.

Generating a coverage report

To generate a coverage report the --coverage option is passed to the command:

npx vitest --run test  --coverage

and a simple text report is output:

 % Coverage report from istanbul
------------|---------|----------|---------|---------|-------------------
File        | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------|---------|----------|---------|---------|-------------------
All files   |   36.84 |    39.28 |      50 |   37.16 |                   
 index.js   |    6.49 |     5.55 |   11.11 |    6.57 | 9-157,169-182     
 phrases.js |     100 |      100 |     100 |     100 |                   
 utils.js   |     100 |      100 |     100 |     100 |                   
 xml.js     |     100 |      100 |     100 |     100 |                   
------------|---------|----------|---------|---------|-------------------

HTML Report

An HTML report is also generated by default. This is located in the coverage directory.

The home page is a coverage summary:

and clicking on a file will open that file with lines that have not been covered highlighted in red:

Summary

Hopefully this has shown how easy it is to get coverage reports when using vitest.

References

• Coverage Reference