gulp.watch causes "task completion callback called too many times"

Question

When I change a file (like HelloWorld.js), I want to run a specific test suite (called HelloWorldSpec.js) using Karma.

Therefore I created this Gulp task:

gulp.task('dev', function(done) {
  // Watch source code changes
  gulp.watch('src/**/*.js').on('change', function(file) {

    // Assemble path to test file
    var pathObject = path.parse(file.path);
    var specificationPath = 'test/' + pathObject.name + 'Spec.js';

    // Run test file
    new Server({
      configFile: __dirname + '/karma.conf.js',
      files: [
        'dist/**/*.js',
        specificationPath
      ],
      singleRun: true
    }, done).start();
  });
});

The problem I have now is that I pass the done callback to the Karma server which executes it after every test run. Thus I get the following error on the second source code modification (and every following):

Error: task completion callback called too many times

If I don't pass the done callback to the Server, then my Gulp tasks ends after the first test run. But I want to keep watching source code modifications. How can I do that?

score 0 · Answer 1 · answered Aug 24 '16 at 13:56

I also faced the same issue. I stumbled upon this link and this which actually worked.

gulp.task('test', function (done) {
    var server =  new Server({
        configFile: __dirname + '/karma.conf.js',
        singleRun: true
    });

    server.on('browser_error', function (browser, err){
        gutil.log('Karma Run Failed: ' + err.message);
        throw err;
    });

    server.on('run_complete', function (browsers, results){
        if (results.failed) {
            throw new Error('Karma: Tests Failed');
        }
        gutil.log('Karma Run Complete: No Failures');
        done();
    });

    server.start();
});

Hope this helps you!.

score 0 · Answer 2 · answered Apr 25 '17 at 08:33

I had similar issue while I was using webpack watch in the same time as gulp-watch.

This is was my gulp setting:

gulp.task("javascript", function (done) {
    webpack(webpackConfig, function (err, stats) {
        // logs errors and stats here
        done();
        browserSync.reload();
    });
});

gulp.watch([JS_SOURCE, HTML_VIEWS], ["javascript"]);

And my webpack config:

module.exports = {
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                loaders: "babel-loader",
                exclude: /node_modules/,
                options: {
                    presets: ["es2015"]
                }
            }
        ]
    },
    watch: true
};

Removing the watch:true in the webpack config fixed the issue.

Thanks for giving feedback but I am not using webpack so I cannot apply your fix. :( — Benny Code, Apr 25 '17 at 08:35

gulp.watch causes "task completion callback called too many times"

2 Answers2