All geek questions in one place

JSX Test Coverage in Istanbul

I am trying to tweak my code to get coverage and run it, but something slips through my fingers.

I run istanbul with:

 node_modules/.bin/istanbul cover ./node_modules/mocha/bin/_mocha -- -u exports -R spec

And my mocha.opts looks like this:

 app/assets/javascripts/components/**/*-mocha.jsx --compilers jsx:mocha/compiler.js

Everything seems to work fine (the tests run at least), but the only scope I get is for the files used to compile JSX for JavaScript (used in compiler.js

 compiler.js 100% jsx-stub-transform.js 65%

Awfully helpful ...

Any ideas?

+6
source share
2 answers

I am using gulp-jsx-coverage .

Here is my example:

 var jsxCoverage = require('gulp-jsx-coverage'); gulp.task('test', ['lint', 'env:test'], jsxCoverage.createTask({ src: ['src/**/*_test.js', 'src/**/*_test.jsx'], // will pass to gulp.src as mocha tests istanbul: { // will pass to istanbul coverageVariable: '__MY_TEST_COVERAGE__', exclude: /node_modules|tests|._test/ // do not instrument these files }, transpile: { // this is default whitelist/blacklist for transpilers babel: { include: /\.jsx?$/, exclude: /node_modules/ } }, coverage: { reporters: ['text', 'lcov', 'cobertura'], // list of istanbul reporters directory: 'coverage' // will pass to istanbul reporters }, mocha: { // will pass to mocha reporter: 'spec' }, babel: { // will pass to babel sourceMap: 'inline', // get hints in HTML coverage reports plugins: [] } }));

* UPDATE *

Over time, I decided to stop using gulp-jsx-coverage . My tests use babel-rewire-plugin , and gulp-jsx-coverage did not process my files correctly, resulting in a coverage report that included a bunch of unverified generated code. No buoy.

See my second answer for my current setup.

+2
source

I use mocha and isparta directly with Babel 6 as follows:

npm test command

 BABEL_ENV=test babel-node node_modules/isparta/bin/isparta cover _mocha

.babelrc

 { "plugins": [ "add-module-exports", "transform-decorators-legacy", "transform-runtime" ], "presets": [ "es2015", "react", "stage-0" ], "env": { "test": { "plugins": [ "rewire" ] } } }

test/mocha.opts

 --compilers js:babel-core/register --require test/init.js src/**/*_test.js*

test.init.js

 'use strict'; require('mock-require')('clappr'); require('testdom')('<html><body></body></html>', { React: 'react', localStorage: 'localStorage' });

.istanbul.yml

 instrumentation: root: src excludes: ['*_test.js']

select package.json dependencies

 "babel-cli": "^6.7.5", "babel-core": "^6.7.2", "babel-eslint": "^5.0.0", "babel-loader": "^6.2.4", "babel-plugin-add-module-exports": "^0.1.2", "babel-plugin-rewire": "^1.0.0-rc-2", "babel-plugin-runtime": "^1.0.7", "babel-plugin-syntax-jsx": "^6.5.0", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-runtime": "^6.6.0", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0", "babel-register": "^6.7.2", "babel-runtime": "^5.8.34", "babel-template": "^6.7.0", "babel-types": "^6.7.2", "isparta": "^4.0.0", "mocha": "^2.4.5",

Note on .JSX files

I renamed all my .JSX files to .JS, and here's why:

  • I use codecov to report on hosted coverages. This showed that while coverage/lcov-report/index.html shows the correct coverage, there is no .JSX file in the JSON coverage files. I could never figure it out. As far as I can tell, this is a mistake in isparta or istanbul. I also tried istanbul@1.0.0-alpha.2 and found that it has the same problem.
  • React is used to recommend naming .JSX files in the interest of using transformations and editors. This is no longer a recommendation. As far as I can tell, that no longer matters.

Since switching to .JS, I have not seen any problems with tools, including Atom and IntelliJ.

If you don't want to rename your files, you can add the following to my examples above:

  • In the script, after isparta cover , add --include \"src/**/*_test.jsx\" .
  • In .istanbul.yml add
 extensions: - .js - .jsx
+2
source

Source: https://habr.com/ru/post/987410/

More articles:


All Articles