如何在伊斯坦布尔报道React jsx文件？

Question

我正在尝试将现有的测试流程集成到现在包含React,但我正在努力解决代码覆盖问题.通过以下项目/教程,我已经能够使我的单元测试工作正常 - https://github.com/danvk/mocha-react - http://www.hammerlab.org/2015/02/14/testing -react-Web的应用程序与-摩卡/

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

这是一个现有的伊斯坦布尔任务的例子,它也可以在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模块将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项目中的任何线索？

Answer 1

将.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将覆盖它们.

我希望这有帮助.它对我有用.

Answer 2

您可以查看一个库，gulp-jsx-coverage ( https://github.com/zordius/gulp-jsx-coverage )。