Code coverage on JSX tests with Istanbul

Question

I am trying to instrument my code to get some coverage up and running, but something is slipping through my fingers.

I launch istanbul with:

node_modules/.bin/istanbul cover ./node_modules/mocha/bin/_mocha -- -u exports -R spec

And my mocha.opts looks like this:

app/assets/javascripts/components/**/*-mocha.jsx
--compilers jsx:mocha/compiler.js

Everything seems to run fine (the tests run, at least), but the only coverage that I get is on the files used to compile the JSX to JavaScript (used in compiler.js

compiler.js                 100%
jsx-stub-transform.js       65% 

Terribly useful...

Any ideas?

Answer 1

I use gulp-jsx-coverage.

Here is my config as an example:

var jsxCoverage = require('gulp-jsx-coverage');
gulp.task('test', ['lint', 'env:test'], jsxCoverage.createTask({
    src: ['src/**/*_test.js', 'src/**/*_test.jsx'],  // will pass to gulp.src as mocha tests
    istanbul: {                                      // will pass to istanbul
        coverageVariable: '__MY_TEST_COVERAGE__',
        exclude: /node_modules|tests|._test/         // do not instrument these files
    },
    transpile: {                                     // this is default whitelist/blacklist for transpilers
        babel: {
            include: /\.jsx?$/,
            exclude: /node_modules/
        }
    },
    coverage: {
        reporters: ['text', 'lcov', 'cobertura'],    // list of istanbul reporters
        directory: 'coverage'                        // will pass to istanbul reporters
    },
    mocha: {                                         // will pass to mocha
        reporter: 'spec'
    },
    babel: {                                         // will pass to babel
        sourceMap: 'inline',                         // get hints in HTML coverage reports
        plugins: []
    }
}));

* UPDATE *

Over time I decided to stop using gulp-jsx-coverage. My tests use the babel-rewire-plugin, and gulp-jsx-coverage was not instrumenting my files correctly, resulting in a coverage report that included a bunch of untested generated code. No bueno.

See my 2nd answer for my current set up.