How to make test coverage show all vue files in Vue-cli 3 using jest

Question

I am having difficulty trying to set up Vue CLI 3 with Jest to show test coverage. I have done everything possible to make it work, but it is still showing no coverage:

Ran all test suites.
----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|

=============================== Coverage summary ===============================
Statements   : Unknown% ( 0/0 )
Branches     : Unknown% ( 0/0 )
Functions    : Unknown% ( 0/0 )
Lines        : Unknown% ( 0/0 )

Below is an excerpt of my configuration:

jest.config.js:

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
  testURL: 'http://localhost/'
}

package.json:

....
"scripts": {
  "test:unit": "nyc vue-cli-service test:unit"
},
"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",
    "text-summary"
  ],
  "extension": [
    ".js",  
    ".vue"
  ],
  "verbose": true,
  "cache": true,
  "all": true
}

How do I properly configure Vue CLI 3 and Jest to show test coverage?

Answer 1

Jest has its own coverage facilities, so remove nyc from package.json:

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

To enable Jest's coverage, set collectCoverage and collectCoverageFrom in jest.config.js (per the vue-test-utils docs):

collectCoverage: true,
collectCoverageFrom: [
  'src/**/*.{js,vue}',
  '!src/main.js', // No need to cover bootstrap file
],

Running yarn test:unit should yield console output like this:

GitHub demo

Also note that the Jest console output only lists files that contain executable JavaScript (methods for Vue SFCs). If you're working off the default Vue CLI generated template, HelloWorld.vue contains no methods, so it won't be listed. In the screenshot above, I've added an unused method to HelloWorld.vue to demonstrate Jest's uncovered lines report.