Awesome
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