title: Code Coverage on React with Puppeteer + Istanbul
body: <p>I have an app created with <code>create-react-app</code> and some UI tests written in Jest + Istanbul. </p>
  
  <p>I want to get code coverage of these UI tests. I like to keep using jest as I already use it for unit-tests.</p>
  
  <p>I'd like not to eject <code>create-react-app</code> if at all possible. But I'm open to it if there is no other choice. </p>
  
  <p><strong>What I've tried so far:</strong></p>
  
  <p>in <code>package.json</code></p>
  
  <pre><code>"scripts": {
    "uitest": "react-scripts test --env=jsdom --verbose --testMatch='**/*.ui-test.{js}'",
  }
  </code></pre>
  
  <p>if I run <code>npm run uitest -- --coverage</code></p>
  
  <p><a href="https://i.stack.imgur.com/l0dZd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/l0dZd.png" alt="attempt 1 failure"></a></p>
  
  <p>^ I think in above scenario it only captures the tests and not the actual App.</p>
  
  <p><strong>How do I fix this?</strong> </p>
  
  <hr>
  
  <p>Other failed attempts:</p>
  
  <p>1) <a href="https://stackoverflow.com/questions/28866194/how-to-cover-react-jsx-files-in-istanbul">How to cover React jsx files in Istanbul?</a> - Don't apply as I'm using <code>create-react-app</code></p>
  
  <p>2) <a href="https://github.com/facebook/create-react-app/issues/3257" rel="noreferrer">https://github.com/facebook/create-react-app/issues/3257</a> - apparently this feature was suggested but was rejected. </p>
  
  <p>3) <a href="https://github.com/istanbuljs/puppeteer-to-istanbul/issues/18" rel="noreferrer">https://github.com/istanbuljs/puppeteer-to-istanbul/issues/18</a> - There is a library called puppeteer-to-istanbul but it doesn't support source maps. (See the link for issue)</p>
  
  <p>4) I also looked at the book <em>Node.js Web Development - Fourth Edition</em> on safaribooks - I found a useful guide for Puppeteer but it doesn't seem to cover, code coverage. </p>
  
  <p>5) Book <em>Hands-On Continuous Integration and Delivery</em> on safaribooks - has a section on Puppeteer + Jest testing, doesn't say anything about code coverage.</p>
  
  <p>6) I tried <code>puppeteer-to-istanbul</code> -> We can calculate code coverage for bundle this way, it doesn't support source-maps.</p>
  
  <p>7) Attempted Enselic's suggestion but couldn't get it working. It seems to crash on <code>push</code> method inside custom preset when trying to push <code>babel-plugin-istanbul</code>. </p>