Running Mocha + Istanbul + Babel
Using Babel 6.x, let's say we have file test/pad.spec.js
:
import pad from '../src/assets/js/helpers/pad';import assert from 'assert';describe('pad', () => { it('should pad a string', () => { assert.equal(pad('foo', 4), '0foo'); });});
Install a bunch of crap:
$ npm install babel-istanbul babel-cli babel-preset-es2015 mocha
Create a .babelrc
:
{ "presets": ["es2015"]}
Run the tests:
$ node_modules/.bin/babel-node node_modules/.bin/babel-istanbul cover \ node_modules/.bin/_mocha -- test/pad.spec.js pad ✓ should pad a string 1 passing (8ms)=============================================================================Writing coverage object [/Volumes/alien/projects/forked/react-flux-puzzle/coverage/coverage.json]Writing coverage reports at [/Volumes/alien/projects/forked/react-flux-puzzle/coverage]============================================================================================================ Coverage summary ===============================Statements : 100% ( 4/4 )Branches : 66.67% ( 4/6 ), 1 ignoredFunctions : 100% ( 1/1 )Lines : 100% ( 3/3 )================================================================================
UPDATE: I've had success using nyc
(which consumes istanbul
) instead of istanbul
/babel-istanbul
. This is somewhat less complicated. To try it:
Install stuff (you can remove babel-istanbul
and babel-cli
):
$ npm install babel-core babel-preset-es2015 mocha nyc
Create .babelrc
as above.
Execute this:
$ node_modules/.bin/nyc --require babel-core/register node_modules/.bin/mocha \ test/pad.spec.js
...which should give you similar results. By default, it puts coverage info into .nyc-output/
, and prints a nice text summary in the console.
Note: You can remove node_modules/.bin/
from any of these commands when placing the command in package.json
's scripts
field.
PS: I now recommend to use single jest instead of mocha/instanbul/nyc/chai/etc.
Solution A: Using nyc and babel-plugin-istanbul
Setup (don't forget :@next
for nyc
)
npm install --save-dev nyc babel-plugin-istanbul babel-register
Add an env to babel
config:
{ "env": { "nyc": { "plugins": ["istanbul"] } }}
nyc
config:
{ "reporter" : ["text", "text-summary", "lcov", "html"], "include" : ["src/**/*.js"], "require" : ["babel-register"], "sourceMap" : false, "instrument" : false, "all" : true}
PS: include
field needs to be specified in .nycrc
of in package.json
, if specified in command line, coverage will not works
Running the tests:
# 1. BuildNODE_ENV=nyc babel src --out-dir lib# 2. Coveragenyc mocha
Solution B: No extra packages : Only the basic ones
Work has been done recently on istanbul (1.0.0-alpha.2) to support Babel generated code with sourcemaps (see #212 and this for an example).
There are 2 ways:
- A. Tests written against previously transpiled code
- B. Tests written against original code and transpiled all together in memory at runtime
B1. Tests that exports (previously) transpiled code
This is done in 2 steps: Firstly, build your source with babel (e.g. from ./src to ./out) and write your tests against transpiled source (export foo from "./out/foo";
).
Then you will be able to run the tests using istanbul 1.0.0-alpha.2 :
istanbul cover _mocha -- ./test --compilers js:babel-register
Now if you want code coverage to follow the original code you've written (not the transpiled one), make sure to build with babel source-maps options set to both :
babel ./src --out-dir ./out --source-maps both
PS: If needed you can also do :
istanbul cover _mocha -- ./test --compilers js:babel-register \ --require babel-polyfill \ --require should \ --require sinon
B2. Tests that directly exports original code
In this case you write your tests against original source (export foo from "./src/foo";
), and with no further step, you directly run istanbul 1.0.0-alpha.2 using babel-node against cli.js :
babel-node ./node_modules/istanbul/lib/cli.js cover _mocha -- ./test
PS: If needed you can also do :
babel-node ./node_modules/istanbul/lib/cli.js cover _mocha -- ./test --require babel-polyfill \ --require should \ --require sinon
As of now 17.4.2016 this coverage reporting stuff is still a bit messy and with my React-project that has .jsx files and a helper file the coverage reporting script looks like this:
istanbul cover node_modules/mocha/bin/_mocha -- \ --compilers js:babel-core/register \ --require ./test/testhelper.js \ \"test/**/*@(.js|.jsx)\"
So it wouldn't be too easy the current version 0.4.3 of Istanbul doesn't work with Babel so you have to use the experimental alpha-version:
npm install istanbul@1.0.0-alpha.2 --save-dev
And then you need .istanbul.yml
-file so that Istanbul recognizes the .jsx-files with these lines:
instrumentation: root: . extensions: ['.js', '.jsx']
And now it should work. Also as a small bonus if you want to add coverage reporting with Travis and Coveralls you should:
- enable the project in https://coveralls.io
- add coveralls
npm i coveralls --save-dev
add this to your
.travis.yml
:script: - npm --silent test - cat ./ccoverage/lcov.info | coveralls
And now you can put that cool badge to your README. Neato!