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?

Jeff Fairley

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.

I am using mocha and isparta directly with Babel 6 as follows:

`npm test` command

BABEL_ENV=test babel-node node_modules/isparta/bin/isparta cover _mocha

`.babelrc`

{
    "plugins": [
        "add-module-exports",
        "transform-decorators-legacy",
        "transform-runtime"
    ],
    "presets": [
        "es2015",
        "react",
        "stage-0"
    ],
    "env": {
        "test": {
            "plugins": [
                "rewire"
            ]
        }
    }
}

`test/mocha.opts`

--compilers js:babel-core/register
--require test/init.js

src/**/*_test.js*

`test.init.js`

'use strict';

require('mock-require')('clappr');
require('testdom')('<html><body></body></html>', {
    React: 'react',
    localStorage: 'localStorage'
});

`.istanbul.yml`

instrumentation:
  root: src
  excludes: ['*_test.js']

select dependencies from `package.json`

"babel-cli": "^6.7.5",
"babel-core": "^6.7.2",
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-rewire": "^1.0.0-rc-2",
"babel-plugin-runtime": "^1.0.7",
"babel-plugin-syntax-jsx": "^6.5.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.7.2",
"babel-runtime": "^5.8.34",
"babel-template": "^6.7.0",
"babel-types": "^6.7.2",
"isparta": "^4.0.0",
"mocha": "^2.4.5",

A note on .JSX files

I renamed all of my .JSX files to .JS, and here's why:

I use codecov for hosted coverage reporting. This exposed the fact that while coverage/lcov-report/index.html showed the correct coverages, something in the JSON coverage files is missing for .JSX files. I was never able to figure it out. As far as I can tell, it's a bug in isparta or istanbul. I also tried istanbul@1.0.0-alpha.2 and found it had the same issue.
React used to recommend naming files .JSX for the benefit of transform utilites and editors. This is no longer a recommendation. As far as I can tell, it just doesn't matter anymore.

Since switching to .JS, I haven't seen any issues with tools including Atom and IntelliJ.

If you don't want to rename your files, you can add the following to my examples from above:

In the script, after isparta cover, add --include \"src/**/*_test.jsx\".
To .istanbul.yml, add

extensions:
  - .js
  - .jsx

来源：https://stackoverflow.com/questions/30300782/code-coverage-on-jsx-tests-with-istanbul

标签

reactjs

code-coverage

react-jsx

istanbul

Code coverage on JSX tests with Istanbul

* UPDATE *

npm test command

.babelrc

test/mocha.opts

test.init.js

.istanbul.yml

select dependencies from package.json