Thursday, 29 November 2018

Code Coverage on React with Puppeteer + Istanbul

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

attempt 1 failure

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



from Code Coverage on React with Puppeteer + Istanbul

No comments:

Post a Comment