cra-ts-code-coverage-example

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

Current dependencies

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

Cypress tests with code coverage

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

Set up coverage plugin

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

Run 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.

See also

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