Trying to make Cypress, TypeScript and IstanbulJS work together

Question

I am trying to generate code coverage reports with IstanbulJS for my code written in TypeScript and tested with Cypress. But things get reported out of place:

I created a git repository MCVE specifically for this question, so you can reproduce exactly my situation:

git clone https://github.com/papb/cy-ts-istanbul-question
cd cy-ts-istanbul-question
npm install
npm test
# And then open the file `coverage/index.ts.html` to see the image above.

How to fix that?

---

Details

I have some code written in TypeScript which I transpile and bundle to a single JavaScript (ES6) file with rollup, rollup-plugin-typescript2 and rollup-plugin-istanbul. This works perfectly, my source code in TypeScript becomes a file ready to be included with a <script> tag into the browser and used.

Secondly, I use cypress to run tests on an HTML page which includes the transpiled JS code mentioned above. This also works perfectly, cypress is able to test my functions originally written in TypeScript.

Now, I want to set up coverage reports for those tests. On Cypress FAQ we can find the question Is there code coverage? to which the answer is currently no (regarding built-in functionality) but is in discussion as a welcome thing to be done in the future, and in fact it can be done.

The thing is: the guy who did it above was not using TypeScript. I am. So I have a little extra step to do, and this is where I'm currently stuck. Intuitively, I think this is just a matter of configuring IstanbulJS to follow the source maps correctly, but I couldn't find any documentation on how to do it. Every guide about TypeScript + IstanbulJS that I can find assumes that I am using Mocha, but I'm not - I am using Cypress with a transpiled source coming from TypeScript.

Note: I am aware that in general the usual "code coverage" approach to cypress testing doesn't make much sense, but in my exact situation I think it does, I've thought about it already, please don't make this frame challenge to the question.

---

EDIT: To be clear, using rollup here is not a hard requirement. If you have a solution that uses something else, it is totally acceptable as well. The important thing is, as title says, Cypress + TypeScript + IstanbulJS.

Answer 1

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