Search code examples
javascriptistanbulgulp-mocha

How can I use Gulp to show test coverage using gulp-mocha


Please house, I have transpile my code from es6 to es5 using gulp as a task runner. I have done my coverage report with istanbul. It is not showing test coverage after setting it up. below is my code

import gulp from 'gulp';
import loadPlugins from 'gulp-load-plugins';
import path from 'path';
import mocha from 'gulp-mocha';
import exit from 'gulp-exit';
import coveralls from 'gulp-coveralls';
import cover from 'gulp-coverage';

Load the gulp plugins into the plugins variable

const plugins = loadPlugins();

gulp.task('tests', () => {
  gulp.src('./server/tests/*.js')
    .pipe(plugins.babel())
    .pipe(mocha())
    .pipe(exit());
 });

Compile all Babel Javascript into ES5 and place in dist folder

const paths = {
  js: ['./**/*.js', '!dist/**', '!node_modules/**']
};

Compile all Babel Javascript into ES5 and put it into the dist dir

gulp.task('babel', () =>
  gulp.src(paths.js, { base: '.' })
    .pipe(plugins.babel())
    .pipe(gulp.dest('dist'))
);

gulp.task('coverage', () => {
  gulp.src('server/test/**/*.js', { read: false })
    .pipe(cover.instrument({
     pattern: ['server/controllers/**/*.js'],
      debugDirectory: 'debug'
    }))
    .pipe(mocha())
    .pipe(cover.gather())
    .pipe(cover.format())
    .pipe(gulp.dest('reports'));
 });

gulp.task('coveralls', () => gulp.src('./coverage/lcov')
    .pipe(coveralls()));

Restart server with on every changes made to file

  gulp.task('nodemon', ['babel'], () =>
    plugins.nodemon({
    script: path.join('dist', 'index.js'),
    ignore: ['README.md', 'node_modules/**/*.js', 'dist/**/*.js'],
    ext: 'js',
    tasks: ['babel']
  })
);

gulp.task('test', ['tests']);
gulp.task('default', ['nodemon']);
gulp.task('production', ['babel']);

Solution

  • The following snippets walk through how I solved this issue with a little modification.

    put the following code in you gulpfile

    import gulp from 'gulp';
    import loadPlugins from 'gulp-load-plugins';
    import path from 'path';
    import shell from 'gulp-shell';
    
    // Load the gulp plugins into the `plugins` variable
    const plugins = loadPlugins();
    
    // Compile all Babel Javascript into ES5 and place in dist folder
    const paths = {
      js: ['./**/*.js', '!dist/**', '!node_modules/**', 
      '!./server/tests/**']
    };
    
    // Compile all Babel Javascript into ES5 and put it into the dist dir
    gulp.task('babel', () =>
      gulp.src(paths.js, { base: '.' })
        .pipe(plugins.babel())
        .pipe(gulp.dest('dist'))
    );
    
    gulp.task('migrate', shell.task([
      'cross-env NODE_ENV=test sequelize db:migrate',
    ]));
    
    gulp.task('coverage', shell.task([
      'cross-env NODE_ENV=test nyc mocha ./server/test/**/*.js',
    ]));
    
    // Restart server with on every changes made to file
    gulp.task('nodemon', ['babel'], () =>
      plugins.nodemon({
        script: path.join('dist', 'index.js'),
        ignore: ['README.md', 'node_modules/**/*.js', 'dist/**/*.js'],
        ext: 'js',
        tasks: ['babel']
      })
    );
    
    gulp.task('test', ['migrate', 'coverage']);
    gulp.task('default', ['nodemon']);
    gulp.task('production', ['babel']);
    

    then go over to your package.json then add the following

    "nyc": {
        "require": [
          "babel-register"
        ],
        "reporter": [
          "lcov",
          "text",
          "html"
        ],
        "sourceMap": false,
        "instrument": false,
        "exclude": [
          "the test file you want to exclude from coverage"
        ]
      }
    

    absolutely done