如何覆盖在伊斯坦布尔的jsx文件反应？

Question

我正在尝试将我现有的测试过程集成到现在包含React，但是在代码覆盖部分上还在挣扎。通过遵循这个项目/教程- https://github.com/danvk/mocha-react - http://www.hammerlab.org/2015/02/14/testing-react-web-apps-with-mocha/，我已经能够让我的单元测试正常工作。

我一直在使用伊斯坦布尔来覆盖我的节点代码，它运行得很好。但是，我很难让它覆盖我在测试中使用的jsx文件。

下面是一个现有伊斯坦布尔任务的示例，它在vanilla (节点后端代码)上也运行良好。

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);
 });
 ;
});

知道我做错什么了吗？或者是关于如何将测试跑步者(最好是伊斯坦布尔)集成到Gulp反应项目中的任何线索？

Answer 1

有一个库，你可以看看，gulp覆盖率(https://github.com/zordius/gulp-jsx-coverage)。

Answer 2

将.istanbul.yml文件添加到应用程序根目录中，并将.jsx添加到扩展名“extension”.

这就是我所做的。

// File .istanbul.yml
instrumentation:
    root: .
    extensions: ['.js', '.jsx']

用jsx启动伊斯坦布尔和摩卡

$ istanbul test _mocha -- test/**/* --recursive --compilers js:babel/register

这将将您的.jsx文件转换为.js，然后伊斯坦布尔将覆盖它们。

我希望这能帮到你。对我起作用了。

Answer 3

如果其他人有相同的问题，而上面的解决方案不起作用，我发现添加一个简单的"-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找到的。