Karma reload debug.html on test file changes

Question

When running Karma with autoWatch: true and singleRun: false, any change to my unit test files causes the tests to be re-run, and refreshes the Karma webpage at localhost:9876:

The problem is that the page athttp://localhost:9876/debug.html (the page you reach by clicking the DEBUG button) doesn't autorefresh, which is a pity since it prints more detailed information to the browser console and allows you to use breakpoints.

Is there a way to auto-refresh http://localhost:9876/debug.html on test file changes, and not just http://localhost:9876? I read through Karma's configuration file page and couldn't find any options for this. Setting up this page to auto-reload through means outside of Karma is perfectly acceptable.

Edit: Here's my karma.config.js file:

var webpack = require('webpack');
var path = require('path');

var environment = getEnvironment();

function getEnvironment() {
  console.log('NODE_ENV: ' + process.env.NODE_ENV);

  if(process.env.NODE_ENV === 'dev') {
    return {
      browsers: ['Chrome'],
      singleRun: false
    };
  }
  else if(process.env.NODE_ENV === 'staging') {
    return {
      browsers: ['PhantomJS2'],
      singleRun: true
    };
  }
  else if(process.env.NODE_ENV === 'production') {
    return {
      browsers: ['PhantomJS2'],
      singleRun: true
    };
  }
  return {};
}

module.exports = function (config) {
  config.set({
    browsers: environment.browsers,
    singleRun: environment.singleRun,
    frameworks: ['mocha'],
    files: [
      'tests.webpack.js',
      {pattern: 'assets/img/*.jpg', watched: false, included: false, served: true, nocache: false},
      {pattern: 'assets/img/*.png', watched: false, included: false, served: true, nocache: false},
      {pattern: 'assets/img/*.gif', watched: false, included: false, served: true, nocache: false}
    ],
    proxies: {
      '/assets/img/': '/base/assets/img/'
    },
    preprocessors: {
      'tests.webpack.js': ['webpack']
    },
    reporters: ['progress', 'clear-screen', 'dots'],
    webpack: {
      entry: {
        app: ['./src/front.jsx']
      },
      devServer: {
        historyApiFallback: true
      },
      output: {
        // publicPath: 'http://localhost:8080/',
        filename: './dist/[name].js'
      },
      module: {
        loaders: [{
          test: /\.(js|jsx)$/,
          loaders: ['react-hot', 'jsx'],
          include: /src/,
          exclude: /(node_modules)/
        },
        {
          test: /\.(js|jsx)$/,
          include: /src/,
          exclude: /(node_modules)/,
          loader: 'babel',
          query: {
            presets:['react', 'es2015']
          }
        },
        {
          test: /\.scss$/,
          include: /src/,
          exclude: /(node_modules)/,
          loaders: ['style', 'css', 'sass']
        },
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
        { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
      ]
      },
      plugins: [
        new webpack.ProvidePlugin({
          'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
        })
      ],
      resolve: {
        root: path.resolve(__dirname) + "/src/",
        extensions: ['', '.js', '.jsx']
      },
      resolveLoader: {
        root: path.join(__dirname, "node_modules")
      }
    },
    webpackServer: {
      noInfo: true
    }
  });
};

And tests.webpack.js:

var context = require.context('./src', true, /-test\.jsx?$/);
context.keys().forEach(context);

Answer 1

Set usePolling to true.

usePolling = true;

This works fine for me.