gulp-jsx-coverage

Enable istanbul coverage on ES2015/babel or coffee-script/cjsx files when you do mocha/jasmine tests, also deal with sourceMap for coverage report and stack trace.

Usage no npm install needed!

<script type="module">
  import gulpJsxCoverage from 'https://cdn.skypack.dev/gulp-jsx-coverage';
</script>

README

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.

npm version npm download Dependency Status Build Status License

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

  1. 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
  1. 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
  1. 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 |                |
---------------|----------|----------|----------|----------|----------------|

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:

  • API changed:

    • you should rename all initIstanbulHookHack into initModuleLoaderHack

0.2.0

  • the sourceMap stack trace feature requires:
    • mocha >= 2.2.2
    • the options.babel.sourceMap should be changed from 'inline' to 'both'