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 ignored
Functions    : 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. Build
NODE_ENV=nyc babel src --out-dir lib

# 2. Coverage
nyc 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