Running Mocha + Istanbul + Babel

问题:

I'm having some issues while running istanbul with mocha and the babel compiler..

all my tests are runnning just fine, but after all the tests done it shows me this message:

No coverage information was collected, exit without writing coverage information

And it is not producing any coverage report..

The command that Im running is:

NODE_ENV=test istanbul cover _mocha -- --require babel-core/register --recursive

the project is hosted in github: https://github.com/weslleyaraujo/react-flux-puzzle/tree/feat/unit-tests-24

any ideas what it could be?

回答1:

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.

回答2:

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

回答3:

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 ./c
   coverage/lcov.info | coveralls
   

And now you can put that cool badge to your README. Neato!