how to run code coverage of client side javascript with npm scripts

Question

I have a client side web application written in basic javascript that should run in a modified chromium browser inside another application. The code is extensively refactored to work in the current setup and updated to use ES6 features. The old version had some browser based mocha testing using Grunt.

I now like to add the tests (and rewrite them if necessary) to the new setup and add code coverage and replace Grunt by npm scripts.

So far I managed to rewrite a number of tests and run them using:

./node_modules/babel-cli/bin/babel.js js --out-dir tmp/js --source-maps ./node_modules/babel-cli/bin/babel.js test --out-dir tmp/test --source-maps ./node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/test-spec.html spec <some options>

This gives the output of the tests. They all pass.

Now I'd like to add coverage using nyc but I have no clue how to get it to work. I found mocha-phantomjs-istanbul but this seems to use mocha-phantomjs (deprecated) and istanbul 1.x (deprecated).

What do I need to do to add code coverage to this configuration?

Answer 1

I don't have too much experience with istanbul and nyc but a while ago I managed to get a working environment togehter that looked like this: Inside my Package.json I have several scripts defined. The ones for coverage look like this:

scripts : {
    "test:c": "set NODE_ENV=test&& npm run coverage",
    "coverage": "./node_modules/.bin/nyc --reporter=lcov --reporter=text mocha test/*.* --compilers js:babel-core/register --recursive"
}

I start the test:c script which sets the NODE_ENV variable and then runs the coverage script. All the tests are inside the test directory. and the "--compilers js:babel-core/register" flag is there so the code gets directy transpiled from es6. It seems like you are already doing that via your first two scripts, so you can skip that part.

This is on windows by the way. If I remember correctly on a unix system you do set NODE_ENV directly this way "NODE_ENV=test". Also, if you do a similar setup, watch out for whitespace like this "set NODE_ENV= test && npm run another script" because this will set the NODE_ENV to "test " instead of "test" and will not therefor not use the plugins.

i use the following dependencies:

"mocha": "3.2.0",
"nyc": "^11.0.2",
"babel-plugin-istanbul": "^4.1.4",

here is also my .babelrc config:

{
  "presets": [
    ["es2015", { "modules": false }],
    "stage-0",
    "airbnb"
  ],
  "env": {
    "test": {
      "plugins": [
        ["istanbul", {
          "exclude": [
            "**/*.spec.js",
            "webpack.config.js"
          ]
        }]
      ]
    }
  }
}

the important part propbably is the configuration of the istanbul plugin which is used when the NODE_ENV is set to test. and this nyc related config is part of my package.json:

  "nyc": {
    "include": [
      "src/**/*.js"
    ],
    "exclude": [
      "shared/src/**/*.js"
    ],
    "require": [
      "babel-core/register"
    ],
    "sourceMap": false,
    "instrument": false
  },

anyway, for convenience, it might seem a good idead to write seperate scripts inside the package json and then string them together via another script calling them like this:

"script3" :   "npm run script1 && npm run script2"