Cypress Code Coverage with React, Typescript, Webpack and TS-Loader

Example front-end application using React, Typescript, Webpack and TS-Loader, where Cypress tests generate code coverage reports.

Motivation

Currently, Cypress's official documentation on the subject of code coverage focuses mostly on projects that use Babel - and consequently on Webpack projects that use babel-loader.

Another module that accomplishes a similar goal as babel is ts-loader. However, online resources dealing with the relationship between cypress code coverage + typescript + webpack + ts-loader are scarce.

The most popular search result related to the problem recommends using both babel and ts-loader.

I wanted to demonstrate how to achieve the same setup without relying on Babel.

Key aspects

• tsconfig.json is almost the same as the one generated by tsc --init, except for:
  • "sourceMap": true: This line is key to get accurate uncovered line numbers.
  • "jsx": "react": Allows React / JSX files usage.
• Webpack loads @jsdevtools/coverage-istanbul-loader before ts-loader to instrument the code.
• This setup assumes your cypress tests run on a compiled version of the application. Using coverage-istanbul-loader with webpack-dev-server didn't work.

Dependencies

• Node

Installing

• Clone this repository
• On the command line, run npm install

Running

On the command line, type and run npm test. You should then see the coverage report in the terminal afterwards.