How to enable Istanbul code coverage for the mocha plugin?

What problem does this feature solve?

Coverage reporting for unit tests

What does the proposed API look like?

Is there a way to enable coverage for the mocha plugin? When set up manually on another project, you add the istanbul coverage instrumenter as a webpack loader like this:

webpackConfig.module.rules.unshift({
  test: /\.(js)$/,
  loader:  `istanbul-instrumenter-loader`,
  options: {esModules:true},
  exclude: [
    path.resolve(`node_modules`),
    // Exclude tests from test coverage
    path.resolve(`src/tests`),
    /\.(spec|e2e|tests)\.ts$/,
  ]
})

And then you need to add lcov as a reporter.

This explanation is pretty comprehensive: https://github.com/zinserjan/mocha-webpack/blob/master/docs/guides/code-coverage.md

[caugner]

Here’s how I made test coverage work for both apollo-server and src directory:

UPDATE: This comment is outdated, please check out @stephsavoie’s solution below.

[1/4] Install babel-plugin-istanbul + configure it in babel.config.js

yarn add --dev babel-plugin-instanbul
# or
npm install --save-dev babel-plugin-istanbul

// babel.config.js
module.exports = {
  presets: ["@vue/app"],
  plugins: ["istanbul"]
};

[2/4] Install istanbul-instrumenter-loader + configure it in vue.config.js

yarn add --dev istanbul-instrumenter-loader
# or
npm install --save-dev istanbul-instrumenter-loader

// vue.config.js
// ...
  chainWebpack: config => {
    if (process.env.NODE_ENV !== "production") {
      config.module
        .rule("istanbul")
        .test(/\.(js|vue)$/)
        .enforce("post")
        .include.add("apollo-server")
        .add("src")
        .end()
        .use("istanbul-instrumenter-loader")
        .loader("istanbul-instrumenter-loader")
        .options({ esModules: true })
        .end();
    }
// ...

[3/4]: Install nyc + configure it in package.json

yarn add --dev nyc
# or
npm install --save-dev nyc

// package.json
// ...
  "nyc": {
    "check-coverage": true,
    "per-file": true,
    "lines": 90,
    "statements": 90,
    "functions": 90,
    "branches": 90,
    "include": [
      "apollo-server/**/*.js",
      "src/**/*.{js,vue}"
    ],
    "exclude": [
      "apollo-server/*.js",
      "src/*.js",
    ],
    "reporter": [
      "lcov",
      "text",
      "text-summary"
    ],
    "extension": [
      ".js"
    ],
    "cache": true,
    "all": true
  }

[4/4]: Use it

• Single-run: nyc vue-cli-service test:unit
• Watched run: nodemon --exec nyc vue-cli-service test:unit

PS: I also recommend adding coverage and .nyc_output to your .gitignore.

[stephsavoie]

Based on @caugner 's answer, I made it work in a simpler way (by skipping the step 2 and enhanced a bit the nyc configuration in package.json) I’m using Vue CLI-3 with Mocha-webpack as my tests runner.

Here’s my current configuration:

[1/3] Install babel-plugin-istanbul + configure it in babel.config.js

npm install --save-dev babel-plugin-istanbul

// babel.config.js
module.exports = {
  presets: [
    '@vue/app'
  ],
  env: {
    test: {
      plugins: [
        ['istanbul', {
          useInlineSourceMaps: false
        }]
      ]
    }
  }
};

[2/3]: Install nyc + configure it in nyc.config.js

npm install nyc --save-dev

// nyc.config.js
module.exports = {
  'check-coverage': false,
  'per-file': true,
  'skip-full': true,
  all: true,
  include: [
    'src/**/*.{js,vue}'
  ],
  exclude: [
    'src/*.js',
    '**/index.js'
  ],
  reporter: [
    'lcov',
    'text',
    'text-summary'
  ],
  extension: [
    '.js',
    '.vue'
  ]
};

[3/3] Use it

nyc vue-cli-service test:unit --require tests/setup.js

No more errors or anything else. I’m not sure if I am missing something but at first sight, coverage report seems to represent the reality of tests scenarios I’ve created so far.

EDIT: Updated configuration to fix wrong .vue file paths in the coverage report and enhance it to my personal taste