title: Trying to make Cypress, TypeScript and IstanbulJS work together
body: <p>I am trying to generate code coverage reports with <a href="https://github.com/istanbuljs/istanbuljs" rel="noreferrer">IstanbulJS</a> for my code written in <a href="https://github.com/Microsoft/TypeScript" rel="noreferrer">TypeScript</a> and tested with <a href="https://www.cypress.io/" rel="noreferrer">Cypress</a>. But things get reported out of place:</p>
  
  <p><img src="https://i.stack.imgur.com/8RNp2.png" alt="IstanbulJS&#39;s HTML report with hit counter in the wrong lines"></p>
  
  <p>I created a <a href="https://github.com/papb/cy-ts-istanbul-question" rel="noreferrer">git repository</a> <a href="https://stackoverflow.com/help/mcve">MCVE</a> specifically for this question, so you can reproduce exactly my situation:</p>
  
  <pre><code>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.
  </code></pre>
  
  <p><strong>How to fix that?</strong></p>
  
  <hr>
  
  <h2>Details</h2>
  
  <p>I have some code written in TypeScript which I transpile and bundle to a single JavaScript (ES6) file with <a href="https://rollupjs.org/" rel="noreferrer">rollup</a>, <a href="https://www.npmjs.com/package/rollup-plugin-typescript2" rel="noreferrer">rollup-plugin-typescript2</a> and <a href="https://www.npmjs.com/package/rollup-plugin-istanbul" rel="noreferrer">rollup-plugin-istanbul</a>. This works perfectly, my source code in TypeScript becomes a file ready to be included with a <code>&lt;script&gt;</code> tag into the browser and used.</p>
  
  <p>Secondly, I use <a href="https://www.cypress.io/" rel="noreferrer">cypress</a> 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.</p>
  
  <p>Now, I want to set up coverage reports for those tests. On Cypress FAQ we can find the question <em><a href="https://docs.cypress.io/faq/questions/general-questions-faq.html#Is-there-code-coverage" rel="noreferrer">Is there code coverage?</a></em> to which the answer is currently <em>no</em> (regarding built-in functionality) but is <a href="https://github.com/cypress-io/cypress/issues/346" rel="noreferrer">in discussion</a> as a welcome thing to be done in the future, and <a href="https://github.com/cypress-io/cypress/issues/346#issuecomment-415462938" rel="noreferrer">in fact it can be done</a>.</p>
  
  <p>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. <a href="https://istanbul.js.org/docs/tutorials/typescript/" rel="noreferrer">Every guide about TypeScript + IstanbulJS that I can find</a> assumes that I am using Mocha, but I'm not - I am using Cypress with a transpiled source coming from TypeScript.</p>
  
  <p><em>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.</em></p>
  
  <hr>
  
  <p><strong>EDIT:</strong> 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.</p>