Vue-test-utils: How to do code coverage ?

[lionel-bijaoui]

Hello,

I have followed the guide to use vue-test-utils with mocha.
It work great, no problem.

Then I wanted to add code coverage, since my initial config (based on the official vue+webpack template) came with it.
But I can't seem to make it work. I have followed mocha-webpack guide on code coverage and it doesn't work.

Can you add an example of code coverage in the official example ?

Thanks a lot for your hard work !

[eddyerburgh]

Hi @lionel-bijaoui

I agree, it would be nice to add these to the docs 😀

[zhouweicsu]

Vue-test-utils with jest also need an official example 😀

[bdeo]

@zhouweicsu What kind of example are you interested in? Project structure? package.json jest config?

[robcresswell]

I can document the process with Jest if you like; I've got a running setup locally. Would that help, @eddyerburgh ?

[robcresswell]

I've opened a PR for this repo; I'll add similar code to the example repo too, and link here when it's done.

[robcresswell]

^^ As promised, similar code in the vue-test-utils-jest-example repo. Please comment and review, and enjoy the holidays! 🎅

[eddyerburgh]

I'm reopening, because we still need to add docs on code coverage with mocha-webpack

[robcresswell]

I won't be able to pick that part up; I've no experience with Mocha, I'm afraid, and I'm sure there are others better positioned to explain it's usage.

[eddyerburgh]

I think we could just add a link to the mocha-webpack docs—https://github.com/zinserjan/mocha-webpack/blob/master/docs/guides/code-coverage.md, I'll make a PR

[eddyerburgh]

We've added code coverage to the official repo, thanks @38elements 🙂

[jpenna]

The mocha-webpack docs are not clear on how to use it with vue-cli. It has a webpack.config-test.js, but we have to set it up using vue.config.js. I tried the following below, but didn't work.

I am getting all sorts of errors, depending on the configuration of nyc, the loader.. Would be nice to have a adaptation on how to do it with vue-cli.

// vue.config.js

const path = require('path');

const publicPath = process.env.BASE_URL;
const isCoverage = process.env.NODE_ENV === 'coverage';

module.exports = {
  lintOnSave: false,
  publicPath,
  configureWebpack: {
    devServer: {
      port: process.env.PORT || 23045,
      // To accept requests from Docker Apache proxy
      disableHostCheck: true,
      publicPath,
    },

    resolve: {
      alias: {
        '#': path.resolve(__dirname, 'tests/unit'),
      },
    },

    module: {
      rules: [].concat(
        isCoverage ? {
          test: /\.(js)/,
          include: path.resolve('src'), // instrument only testing sources with Istanbul, after ts-loader runs
          loader: 'istanbul-instrumenter-loader',
          query: {
            esModules: true,
          },
          enforce: 'pre',
        } : [],
      ),
    },
  },
};

// .nycrc
{
    "include": [
      "src/**/*.js"
    ],
    "instrument": false,
    "sourceMap": false 
}

// package.json
"scripts": {
     ....
    "test:unit": "vue-cli-service test:unit",
    "cover": "NODE_ENV=coverage nyc --reporter=lcov --reporter=text npm run test:unit"
},

[jpenna]

There is also this question on Stack Overflow: https://stackoverflow.com/questions/53782097/generating-nyc-coverage-report-for-vuejs-project-with-vue-cli-plugin-unit-mocha

Basically the same issue.

[roopen219]

I followed the mocha-webpack docs and used chainWebpack in vue.config.js to add the webpack related stuff, rest is same as the docs. I have only done this for JS files, but I think it should be similar for vue files as well.

// vue.config.js

chainWebpack: config => {
    if (process.env.TEST_COVERAGE === 'true') {
      config.module
        .rule('js')
        .use('istanbul-instrumenter-loader')
        .loader('istanbul-instrumenter-loader')
        .options({
          esModules: true
        })
        .after('babel-loader');
    }
  },

// package.json

"nyc": {
    "instrument": false,
    "sourceMap": false
},
"scripts": {
    "test:unit": "vue-cli-service test:unit",
    "cover": "TEST_COVERAGE=true nyc yarn test:unit"
}

[fatfingers23]

I've had so much trouble with trying to get this to work for me with using mocha. I decide to do one last search and found @roopen219 answer and added the items below to my package.json under nyc section. I added include and extension and it finally worked for me. Thank you!.

//package.json 

  "nyc": {
    "instrument": false,
    "sourceMap": false,
    "include": [
      "src/**/*.{js,vue}"
    ],
    "extension": [
      ".js",
      ".vue"
    ]
  }