Cypress – code coverage reports for unit tests
Tags: cypress, javascript, testing, frontend
Published: 2020-02-19 09:31:51

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](https://dev.to/chriss/cypress-initial-setup-l4) 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](https://github.com/kristijan-pajtasev/cypress-setup).