React App with TypeScript and Cypress code coverage

This project was created using CRA v3

$ npm i -g create-react-app + create-react-app@3.3.1 $ create-react-app cra-ts-code-coverage-example --template typescript

Name	Description
	Cypress test runner cypress-io/cypress
	Instruments react-scripts applications on the fly
	Generates coverage reports after Cypress test runs

Add Cypress and code coverage report plugin

$ yarn add -D cypress @cypress/code-coverage info Direct dependencies ├─ @cypress/code-coverage@3.7.2 └─ cypress@4.5.0

Add library to instrument application code on the fly

$ yarn add -D @cypress/instrument-cra info Direct dependencies └─ @cypress/instrument-cra@1.1.0

Change the start script in package.json to be react-scripts -r @cypress/instrument-cra start. If you start application now, there should be object window.__coverage__ with code coverage numbers.

Watch video How to instrument react-scripts web application for code coverage

In cypress/support/index.js add line

import '@cypress/code-coverage/support'

In cypress/plugins/index.js log the coverage plugin

module.exports = (on, config) => { require('@cypress/code-coverage/task')(on, config) // IMPORTANT to return the config object // with the any changed environment variables return config }

Hint: check cypress-io/code-coverage README for current installation instructions.

Watch video Get code coverage reports from Cypress tests

Start app and Cypress

$ yarn add -D start-server-and-test info Direct dependencies └─ start-server-and-test@1.10.8

In package.json

{ "scripts": { "start": "react-scripts -r @cypress/instrument-cra start", "cy:open": "cypress open", "dev": "start-test 3000 cy:open" } }

Tip: watch video Using start-server-and-test to start app, run tests and shut everything down

Start Cypress with npm run dev and run a single end-to-end test cypress/integration/spec.js

it('opens the app', () => { cy.visit('/') cy.get('header.App-header').should('be.visible') cy.contains('Learn tcaeR').should('be.visible') })

The code coverage information is saved automatically in the folder .nyc_output. Run nyc tool to see summary in the terminal

$ yarn nyc report

Or open generated static code coverage report with open coverage/lcov-report/index.html

You can drill into individual files

You can see the app has never called add(a, b) function, and only has called the reverse(s) function once passing a string.

For more examples, see cypress-io/code-coverage and read the Cypress Code Coverage Guide. You can also watch Cypress.io - State of the Art Testing Tool presentation and see its slides.

Watch series of short videos Cypress tips & tricks