如何在伊斯坦布尔覆盖 React jsx 文件?
How to cover React jsx files in Istanbul?
我正在尝试集成我现有的测试流程以包括 React,但我在代码覆盖率部分苦苦挣扎。通过遵循此 project/tutorial - https://github.com/danvk/mocha-react - http://www.hammerlab.org/2015/02/14/testing-react-web-apps-with-mocha/
,我已经能够让我的单元测试正常工作
我一直在使用 Istanbul 来覆盖我的节点代码,它运行良好。但是,我无法让它覆盖我在测试中使用的 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);
我的问题(我认为)是我无法让伊斯坦布尔识别 jsx 文件,或者它们没有与测试中 运行 的文件进行比较。我尝试使用 gulp-react module 将 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);
});
;
});
知道我做错了什么吗?或者关于如何将测试 运行ner(最好是伊斯坦布尔)集成到 Gulp-Mocha-React 项目中的任何线索?
有一个库你可以看看,gulp-jsx-coverage (https://github.com/zordius/gulp-jsx-coverage)。
将 .istanbul.yml 文件添加到您的应用根目录并将 .jsx 添加到扩展 "extension"...
这是我做的。
// File .istanbul.yml
instrumentation:
root: .
extensions: ['.js', '.jsx']
使用 jsx 启动 istanbul 和 mocha
$ istanbul test _mocha -- test/**/* --recursive --compilers js:babel/register
这会将您的 .jsx 文件转换为 .js,然后伊斯坦布尔将覆盖它们。
希望对您有所帮助。它对我有用。
如果其他人遇到同样的问题而上述解决方案不起作用,我发现添加一个简单的“-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"
}
可以在 https://istanbul.js.org/docs/tutorials/es2015/
找到很棒的教程
我只是稍微修改了它以包含反应。 (我也使用 '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
}
我正在尝试集成我现有的测试流程以包括 React,但我在代码覆盖率部分苦苦挣扎。通过遵循此 project/tutorial - https://github.com/danvk/mocha-react - http://www.hammerlab.org/2015/02/14/testing-react-web-apps-with-mocha/
,我已经能够让我的单元测试正常工作我一直在使用 Istanbul 来覆盖我的节点代码,它运行良好。但是,我无法让它覆盖我在测试中使用的 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);
我的问题(我认为)是我无法让伊斯坦布尔识别 jsx 文件,或者它们没有与测试中 运行 的文件进行比较。我尝试使用 gulp-react module 将 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);
});
;
});
知道我做错了什么吗?或者关于如何将测试 运行ner(最好是伊斯坦布尔)集成到 Gulp-Mocha-React 项目中的任何线索?
有一个库你可以看看,gulp-jsx-coverage (https://github.com/zordius/gulp-jsx-coverage)。
将 .istanbul.yml 文件添加到您的应用根目录并将 .jsx 添加到扩展 "extension"...
这是我做的。
// File .istanbul.yml
instrumentation:
root: .
extensions: ['.js', '.jsx']
使用 jsx 启动 istanbul 和 mocha
$ istanbul test _mocha -- test/**/* --recursive --compilers js:babel/register
这会将您的 .jsx 文件转换为 .js,然后伊斯坦布尔将覆盖它们。
希望对您有所帮助。它对我有用。
如果其他人遇到同样的问题而上述解决方案不起作用,我发现添加一个简单的“-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"
}
可以在 https://istanbul.js.org/docs/tutorials/es2015/
找到很棒的教程我只是稍微修改了它以包含反应。 (我也使用 '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
}