Как покрыть файлы React jsx в Стамбуле?

Я пытаюсь интегрировать свои существующие тестовые процессы, чтобы теперь включить React, но я борюсь с частью покрытия кода. Я смог проверить, что мои модульные тесты работают нормально, следуя этому проекту/учебнику - https://github.com/danvk/mocha-react - http://www.hammerlab.org/2015/02/14/testing-react-web-apps-with-mocha/

Я использую Стамбул для покрытия моего кода node, и он работает очень хорошо. Тем не менее, у меня возникли проблемы с тем, чтобы он закрывал файлы jsx, которые я использую в своих тестах.

Вот пример существующей задачи в Стамбуле, которая также отлично работает на ванильном 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 -реативный модуль, чтобы предварительно скомпилировать 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?

Ответ 1

Существует библиотека, на которую вы можете взглянуть, gulp -jsx-coverage (https://github.com/zordius/gulp-jsx-coverage).

Ответ 2

Добавьте файл .istanbul.yml в свой корневой каталог приложения и добавьте .jsx в расширение "extension"...

Вот что я сделал.

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

Чтобы запустить kickstart istanbul и mocha с помощью jsx

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

Это преобразует ваши .jsx файлы в .js, а затем istanbul покроет их.

Надеюсь, это поможет. Это сработало для меня.

Ответ 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

Ответ 4

Большой учебник можно найти на 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
}