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 following this project/tutorial - https://github.com/danvk/mocha-react - http://www.hammerlab.org/2015/02/14/testing-react-web-apps-with-mocha/

I've been using Istanbul to cover my node code and it's working pretty well. However, I'm having trouble getting it to cover the jsx files that I'm using in my tests.

Here's an example of an existing Istanbul task, which also runs fine on vanilla js (node backend code)

var mocha = require('gulp-mocha');
var istanbul = require('gulp-istanbul');

gulp.task('test-api', function (cb) {
 gulp.src(['api/**/*.js'])
 .pipe(istanbul()) // Covering files
 .pipe(istanbul.hookRequire()) // Force `require` to return covered files
 .on('finish', function () {
 gulp.src(['test/api/*.js'])
 .pipe(mocha())
 .pipe(istanbul.writeReports()) // Creating the reports after tests runned
 .on('end', cb);

My issue ( i think ) is I can't get Istanbul to recognize the jsx files or they're not being compared to what was run in the tests. I tried using the gulp-react module to precompile the jsx to js so it can be used by Istanbul, but I'm not sure if it's working. It's not being covered somehow and I'm not sure where the issue is.

var mocha = require('gulp-mocha');
var istanbul = require('gulp-istanbul');
var react = require('gulp-react');

gulp.task('test-site-example', function (cb) {
 gulp.src(["site/jsx/*.jsx"])   //Nothing is being reported by Istanbul (not being picked up)
 .pipe(react())      //converts the jsx to js and I think pipes the output to Istanbul
 .pipe(istanbul())

 .pipe(istanbul.hookRequire()) // Force `require` to return covered files
 .on('finish', function () {
 gulp.src(['test/site/jsx/*.js'], {  //tests run fine in mocha, but nothing being shown as reported by mocha (not covered)
 read: false
 })
 .pipe(mocha({
 reporter: 'spec'
 }))
 .pipe(istanbul.writeReports())
 .on('end', cb);
 });
 ;
});

Any ideas what I'm doing wrong? Or any clue on how to integrate a test runner (preferably Istanbul) into a Gulp-Mocha-React project?

score 7 · Answer 1 · answered Jul 23 '15 at 23:28

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.

score 3 · Accepted Answer · answered Mar 12 '15 at 22:36

3

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

answered Mar 12 '15 at 22:36

Kuba Holuj

687
1
6
16

score 2 · Answer 3 · answered Feb 16 '17 at 21:00

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

score 1 · Answer 4 · answered Apr 17 '17 at 06:31

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
}

How to cover React jsx files in Istanbul?

4 Answers4

Linked