Karma在测试文件更改时重新加载debug.html

Question

使用autoWatch: true和运行Karma时singleRun: false,对我的单元测试文件的任何更改都会导致重新运行测试,并刷新Karma网页localhost:9876:

问题是页面http://localhost:9876/debug.html(通过单击DEBUG按钮到达的页面)不会自动刷新,这是一个遗憾,因为它会向浏览器控制台输出更详细的信息,并允许您使用断点.

有没有办法http://localhost:9876/debug.html在测试文件更改时自动刷新,而不仅仅是http://localhost:9876？我通过Karma的配置文件页面阅读,但找不到任何选项.设置此页面以通过Karma之外的方式自动重新加载是完全可以接受的.

编辑:这是我的karma.config.js文件:

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

而且tests.webpack.js:

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

Answer 1

设置usePolling为真。

usePolling = true;

这对我来说效果很好。