Search code examples
vue.jsvuejs2mocha.jsistanbulvue-test-utils

.vue file not found in the coverage with istanbul, mocha and vue-test-utils in vuejs


I test my VueJS app with vue-test-utils. I would like to have a coverage. I use Istanbul to can have this coverage. All .js files are displayed in the coverage, but no .vue file.

EDIT: @Vue/cli v.4.5.4 and the Vue v.2.6.12

my nyc.config.js file

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

my babel.config.js file

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

my package.json file

"scripts": {
    ...
    "test:unit": "vue-cli-service test:unit",
    "test:unit:coverage": "nyc vue-cli-service test:unit",
    ...
  }

Solution

  • When you test a *.vue file, the directory of this file diplayed in the corevage list.

    EDIT : or add

    module.exports = {
      chainWebpack: (config) => {
        if (process.env.NODE_ENV === 'test') {
          config.merge({
            target: 'node',
            devtool: 'eval'
        }
      },
    }
    

    in your vue.config.js

    source : https://github.com/vuejs/vue-test-utils-mocha-webpack-example/issues/3