Gulp-jsx-coverage NPM

gulp-jsx-coverage

Enable istanbul coverage on ES2015/babel files when you do mocha/jasmine tests, also deal with sourceMap for stack trace....as gulp task.

Features

Help you create a gulp task to handle mocha testing + istanbul coverage
Transpile .jsx and ES2015 .js files on the fly
Use babel to transpile .js and .jsx files so you can use ES2015 features inside your .js and .jsx files!
Customize everything by options
sourceMaps on stack traces when mocha test failed (powered by source-map-support)
coverage threshold

ORIGINAL CODE/LINE in coverage reports

ORIGINAL CODE/LINE in stack traces

Usage

Install

For Mocha tests:

npm install gulp gulp-jsx-coverage gulp-mocha babel-plugin-istanbul --save-dev

For Jasmine tests:

npm install gulp gulp-jsx-coverage gulp-jasmine babel-plugin-istanbul --save-dev

Configure Babel

Configure your .babelrc and install proper presets or plugins.

Here is a .babelrc example:

{
  presets: ['es2015', 'react']
}

And then:

npm install babel-preset-es2015 babel-preset-react

Create Gulp Task

Put this into your gulpfile.js:

gulp.task('your_task_name', require('gulp-jsx-coverage').createTask({
    src: ['test/**/*.js', 'test/components/*.jsx'],  // your test files
}));

Then run the task: gulp your_task_name

Best Practices

The golden rule: Use .jsx as ext name when jsx syntax inside it. Require it by require('file.jsx').
When you develop a module, do not use any module loader hooks. (Refer to Babel require hook document)
Excludes babel as possible as you can to improve babel performance.
When you develop an application, you may use module loader hooks. But, don't enable the hook when you do testing.

Usage: General Mocha Test Creator

gulp.task('your_task_name', require('gulp-jsx-coverage').createTask({
    src: ['test/**/*.js', 'test/components/*.jsx'],  // will pass to gulp.src as mocha tests

    istanbul: {                                      // will pass to istanbul, this is default setting
        exclude: /node_modules|test[0-9]/            // do not instrument these files
    },

    threshold: [                                     // fail the task when coverage lower than one of this array
        {
            type: 'lines',                           // one of 'lines', 'statements', 'functions', 'banches'
            min: 90
        }
    ],

    babel: {                                         // this is default setting
        include: /\.jsx?$/,
        exclude: /node_modules/,
        omitExt: false                               // if you wanna omit file ext when require(), put an array
    },                                               // of file exts here. Ex: ['.jsx', '.es6'] (NOT RECOMMENDED)

    coverage: {
        reporters: ['text-summary', 'json', 'lcov'], // list of istanbul reporters
        directory: 'coverage'                        // will pass to istanbul reporters
    },

    mocha: {                                         // will pass to mocha
        reporter: 'spec'
    },

    //optional
    cleanup: function () {
        // do extra tasks after test done
        // EX: clean global.window when test with jsdom
    }
}));

Usage: Other Testing Frameworks

var GJC = require('gulp-jsx-coverage');
var jasmine = require('gulp-jasmine');

gulp.task('my_jasmine_tests', function () {
    GJC.initModuleLoader(GJCoptions);                     // Refer to previous gulp-jsx-coverage options

    return gulp.src('test/*.js')
    .pipe(jasmine(jasmineOptions))
    .on('end', GJC.collectIstanbulCoverage(GJCoptions));  // Refer to previous gulp-jsx-coverage options
});

Live Example: mocha

git clone https://github.com/zordius/gulp-jsx-coverage.git
cd gulp-jsx-coverage
npm install
npm run mocha

OUTPUT:

 ~/gulp-jsx-coverage master>npm run mocha

> gulp-jsx-coverage@0.3.8 mocha /Users/zordius/gulp-jsx-coverage
> gulp mocha_tests

[11:50:14] Using gulpfile ~/gulp-jsx-coverage/gulpfile.js
[11:50:14] Starting 'mocha_tests'...


  target (tested by test1.js)
    ✓ should multiply correctly
    - should not show coverage info for test1.js
    ✓ should handle es2015 template string correctly

  target (tested by test2.jsx)
    ✓ should multiply correctly (77ms)
    - should not show coverage info for test2.jsx
    1) should exception and failed

  Component.jsx (tested by test2.jsx)
    ✓ should render Hello World


  4 passing (104ms)
  2 pending
  1 failing

  1) target (tested by test2.jsx) should exception and failed:
     TypeError: "hohoho
 this is
 multi line
 error!".notAFunction is not a function
      at Context.<anonymous> (test2.jsx:34:10)


[11:50:16] 'mocha_tests' errored after 1.86 s
[11:50:16] Error in plugin 'gulp-mocha'
Message:
    1 test failed.
---------------|----------|----------|----------|----------|----------------|
File           |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
---------------|----------|----------|----------|----------|----------------|
All files      |    90.48 |      100 |       75 |    90.48 |                |
 Component.jsx |       75 |      100 |       50 |       75 |              5 |
 target.js     |       80 |      100 |    66.67 |       80 |              8 |
 testlib.js    |      100 |      100 |      100 |      100 |                |
---------------|----------|----------|----------|----------|----------------|

Check gulpfile.js for the sample input.
Check .babelrc for the sample babel config.
Check coverage report directory for the sample output.

Upgrade Notice

0.4.0

Core changed:
- do not support isparta now
- do not support coffee-script/cjsx now
- do not support options.babel now (please use .babelrc)
- do not support options.istanbul.coverageVariable now
- move to istanbul.js and babel-plugin-istanbul now

0.3.2

API changed:
- you should rename all colloectIstanbulCoverage into collectIstanbulCoverage

0.3.0

Babel upgraded:
- You should add proper options.babel.plugins or options.babel.presets to transpile your script properly. Please refer to http://babeljs.io/docs/plugins/
API changed:
- you should rename all initIstanbulHookHack into initModuleLoaderHack

0.2.0