如何覆盖伊斯坦布尔的 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/

I'm trying to integrate my existing test processes to now include React, but am struggling on the code coverage part. I've been able to get my unit tests working fine by following this project/tutorial - https://github.com/danvk/mocha-react - http://www.hammerlab.org/2015/02/14/testing-react-web-apps-with-mocha/

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

I've been using Istanbul to cover my node code and it's working pretty well. However, I'm having trouble getting it to cover the jsx files that I'm using in my tests.

这是一个现有伊斯坦布尔任务的示例，它在 vanilla js(节点后端代码)上也可以正常运行

Here's an example of an existing Istanbul task, which also runs fine on vanilla js (node backend code)

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，以便伊斯坦布尔可以使用它，但我'不确定它是否有效.它没有以某种方式被覆盖，我不确定问题出在哪里.

My issue ( i think ) is I can't get Istanbul to recognize the jsx files or they're not being compared to what was run in the tests. I tried using the gulp-react module to precompile the jsx to js so it can be used by Istanbul, but I'm not sure if it's working. It's not being covered somehow and I'm not sure where the issue is.

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 项目中的任何线索?

Any ideas what I'm doing wrong? Or any clue on how to integrate a test runner (preferably Istanbul) into a Gulp-Mocha-React project?

推荐答案

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

There is a library you can take a look at, gulp-jsx-coverage (https://github.com/zordius/gulp-jsx-coverage).

这篇关于如何覆盖伊斯坦布尔的 React jsx 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！