业力覆盖和 Babel+Browserify 预处理答案

【问题标题】：Karma Coverage and Babel+Browserify Preprocessing业力覆盖和 Babel+Browserify 预处理
【发布时间】：2015-08-25 09:54:31
【问题描述】：

我正在使用 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

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

【问题讨论】：

这似乎是与 _registerComponent 方法相关的错误，而不是覆盖率本身。此外，您的 './client/**/*.js' 预处理器将覆盖您的所有代码，包括您的规范文件。调试错误的最佳方法是将singleRun 设置为false 并查看正在运行测试的浏览器。在那里你会看到一个“调试”按钮，它会打开另一个窗口。从那里您可以检查在测试中运行的实际代码。至于解决覆盖问题，我正在努力解决自己尚未找到实际解决方案的问题。我很想知道修复此问题后会出现哪些错误
感谢您的帮助，实际问题似乎是 karma 的 Browserify 插件错误，它没有正确映射依赖项。我认为暂时我不会在我的测试中覆盖，因为我现在有其他优先事项。
这场斗争是真实的......现在一直在努力解决这个问题。
有一个非常相似的问题并为此创建了一个问题stackoverflow.com/questions/36670645/… ...我在问题中描述了一个可能对您有所帮助的解决方法。
谢谢@BenjaminConant，我会查的。

标签： javascript reactjs karma-runner karma-coverage isparta

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：