4

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

PhantomJS 1.9.8 (Mac OS X 0.0.0) 错误

错误：不变违规：_registerComponent(...)：目标容器不是 DOM 元素。

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

我的业力配置文件是：

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 gulp-karma，但我想这与问题没有任何关系。

4

2 回答 2

0

我遇到了同样的问题，在我的情况下发生是因为 React 找不到它需要在其中呈现 html 的元素。

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

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

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

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

于 2016-04-19T00:36:07.487 回答
0

您正在覆盖的代码正在尝试将组件呈现到 DOM 节点中。您的代码依赖于它已经存在（在 index.html 或其他地方）。但是 PhantomJS 找不到那个 DOM 节点。您应该在调用 ReactDOM.render 之前创建它或搜索如何更改 phantom 用于运行测试的 html 页面的模板（有插件这样做）。

于 2016-05-16T15:01:13.377 回答