@cypress/code-coverage

Saves the code coverage collected during Cypress tests

Install

npm install -D @cypress/code-coverage

and its peer dependencies

npm install -D nyc istanbul-lib-coverage cypress

Add to your cypress/support/index.js file

import '@cypress/code-coverage/support'

Register tasks in your cypress/plugins/index.js file

module.exports = (on, config) => {
  on('task', require('@cypress/code-coverage/task'))
}

If your application is loaded Istanbul-instrumented source code, then the coverage information will be automatically saved into .nyc_output folder and a report will be generated after the tests finish (even in the interactive mode). Find the HTML report in the coverage folder.

That should be it!

Instrument unit tests

If you test your application code directly from specs you might want to instrument them and combine unit test code coverage with any end-to-end code coverage (from iframe). You can easily instrument spec files using babel-plugin-istanbul for example.

Install the plugin

npm i -D babel-plugin-istanbul

Set your .babelrc file

{
  "plugins": ["istanbul"]
}

Put the following in cypress/plugins/index.js file to use .babelrc file

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

Now the code coverage from spec files will be combined with end-to-end coverage.

Instrument backend code

You can also instrument your server-side code and produce combined coverage report that covers both the backend and frontend code.

1. Run the server code with instrumentation. The simplest way is to use nyc. If normally you run node src/server then to run instrumented version you can do nyc --silent node src/server.
2. Add an endpoint that returns collected coverage. If you are using Express, you can simply do

const express = require('express')
const app = express()
require('@cypress/code-coverage/middleware')(app)

Tip: you can register the endpoint only if there is global code coverage object, and you can exclude the middleware code from the coverage numbers

// https://github.com/gotwarlost/istanbul/blob/master/ignoring-code-for-coverage.md
/* istanbul ignore next */
if (global.__coverage__) {
  require('@cypress/code-coverage/middleware')(app)
}

If you use Hapi server, define the endpoint yourself and return the object

// https://github.com/gotwarlost/istanbul/blob/master/ignoring-code-for-coverage.md
/* istanbul ignore next */
if (global.__coverage__) {
  // https://hapijs.com/tutorials/routing?lang=en_US
  server.route({
    method: 'GET',
    path: '/__coverage__',
    handler () {
      return { coverage: global.__coverage__ }
    }
  })
}

3. Save the API coverage endpoint in cypress.json file to let the plugin know where to call to receive the code coverage data from the server. Place it in env.codeCoverage object:

{
  "env": {
    "codeCoverage": {
      "url": "http://localhost:3000/__coverage__"
    }
  }
}

That should be enough - the code coverage from the server will be requested at the end of the test run and merged with the client-side code coverage, producing a combined report

Examples

• Cypress code coverage guide
• cypress-example-todomvc-redux
• Full frontend + backend code coverage in bahmutov/realworld repo
• Read "Code Coverage by Parcel Bundler" blog post
• Read "Combined End-to-end and Unit Test Coverage"

Debugging

Run tests with DEBUG=code-coverage environment variable to see log messages

License

This project is licensed under the terms of the MIT license.