Code Coverage on React with Puppeteer + Istanbul

Question

I have an app created with create-react-app and some UI tests written in Jest + Istanbul.

I want to get code coverage of these UI tests. I like to keep using jest as I already use it for unit-tests.

I'd like not to eject create-react-app if at all possible. But I'm open to it if there is no other choice.

What I've tried so far:

in package.json

"scripts": {
  "uitest": "react-scripts test --env=jsdom --verbose --testMatch='**/*.ui-test.{js}'",
}

if I run npm run uitest -- --coverage

^ I think in above scenario it only captures the tests and not the actual App.

How do I fix this?

---

Other failed attempts:

1) How to cover React jsx files in Istanbul? - Don't apply as I'm using create-react-app

2) https://github.com/facebook/create-react-app/issues/3257 - apparently this feature was suggested but was rejected.

3) https://github.com/istanbuljs/puppeteer-to-istanbul/issues/18 - There is a library called puppeteer-to-istanbul but it doesn't support source maps. (See the link for issue)

4) I also looked at the book Node.js Web Development - Fourth Edition on safaribooks - I found a useful guide for Puppeteer but it doesn't seem to cover, code coverage.

5) Book Hands-On Continuous Integration and Delivery on safaribooks - has a section on Puppeteer + Jest testing, doesn't say anything about code coverage.

6) I tried puppeteer-to-istanbul -> We can calculate code coverage for bundle this way, it doesn't support source-maps.

7) Attempted Enselic's suggestion but couldn't get it working. It seems to crash on push method inside custom preset when trying to push babel-plugin-istanbul.

Answer 1

It seems like you missing collectCoverageFrom option in your package.json file.

Try to insert into your package.json something like:

  "jest": {
    ...
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!**/setupTests.js",
      "!**/**/*.test.js"
    ],

Also it's a good idea to skip coverage for test files, as it spoils the overall coverage. For this case use ! in collectCoverageFrom array as show in the example ;)