have Karma keep browser and test results open longer

Question

This project with an accompanyingblog post demonstrates how to use Karma with React.js but when you run npm run test Karma opens the browser very quickly and shuts it down almost as quickly, not allowing you to debug the application (which its supposed to do). I changed the config to singleRun: false, thinking it might be singleRun that's shutting the application down.

I also added autoWatch: true hoping it would keep the test results visible but that didn't work either.

Question: how to get karma to keep the browser open long enough to view the test results and debug the application?

This is the karma.config.js file

var webpack = require('webpack');

module.exports = function (config) {
  config.set({

    // browsers: [ process.env.CONTINUOUS_INTEGRATION ? 'Firefox' : 'Chrome' ],
    browsers: [ 'Chrome' ],

    singleRun: true,

    // autoWatch: true,

    frameworks: [ 'mocha' ],

    files: [
      'tests.webpack.js'
    ],

    preprocessors: {
      'tests.webpack.js': [ 'webpack', 'sourcemap' ]
    },

    reporters: [ 'dots' ],

    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          { test: /\.js$/, loader: 'babel-loader' }
        ]
      }
    },

    webpackServer: {
      noInfo: true
    }

  });
};

Answer 1

The singleRun:false option auto-recovers closed browser windows. You will need to execute karma stop or kill the process. That was very annoying for me.

The watch mode of Karma was also annoying for me since I have > 2500 tests that take a long time to execute. I don't want to trigger that on every file change.

Using Gulp in combination with the Karma API provides more flexibility.

Following example can be used for testing a single file and keeping the browser open until it is manually closed. It applies the browsers_change event of Karma to stop the server.

Related infos:

• https://karma-runner.github.io/0.13/dev/public-api.html
• Karma run single test

---

var gulp = require('gulp');
var karma = require('karma');
var KarmaServerConstructor = karma.Server;
var karmaStopper = karma.stopper;   
var commandLineArguments = require('yargs').argv;

    //Executes only one test which has to be passed as command line argument --filePath
    //The option --browser also has to be passed as command line argument.
    //Example usage:  gulp single --browser="Chrome_With_Saved_DevTools_Settings" --filePath="C:\myTest.spec.js"
    gulp.task('single', function (done) {     

        var filePath = commandLineArguments.filePath.replace(/\\/g, "/");

        var karmaOptions = {
            configFile: __dirname + '/karma.conf.js',
            action: 'start',        
            browsers: [commandLineArguments.browser],       
            files: [
                './Leen.Managementsystem/bower_components/jquery/dist/jquery.js',
                './Leen.Managementsystem/bower_components/globalize/lib/globalize.js',
                { pattern: './Leen.Managementsystem/bower_components/**/*.js', included: false },
                { pattern: './Leen.Managementsystem.Tests/App/test/mockFactory.js', included: false },
                { pattern: './Leen.Managementsystem/App/**/*.js', included: false },
                { pattern: './Leen.Managementsystem.Tests/App/test/*.js', included: false },
                { pattern: filePath, included: false },
                './Leen.Managementsystem.Tests/App/test-main.js',
                './switchKarmaToDebugTab.js' //also see https://stackoverflow.com/questions/33023535/open-karma-debug-html-page-on-startup
            ]
        };

        var karmaServer = new KarmaServerConstructor(karmaOptions, done);   
        karmaServer.on('browsers_change', stopServerIfAllBrowsersAreClosed);
        karmaServer.start();     
    });

   function stopServerIfAllBrowsersAreClosed(browsers) {
  if (browsers.length === 0) {

//double check since browser might only be closed temporarily due to connection issues
setTimeout(function () {
  if (browsers.length === 0) {
    karmaStopper.stop();
  }
}, 2000);   
  }
}