Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
December 9, 2022 09:10
May 23, 2019 17:09
May 23, 2019 16:57
May 23, 2019 16:28
December 9, 2022 09:30
May 23, 2019 16:28

cypress-example-todomvc-redux CircleCI renovate-app badge Coverage Status

TodoMVC example with full e2e test code coverage

This example is a fork of the official Redux TodoMVC example with a set of end-to-end tests. The tests run instrumented application code and the code coverage is saved automatically using cypress-istanbul plugin.

GitLab CI mirror

pipeline status coverage report

Deployed coverage report is at, generated following this GitLab coverage guide.

Install and use

Because this project uses Parcel bundler to serve the web application, it requires Node v12+.

yarn test

The full code coverage HTML report will be saved in coverage. You can also see text summary by running

yarn report:coverage:text

How it works

Application is served by Parcel bundler that uses .babelrc file to load babel-plugin-istanbul plugin. This plugin instruments the application source code. During tests @cypress/code-coverage plugin merges and saves application code coverage information, rendering the full HTML report at the end.

Unit tests like cypress/integration/selectors-spec.js that reach into hard to test code paths are also instrumented using the same .babelrc file, and this additional code coverage is automatically added to the application code coverage.


To always instrument the code using Babel and babel-plugin-istanbul one can simply use the istanbul plugin

  "plugins": ["istanbul"]

But this will have instrumented code in the production bundle. To only instrument the code during tests, add the plugin to the test environment and serve with NODE_ENV=test

  "env": {
    "test": {
      "plugins": ["istanbul"]

Parceljs note: there are some issues with environment-specific plugins, see PR #2840.

More info

There are also separate blog posts


Code coverage is saved on CircleCI as a test artifact. You can view the full report there by clicking on the "Artifacts" tab and then on "index.html"

Code coverage artifact

The report is a static site, you can drill into each folder to see individual source files. This project should be 100% covered by Cypress tests:

100% code coverage


Full code coverage is not the guarantee of exceptional quality. For example, the application might NOT work on mobile viewport, while working perfectly on desktop with 100% code coverage. See cypress/integration/viewports-spec.js for how to test main user stories across several viewports.

Smoke tests

As an example, there is a reusable smoke test cypress/integration/smoke.js that goes through the most important parts of the app, covering 84% of the source code. This test can be reused from other tests, for example from cypress/integration/smoke-spec.js, that can be executed after deploy for example by using cypress.config.smoke.js config file

npx cypress run --config-file cypress.config.smoke.js


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