Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@cypress/code-coverage
Advanced tools
@cypress/code-coverage is a plugin for Cypress that allows you to measure the code coverage of your application while running end-to-end tests. It integrates with popular code coverage libraries like Istanbul to provide detailed reports on which parts of your codebase are being exercised by your tests.
Setup Code Coverage
This code snippet shows how to set up the @cypress/code-coverage plugin in your Cypress configuration file. It requires the plugin and initializes it with the Cypress event handlers.
module.exports = (on, config) => {
require('@cypress/code-coverage/task')(on, config);
return config;
};
Instrument Application Code
This code demonstrates how to instrument your application code using Istanbul, which is a necessary step for collecting code coverage data. The instrumented code is then used in your application.
const istanbul = require('istanbul-lib-instrument');
const instrumenter = istanbul.createInstrumenter();
const instrumentedCode = instrumenter.instrumentSync(originalCode, filename);
Generate Coverage Reports
This code snippet shows how to generate HTML coverage reports using Istanbul. The coverage data collected during the tests is used to create a coverage map, which is then used to generate the report.
const { createCoverageMap } = require('istanbul-lib-coverage');
const coverageMap = createCoverageMap(global.__coverage__);
const report = require('istanbul-reports').create('html');
const context = require('istanbul-lib-report').createContext({ dir: './coverage' });
report.execute(context);
nyc is a command-line interface for Istanbul, a popular JavaScript code coverage tool. It provides a simple way to instrument your code and generate coverage reports. Unlike @cypress/code-coverage, nyc is not specifically designed for Cypress and is more commonly used for unit testing.
Jest is a JavaScript testing framework that comes with built-in code coverage support. It uses Istanbul under the hood to generate coverage reports. Jest is primarily used for unit and integration testing, whereas @cypress/code-coverage is focused on end-to-end testing with Cypress.
karma-coverage is a Karma plugin that uses Istanbul to generate code coverage reports for your tests. It is designed to work with the Karma test runner, which is often used for unit testing in Angular projects. @cypress/code-coverage, on the other hand, is tailored for use with Cypress.
Saves the code coverage collected during Cypress tests
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!
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.
You can also instrument your server-side code and produce combined coverage report that covers both the backend and frontend code.
node src/server
then to run instrumented version you can do nyc --silent node src/server
.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__ }
}
})
}
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
Run tests with DEBUG=code-coverage
environment variable to see log messages
This project is licensed under the terms of the MIT license.
FAQs
Saves the code coverage collected during Cypress tests
The npm package @cypress/code-coverage receives a total of 526,273 weekly downloads. As such, @cypress/code-coverage popularity was classified as popular.
We found that @cypress/code-coverage demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.