gjc

gulp-jsx-coverage

deprecated

Showing:

Popularity

Downloads/wk

207

GitHub Stars

34

Maintenance

Last Commit

4yrs ago

Contributors

7

Package

Dependencies

6

Size (min+gzip)

178.3KB

License

Type Definitions

Tree-Shakeable

No?

Categories

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

deprecated Suggest to use jest to test, or use new istanbul/nyc directly.

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/                      // 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'

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial