18

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.

bhathiya-perera
  • 1,303
  • 14
  • 32
  • 3
    Hi, I'm the guy who filed https://github.com/facebook/create-react-app/issues/3257. FYI I ended up doing a "partial eject" i.e. only ejecting build.js and dependencies (see https://github.com/Enselic/sequencediagram.io/commit/6eb3873b4f1e3c06aa433602df8821f7914eb47c) Then you can add your own preset that adds code coverage (see https://github.com/Enselic/sequencediagram.io/blob/master/config/babel-preset-sequencediagram-io.js) while still keeping the goodies of other react-scripts parts without bloating your repositoriy. – Enselic Nov 27 '18 at 13:23
  • 1
    @Enselic OK Thanks, I'll try this approach. Just curios what did you do to partially eject, copy new things, and use git to revert, copy necessary stuff back?. BTW that is some good piece of software as well (starred). – bhathiya-perera Nov 27 '18 at 13:28
  • 1
    Yes exactly: to partially eject, I did a full, normal eject, then manually undid what I did not want to eject. Glad to hear you liked my project, and thanks for the star :) – Enselic Nov 27 '18 at 13:33
  • In the end I decided to focus on writing more unit tests. I also attempted @Enselic's suggestion, but I couldn't get it working. :) I'll keep the question and see if someone has some more ideas. Once bounty is allowed, I shall also try that. – bhathiya-perera Nov 27 '18 at 17:43

1 Answers1

3

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 ;)

mpospelov
  • 1,510
  • 1
  • 15
  • 24
  • `collectCoverageFrom` is not the issue here. I already have it defined and it is working fine for unit tests. This is not for unit tests but for UI tests, so I need to get coverage from what is running in the browser. – bhathiya-perera Jan 18 '19 at 09:49
  • Ok I see, did you try to use official documentation approach? https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-coverage – mpospelov Jan 18 '19 at 10:02
  • 2
    That doesn't work as create-react-app uses webpack to transpile(js 2 js compile) the js files. I already tried it. It creates coverage for the bundle of js which is not useful. – bhathiya-perera Jan 18 '19 at 12:34
  • there was discussion on github which might help you https://github.com/istanbuljs/puppeteer-to-istanbul/issues/18#issuecomment-418182808 – mpospelov Jan 20 '19 at 13:11
  • it has example implementation of transfering puppeter coverage from browser https://github.com/smokku/wrte/blob/62059a4/test/runner.js#L36 – mpospelov Jan 20 '19 at 13:11
  • Thanks for all your suggestions. I've already gone in that path. But either way there doesn't seem to be possible without ejecting `create-react-app`. If I eject it I loose it's advantages. – bhathiya-perera Jan 31 '19 at 11:26