15

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

我一直在使用伊斯坦布尔来覆盖我的节点代码，它运行得很好。但是，我无法让它覆盖我在测试中使用的 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 项目中的任何线索？

4

4 回答 4

7

将 .istanbul.yml 文件添加到您的应用根目录，并将 .jsx 添加到扩展“extension”...

这就是我所做的。

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

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

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

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

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

于 2015-07-23T23:28:59.370 回答
3

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

于 2015-03-12T22:36:33.477 回答
2

如果其他人遇到同样的问题并且上面的解决方案不起作用，我发现添加一个简单的“-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

于 2017-02-16T21:00:20.403 回答
1

可以在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"
      ]
    }
  }
}

包.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
}
于 2017-04-17T06:31:19.760 回答