code-coverage-webpack-dev-server

Example of Cypress.io code coverage collected from webpack dev server

Webpack dev server setup following blog post Webpack with Babel 7 Project Setup.

Install and start

npm ci
npm start

Open localhost:8080

Code instrumentation

Find examples of end-to-end and unit tests in cypress/integration/spec.js file.

End-to-end tests

Application's source code is instrumented via Webpack + Babelrc. The instrumentation is only enabled in NODE_ENV=test environment via the env option in .babelrc file. This file is used to transpile source code because of webpack.config.babel.js

To serve the app using webpack-dev-server with instrumented app and open Cypress use:

npm run dev

Notice the window.__coverage__ object in the application iframe:

To run headless end-to-end tests and have coverage use:

npm run e2e

Unit tests

If you decide to load application's JavaScript directly from the spec files (without cy.visit) you are effectively doing unit tests in Cypress. To instrument those files, you need to insert Istanbul plugin into the bundler Cypress uses to bundle the spec files. Since this project already uses Webpack, install @cypress/webpack-preprocessor

npm i -D @cypress/webpack-preprocessor

Then set that preprocessor to transpile spec files and use same settings as your regular Webpack in cypress/plugins/index.js file.

You should see instrumented source files in the Spec iframe when Cypress runs.

Cypress code coverage plugin automatically combines end-to-end and unit test code coverage information and produces a combined report.

Reports

The coverage HTML and other reports are saved into folder coverage. You can open HTML report with

coverage/lcov-report/index.html

NPM scripts

See package.json for all NPM scripts.

More information

• Read Cypress code coverage guide