业力覆盖和Babel + Browserify预处理 [英] Karma Coverage and Babel+Browserify Preprocessing

问题描述

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

I'm using Karma to test my ES6 code. When I add karma-coverage to the mix, I need to add all the source files for the coverage tool to make a useful report, but when I do that, Karma gives me this error in all browsers:

PhantomJS 1.9.8(Mac OS X 0.0.0)错误

PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR

错误:始终违反:_registerComponent(...):目标容器不是DOM元素.

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

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

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

我的Karma配置文件是:

My Karma config file is:

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，但我想这与问题无关.

If I remove './client/**/*.js', from the files array, the tests work, but then the coverage only show me the tests code. I use Karma from gulp with gulp-karma, but I suppose that this doesn't have anything to do with the problem.

推荐答案

您要介绍的代码正在尝试将组件呈现为DOM节点.您的代码依赖于它已经存在(在index.html中的某个位置).但是PhantomJS无法找到该DOM节点. 您应该在调用ReactDOM.render之前创建它，或者搜索如何更改phantom用于运行测试的html页面的模板(有插件在此运行).

Code you are covering is trying to render component into DOM node. Your code relys that it already exists (somewhere in index.html or whatever). But PhantomJS cannot find that DOM node. You should create it before calling ReactDOM.render or search how to change template of html page used by phantom to run tests (there are plugins doung this).

这篇关于业力覆盖和Babel + Browserify预处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！