Running Mocha + Istanbul + Babel Running Mocha + Istanbul + Babel node.js node.js

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:

  1. enable the project in https://coveralls.io
  2. add coveralls npm i coveralls --save-dev
  3. 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!