Running Gulp with Karma in Angular 6

Question

I'm trying to execute a gulp task to run Karma after upgrading to Angular 6. Following the example in the readme on gulp-karma,

var gulp = require('gulp');
var Server = require('karma').Server;

/**
 * Run test once and exit
 */
gulp.task('test', function (done) {
  new Server({
    configFile: __dirname + '/karma.conf.js',
    singleRun: true
  }, done).start();
});

I see this error in the output:

Error: The '@angular-devkit/build-angular/plugins/karma' karma plugin is meant to be used from within Angular CLI and will not work correctly outside of it.

It seems like either gulp needs to run karma through angular-cli or the options and overrides provided to the task need to change.

I'm using:

"@angular/cli": "~6.0.8"
"karma": "^1.7.1"
"gulp-util": "^3.0.8"

Can someone please provide the correct initialization to make Karma test work in this scenario?

Why don't you just use `ng test`? What's the problem with the standard way of starting karma with the CLI? — JB Nizet, Aug 10 '18 at 22:08
As far as I know, running ng test through a gulp task doesn't allow for overrides such as specifying different config files, singleRun, browser targets, etc. I'm also not sure how just running ng test would allow me to create watchers and other gulp tasks. — nanoTitan, Aug 12 '18 at 00:16
different config file: --karma-config. singleRun: --watch=false. browser targets: --browsers. https://github.com/angular/angular-cli/wiki/test — JB Nizet, Aug 12 '18 at 07:00
I modified the question to focus on the gulp configuration. @JB Nizet - can you show how to modify gulpfile.js to use ng test? — nanoTitan, Aug 13 '18 at 13:46
It looks like there is an exec(...) function that can be called in the gulp task. I think the output can be consumed by automation for continuous deployment, but I need to dig deeper. I will update this question if this works. — nanoTitan, Aug 13 '18 at 14:21

score 0 · Answer 1 · answered Aug 13 '18 at 21:18

The following will work given the updates to Angular 6. You will need to call child_process().exec to execute ng test. This will allow you to run tests within the angular-cli framework. It may also be necessary to supply additional arguments such as increasing the maxBuffer size to avoid the Error: stderr maxBuffer exceeded in the event the buffer overflows. If you are using this for CI, then you will also want to use Chrome's headless mode to avoid browser output.

gulpfile.js

var gulp = require('gulp');
var exec = require('child_process').exec;

gulp.task('default', function (cb) {
    let maxBuffer = 1000 * 1024    // The default is 200 * 1024
    let options = {
        maxBuffer: maxBuffer
    }

    exec('ng test --watch=false --browsers=ChromeHeadless', options, function (err, stdout, stderr) {
        console.log(stdout);
        console.log(stderr);
        cb(err);
    });
})

karma.conf.js - Headless mode

customLaunchers: {
  ...
  ChromeHeadless: {
    base: 'Chrome',
    flags: [
      '--headless',
      '--disable-gpu',
      '--remote-debugging-port=9222'
    ],
  }
}

Finally, there is an alternative which uses child_process.spawn() to call ng test instead of exec(). However, I was getting an error when the gulp-cli was installed globally and not locally. This should also allow you to also work around the maxBuffer exceeded error.

Running Gulp with Karma in Angular 6

1 Answers1