如何覆盖伊斯坦布尔的React jsx文件
How to cover React jsx files in Istanbul?
我正在尝试集成我现有的测试流程,以现在包括React,但在代码覆盖率方面遇到了困难。通过遵循这个项目/教程,我已经能够让我的单元测试正常工作https://github.com/danvk/mocha-react-http://www.hammerlab.org/2015/02/14/testing-react-web-apps-with-mocha/
我一直在使用伊斯坦布尔来覆盖我的节点代码,它运行得很好。然而,我很难让它覆盖我在测试中使用的jsx文件。
下面是一个现有Istanbul任务的例子,它在vanilla-js(节点后端代码)上也运行良好
var mocha = require('gulp-mocha');
var istanbul = require('gulp-istanbul');
gulp.task('test-api', function (cb) {
gulp.src(['api/**/*.js'])
.pipe(istanbul()) // Covering files
.pipe(istanbul.hookRequire()) // Force `require` to return covered files
.on('finish', function () {
gulp.src(['test/api/*.js'])
.pipe(mocha())
.pipe(istanbul.writeReports()) // Creating the reports after tests runned
.on('end', cb);
我的问题(我想)是我无法让Istanbul识别jsx文件,或者它们没有与测试中运行的文件进行比较。我尝试使用gulp-rect模块将jsx预编译为js,以便伊斯坦布尔可以使用它,但我不确定它是否有效。不知怎么的,它没有被覆盖,我不确定问题在哪里。
var mocha = require('gulp-mocha');
var istanbul = require('gulp-istanbul');
var react = require('gulp-react');
gulp.task('test-site-example', function (cb) {
gulp.src(["site/jsx/*.jsx"]) //Nothing is being reported by Istanbul (not being picked up)
.pipe(react()) //converts the jsx to js and I think pipes the output to Istanbul
.pipe(istanbul())
.pipe(istanbul.hookRequire()) // Force `require` to return covered files
.on('finish', function () {
gulp.src(['test/site/jsx/*.js'], { //tests run fine in mocha, but nothing being shown as reported by mocha (not covered)
read: false
})
.pipe(mocha({
reporter: 'spec'
}))
.pipe(istanbul.writeReports())
.on('end', cb);
});
;
});
你知道我做错了什么吗?或者关于如何将一名测试选手(最好是伊斯坦布尔)融入Gulp Mocha React项目的任何线索?
将.istanbul.yml文件添加到应用程序根目录,并将.jsx添加到扩展名"extension"。。。
以下是我所做的。
// File .istanbul.yml
instrumentation:
root: .
extensions: ['.js', '.jsx']
用jsx 启动伊斯坦布尔和摩卡
$ istanbul test _mocha -- test/**/* --recursive --compilers js:babel/register
这将把.jsx文件转换为.js,然后istanbul将覆盖它们。
我希望这能有所帮助。它对我有效。
有一个库,你可以看看,gulp-jsxcoverage(https://github.com/zordius/gulp-jsx-coverage)。
如果其他人也有同样的问题,并且上面的解决方案不起作用,我发现添加一个简单的"-e.jsx"标签有效:
"scripts": {
"start": "meteor run",
"test": "NODE_ENV=test mocha --recursive --compilers js:babel-register --require tests/index.js ./tests/**/*.test.js",
"coverage": "NODE_ENV=test nyc -all -e .jsx npm test"
}
此解决方案位于:http://www.2devs1stack.com/react/tape/testing/nyc/coverage/2016/03/05/simple-code-coverage-with-nyc.html
可以在https://istanbul.js.org/docs/tutorials/es2015/
我只是稍微修改了一下,包括react。(我也使用了"env"而不是"es2015",但两者都应该有效。)以下是我的配置:
npm i babel-cli babel-register babel-plugin-istanbul babel-preset-env babel-preset-react cross-env mocha nyc --save-dev
.babelrc
{
"presets": ["env", "react"],
"env": {
"test": {
"plugins": [
"istanbul"
]
}
}
}
package.json
"scripts": {
"test": "cross-env NODE_ENV=test nyc mocha test/**/*.spec.js --compilers js:babel-register"
}
"nyc": {
"require": [
"babel-register"
],
"reporter": [
"lcov",
"text"
],
"sourceMap": false,
"instrument": false
}
- 如何使用KARMA对React JSX ES6代码进行单元测试
- Webpack:如何将原始HTML加载为React JSX
- {React jsx babel es6 webpack}如何在渲染中进行注释(return(//||/**/))
- 在 React JSX 中有条件地呈现组件部分
- 如何覆盖伊斯坦布尔的React jsx文件
- React/JSX动态组件名称
- 如何在React JSX中处理长类名
- 单元测试 React JSX ES6.
- Babel 6 react JSX transformer - disable strict
- React JSX 编辑风格
- 如何在 React/JSX 中手动创建的数组中设置密钥
- React JSX 中的自定义 HTML 元素标记
- React/JSX Scope
- 如何在 Vim 中添加 React JSX 作为 JavaScript 文件类型并启用 eslinting、自动完成
- 如何将react JSX文件转换为简单的JavaScript文件[离线转换]
- 将脚本标签添加到 React/JSX
- 在通过react JSX函数呈现页面之前运行javascript
- React JSX compiling
- 将CSS与React/JSX结合使用
- React JSX 中的动态标记名称