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