gulp-jsx-coverage

    0.4.0 • Public • Published

    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'

    Install

    npm i gulp-jsx-coverage

    DownloadsWeekly Downloads

    241

    Version

    0.4.0

    License

    none

    Last publish

    Collaborators

    • zordius