Cypress – code coverage reports for unit tests

#cypress #javascript #testing #frontend

One of most common test reports used is code coverage reports. And while Cypress does support them, setting them up can be a bit of pain. In this post, I will be explaining how to set up coverage reports for unit test. If you haven’t installed Cypress yet, you can use my previous post as a guide on that.

Installation

As always, lets first start with required packages that you will need for this. Those packages are:

@cypress/code-coverage
babel-plugin-transform-class-properties
instanbul-lib-coverage
mocha@^5.2.0
nyc You can install all of these by executing next CLI command:

npm install --save-de @cypress/code-coverage babel-plugin-transform-class-properties instanbul-lib-coverage mocha@^5.2.0 nyc

Babel

Because you will be importing your modules into unit test, which are probably written in ES6, you will need .babelrc file for this. While your can be different, depending on your project, following code is minimum that you will need in it.

// .babelrc
{
  "presets": ["@babel/preset-react"],
  "plugins": ["transform-class-properties", "istanbul"]
}

Cypress commands

Now that you installed dependencies and set your babel configuration file, we can go into Cypress configuration. First, you will need to update cypress/support/index.js file. This change will be small, just adding one line.

// cypress/support/index.js
import '@cypress/code-coverage/support'

Cypress plugins

Next step will be updating Cypress plugins file. Once again, very small change. You need to update cypress/plugins/index.js to contain following code.

// cypress/plugins/index.js
module.exports = (on, config) => {
    on('task', require('@cypress/code-coverage/task'));
    on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'));

    return config
};

Adding tests

When it comes to set up, we are done. Now we can start adding tests. For this, under cypress/integration we can create new folder called unit. In this file we will keep all our unit tests. Usually, we would keep all tests along our code. If nothing, to reduce need for long dot slashes in imports. And Cypress does support keeping them in different location. However, this coverage plugin doesn’t work if tests are not inside of integration folder and just generates empty report.

Running tests

Once our tests are written, we can run them. If we are running unit tests, it is good to run them separate from e2e tests. For that we can use also different command. That command can be following:
cypress run --spec cypress/integration/unit/*

Generated reports

All coverage reports are generated in root of project in folder called coverage. I tried to change this location, but sadly, Cypress configuration does not work for it. Only option I was left with was either manually or creating different script that would move it to needed location.

Wrap up

Cypress does support getting coverage reports for unit tests. But setting up, however small it is, is far from clear. There are many issues, like need for tests to be only in integration folder for it to work and lack of ability to change report output location. But I do hope this guide made it simpler and easier for you to set up.

All code example for this can be found in my Cypress setup repository.