How to enable Istanbul code coverage for the mocha plugin?

[factoidforrest]

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

[oimou]

I don't know it is an expected answer, but it worked for me by following that mocha-webpack guide and adding the loader to vue.config.js.

You can check whether the rule is successfully added with vue inspect --mode test module.rules:

...
  {
    test: /\.(js|ts)$/,
    include: '/Users/yahatakeiji/work/d3ledger/back-office/src',
    loader: 'istanbul-instrumenter-loader',
    query: {
      esModules: true
    }
  }
...

Also, I changed test:unit script to use nyc as below:

-    "test:unit": "vue-cli-service test:unit",
+    "test:unit": "nyc --reporter=lcov --reporter=text vue-cli-service test:unit",

[factoidforrest]

Me too! I feel that coverage should be part of vue-cli. I can look at how challenging this would be to add in a PR

[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.

[yusufkaracin]

@caugner

Hi,

I followed your steps but something gone wrong. I'm getting Unable to lookup source: error. src/components showed twice in paths so i couldn't preview coverage report.

What is your istanbul-instrumenter-loader version and babel-plugin-istanbul version?

Also, my package.json

{
  "name": "tempus",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "nyc vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "bulma": "^0.7.1",
    "bulma-timeline": "^3.0.0",
    "register-service-worker": "^1.0.0",
    "vue": "^2.5.16",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-rc.9",
    "@vue/cli-plugin-e2e-nightwatch": "^3.0.0-rc.9",
    "@vue/cli-plugin-eslint": "^3.0.0-rc.9",
    "@vue/cli-plugin-pwa": "^3.0.0-rc.9",
    "@vue/cli-plugin-unit-mocha": "^3.0.0-rc.9",
    "@vue/cli-service": "^3.0.0-rc.9",
    "@vue/eslint-config-airbnb": "^3.0.0-rc.9",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-plugin-istanbul": "^4.1.6",
    "chai": "^4.1.2",
    "istanbul-instrumenter-loader": "^3.0.1",
    "node-sass": "^4.9.0",
    "nyc": "^12.0.2",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.5.16"
  },
  "nyc": {
    "check-coverage": true,
    "per-file": true,
    "lines": 90,
    "statements": 90,
    "functions": 90,
    "branches": 90,
    "include": [
      "src/**/*.{js,vue}"
    ],
    "exclude": [
      "src/*.js"
    ],
    "reporter": [
      "lcov",
      "text-summary"
    ],
    "extension": [
      ".js"
    ],
    "cache": true,
    "all": true
  }
}

And my vue.config.js

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

[janbalaz]

@caugner thanks, your solution works for me if I use this as babel.config.js:

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    'babel-plugin-istanbul'
  ]
}

[Gabsha]

Thanks @caugner , That solution worked for me as well.
I ran across the same issue as @yusufkaracin and setting config.devtool('eval') in my vue.config.js , just above config.module seems to have fixed the source-mapping for vue components.

I got that from this issue.

[phmngocnghia]

@caugner can you make example repository on github ? i can't make it work. Very frustrated. I can't find where vue.config.js locate in. Should have use Jest for testing instead of waste time configure this.

[akrawchyk]

I know that coverage is included in Jest by default, should we generate the coverage configuration described above when creating a new Vue app with the Mocha+Chai test options?

[lionel-bijaoui]

I have updated to vue-cli 3.0.4 and nothing is working.
@caugner Do you still have a working setup ?

[janholas]

Does anyone have a working example project for test coverage for vue-cli 3.0.x with vue-cli-mocha-plugin? There are very little examples and the snippets we found do not work.

[leoyli]

In later version of webpack (shipped in vue-cli) the include.add('src') will resulted in errors, here is my work around:

    const path = require('path')

    if (process.env.NODE_ENV !== 'production') {
      config.devtool('eval')
      config.module
        .rule('istanbul')
          .test(/\.(js|vue)$/)
          .enforce('post')
          .include
            .add(path.resolve(__dirname, '/src'))
            .end()
          .use('istanbul-instrumenter-loader')
            .loader('istanbul-instrumenter-loader')
            .options({ esModules: true })
    }