When starting Karma with autoWatch: true and singleRun: false any change in my unit test files causes the tests to restart and update the Karma web page in localhost:9876 :
The problem is that the page in http://localhost:9876/debug.html (the page you reach by pressing the DEBUG button) does not perform auto-refresh, which is a pity as it prints more detailed information in the browser console and allows you to use breakpoints.
Is there a way to automatically update http://localhost:9876/debug.html when the test file changes, and not just http://localhost:9876 ? I read the Karma configuration page and could not find any options for this. Setting this page to automatically restart through funds outside of Karma is quite acceptable.
Edit: Here is 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);