Repository files navigation

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

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

npm cinpm start

Openlocalhost:8080

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

Application's source code is instrumented via Webpack + Babelrc. The instrumentation is only enabled inNODE_ENV=test environment via theenv option in.babelrc file. This file is used to transpile source code because ofwebpack.config.babel.js

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

npm run dev

Notice thewindow.__coverage__ object in the application iframe:

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

npm run e2e

If you decide to load application's JavaScript directly from the spec files (withoutcy.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 incypress/plugins/index.js file.

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

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

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

coverage/lcov-report/index.html

Seepackage.json for all NPM scripts.

• Read Cypresscode coverage guide