https://github.com/bahmutov/code-coverage-webpack-dev-server
Example of Cypress.io code coverage collected from webpack dev server
https://github.com/bahmutov/code-coverage-webpack-dev-server
cypress-code-coverage-example
Last synced: 3 months ago
JSON representation
Example of Cypress.io code coverage collected from webpack dev server
- Host: GitHub
- URL: https://github.com/bahmutov/code-coverage-webpack-dev-server
- Owner: bahmutov
- Created: 2019-06-13T01:53:07.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-28T04:54:18.000Z (about 1 year ago)
- Last Synced: 2024-10-03T14:14:05.160Z (about 1 year ago)
- Topics: cypress-code-coverage-example
- Language: JavaScript
- Homepage: https://on.cypress.io/code-coverage
- Size: 1.56 MB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# code-coverage-webpack-dev-server [![renovate-app badge][renovate-badge]][renovate-app] [](https://circleci.com/gh/bahmutov/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](https://dev.to/shoupn/webpack-with-babel-7-project-setup-2hin).
## Install and start
```shell
npm ci
npm start
```
Open `localhost:8080`
## Code instrumentation
Find examples of end-to-end and unit tests in [cypress/integration/spec.js](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](https://new.babeljs.io/docs/en/next/babelrc.html#env-environment-option) in [.babelrc](.babelrc) file. This file is used to transpile source code because of [webpack.config.babel.js](webpack.config.babel.js)
To serve the app using [webpack-dev-server](https://github.com/webpack/webpack-dev-server) with instrumented app and open Cypress use:
```shell
npm run dev
```
Notice the `window.__coverage__` object in the application iframe:
To run headless end-to-end tests and have coverage use:
```shell
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](https://github.com/cypress-io/cypress-webpack-preprocessor)
```shell
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](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
```shell
coverage/lcov-report/index.html
```
## NPM scripts
See [package.json](package.json) for all NPM scripts.
## More information
- Read Cypress [code coverage guide](https://on.cypress.io/code-coverage)
[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg
[renovate-app]: https://renovateapp.com/