javascript - Karma Coverage 和 Babel+Browserify 预处理

Question

我正在使用 Karma 来测试我的 ES6 代码。当我将 karma-coverage 添加到混合中时，我需要为覆盖率工具添加所有源文件以生成有用的报告，但是当我这样做时，Karma 在所有浏览器中都会给我这个错误:

PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR

Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

at /var/folders/55/9_128mq95kz1q_2_vwy7qllw0000gn/T/41cf272955d73fbba8ad1df941172139.browserify:46444:0 <- ../../node_modules/react/lib/invariant.js:49:0

我的 Karma 配置文件是:

basePath: '',
browserNoActivityTimeout: 100000,
frameworks: ['phantomjs-shim', 'mocha', 'chai', 'browserify'],
files: [
  './client/**/*.js',
  './client/**/*.spec.js'
],
exclude: [
  './client/dist/*.js',
],
preprocessors: {
  './client/**/*.js': ['browserify', 'sourcemap', 'coverage']
},
browserify: {
  debug: true,
  transform: [
    ['babelify', {
        optional: ["runtime"],
        plugins: ["rewire"]
    }],
  ]
},
coverageReporter: {
  instrumenters: { isparta : require('isparta') },
  instrumenter: {
    '**/*.js': 'isparta'
  },
  type : 'html',
  dir : './coverage/'
},
reporters: ['mocha', 'coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['Chrome', 'Firefox', 'Safari', 'PhantomJS'],
singleRun: true

如果我从 files 数组中删除 './client/**/*.js',，则测试有效，但覆盖率只显示测试代码。我将 gulp 中的 Karma 与 gulp-karma 结合使用，但我认为这与问题无关。

Answer 1

我遇到了同样的问题，在我的案例中，这是因为 React 无法找到它需要在其中呈现 html 的元素。

我通过将以下 if 语句添加到我的主 js 文件中找到了一个快速修复方法:

if ($('#container').length <= 0) {
  $('body').prepend('<div id="container"></div>');
}

ReactDom.render(
  <App />,
  document.getElementById('container')
);

我知道这一定不是修复它的最佳方法，但至少它现在有效。如果有人知道更好的方法，请告诉我们!