CODEWITHSUNDEEP
karma-runnerwebpack
Leahcim
Leahcim

Reputation: 42069

have Karma keep browser and test results open longer

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
    }

  });
};

Upvotes: 10

Views: 9461

Answers (2)

Stefan
Stefan

Reputation: 12390

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:

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);   
  }
}

Upvotes: 4

Dan K.K.
Dan K.K.

Reputation: 6094

Referencing to the official docs the default name of the Karma configuration file is karma.conf.js, make sure that yours is named correctly.

Regarding to the leaving the browser window opened, I've encountered with a similar issue and my solution was running the Karma directly with --auto-watch flag. Try $ karma start --auto-watch instead of $ npm run test (make sure that you've installed karma-cli globally via $ npm install -g karma-cli).

You also should checkout the scripts: configuration section in your package.json file. Some forcing options might be specified there.

Upvotes: 8

Related Questions