Skip to content

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

Notifications You must be signed in to change notification settings

ericorruption/cypress-code-coverage-typescript-webpack-ts-loader

Repository files navigation

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

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.

About

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

Topics

Resources

Stars

Watchers

Forks