业力覆盖与Babel+Browserify预处理

Question

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

PhantomJS 1.9.8 (MacOSX0.0.0)错误 错误:不变冲突：_registerComponent(.)：目标容器不是DOM元素。 在/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

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

Answer 1

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

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

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

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

我知道这不一定是最好的解决办法，但至少现在起作用了。如果有人知道更好的方法，请告诉我们！

Answer 2

您正在处理的代码试图将组件呈现到DOM节点中。您的代码依赖于它已经存在(在index.html或其他地方)。但是PhantomJS找不到DOM节点。您应该在调用ReactDOM.render之前创建它，或者搜索如何更改幻影使用的html页面模板来运行测试(这里有插件doung )。