Come coprire i file React jsx a Istanbul?

Question

Sto cercando di integrare i miei processi di test esistenti per includere ora React, ma sto lottando sulla parte di copertura del codice. Sono stato in grado di far funzionare i miei test unitari seguendo questo progetto/tutorial - https://github.com/danvk/mocha-react - http://www.hammerlab.org/2015/02/14/testing-react-web-apps-with-mocha/

Ho utilizzato Istanbul per coprire il mio codice nodo e funziona piuttosto bene. Tuttavia, ho difficoltà a farlo per coprire i file jsx che sto usando nei miei test.

Ecco un esempio di un compito di Istanbul esistente, che funziona anche bene su js vaniglia (nodo codice backend)

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

Il mio problema (credo) è che non riesco a Istanbul per riconoscere i file JSX o non vengono confrontati con ciò che è stato eseguito nei test. Ho provato a utilizzare lo gulp-react module per precompilare jsx a js in modo che possa essere utilizzato da Istanbul, ma non sono sicuro che funzioni. Non è coperto in qualche modo e non sono sicuro di quale sia il problema.

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

Qualche idea su cosa sto facendo male? O qualche indizio su come integrare un corridore di prova (preferibilmente Istanbul) in un progetto Gulp-Mocha-React?

Answer 1

C'è una libreria che puoi dare un'occhiata a, gulp-jsx-coverage (https://github.com/zordius/gulp-jsx-coverage).

Answer 2

aggiungere un file .istanbul.yml alla radice app e aggiungere .jsx ad estensioni "estensione" ...

Ecco quello che ho fatto.

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

Per Kickstart Istanbul e moka con JSX

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

Questo permette di convertire i file .jsx a .js e poi Istanbul li coprirà.

Spero che questo aiuti. Ha funzionato per me.

Answer 3

Nel caso in cui qualcun altro sta avendo lo stesso problema e le soluzioni di cui sopra non funzionano, ho trovato che l'aggiunta di un tag semplice "-e .jsx" ha funzionato:

"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" 
} 

Questa soluzione è stata trovata a: http://www.2devs1stack.com/react/tape/testing/nyc/coverage/2016/03/05/simple-code-coverage-with-nyc.html

Answer 4

un tutorial può essere trovato alla https://istanbul.js.org/docs/tutorials/es2015/

ho solo leggermente modificato per includere reagire. (Ho anche usato 'env' invece di 'es2015', ma o dovrebbe funzionare.) Ecco le mie configurazioni:

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 
}