How to cover React jsx files in Istanbul?

Question

I\'m trying to integrate my existing test processes to now include React, but am struggling on the code coverage part. I\'ve been able to get my unit tests working fine by foll

Answer 1

A great tutorial can be found at https://istanbul.js.org/docs/tutorials/es2015/

I just slightly modified it to include react. (I also used 'env' instead of 'es2015', but either should work.) Here are my configurations:

npm i babel-cli babel-register babel-plugin-istanbul babel-preset-env babel-preset-react cross-env mocha nyc --save-dev

.babelrc

{
  "presets": ["env", "react"],
  "env": {
    "test": {
      "plugins": [
        "istanbul"
      ]
    }
  }
}

package.json

"scripts": {
  "test": "cross-env NODE_ENV=test nyc mocha test/**/*.spec.js --compilers js:babel-register"
}

"nyc": {
  "require": [
    "babel-register"
  ],
  "reporter": [
    "lcov",
    "text"
  ],
  "sourceMap": false,
  "instrument": false
}

Answer 2

Add a .istanbul.yml file to your app root and add .jsx to extensions "extension"...

Here is what I did.

// File .istanbul.yml
instrumentation:
    root: .
    extensions: ['.js', '.jsx']

To kickstart istanbul and mocha with jsx

$ istanbul test _mocha -- test/**/* --recursive --compilers js:babel/register

This will convert your .jsx files to .js and then istanbul will cover them.

I hope this helps. It worked for me.

Answer 3

There is a library you can take a look at, gulp-jsx-coverage (https://github.com/zordius/gulp-jsx-coverage).

Answer 4

In case someone else is having the same problem and solutions above don't work, I found that adding a simple "-e .jsx" tag worked:

"scripts": {
   "start": "meteor run",
   "test": "NODE_ENV=test mocha --recursive --compilers js:babel-register --require tests/index.js ./tests/**/*.test.js",
   "coverage": "NODE_ENV=test nyc -all -e .jsx npm test"
}

This solution was found at: http://www.2devs1stack.com/react/tape/testing/nyc/coverage/2016/03/05/simple-code-coverage-with-nyc.html