Trying to make Cypress, TypeScript and IstanbulJS work together

I used webpack + babel-loader + @babel/preset-typescript + babel-plugin-istanbul

basically the strategy is:

  • instrument your app code so that coverage is generated on window.__coverage__
  • after cypress spec runs, use cy.writeFile to save the report to .nyc_output
  • and generate the report with cy.exec('nyc report --reporter=html')

you should then be able the view the html coverage report in the coverage/ directory

Here's the changes I made to your project, switching to webpack with fully working code coverage:

https://github.com/Bkucera/cypress-code-coverage/commit/40f88aa27778dc55ad3fae56af66724f73b6496d enter image description here

I have put together other working examples here. It has examples of setting up code coverage on top of a newly ejected create-react-app(uses webpack) and a vanilla typescript + webpack project:

create-react-app-ejected:

cypress with code coverage set up on a newly-ejected create-react-app uses:

  • @babel/preset-typescript
  • @cypress/webpack-preprocessor
  • babel-loader
  • babel-plugin-istanbul

vanilla-typescript-webpack:

code coverage on a vanilla typescript & webpack project uses:

  • @babel/preset-typescript
  • @cypress/webpack-preprocessor
  • babel-loader
  • babel-plugin-istanbul

enter image description here

In both of these I also instrument the cypress code so that you could possibly merge the coverage reports, but I don't do that currently