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?

tony19 · Answer 1 · 2018-11-11T23:21:42.893

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.

That's not broken; rather it's working as intended. That output simply tells you the tests in `example.spec.js` does not cover line 9 in `App.vue`. See updated screenshot (showing `App.vue` lines covered by newly added `app.spec.js`) and [github demo](https://github.com/tony19-sandbox/vue-jest-coverage). — tony19, Nov 11 '18 at 22:49

score 13 · Answer 2 · edited Sep 03 '19 at 02:50

13

While @tony19's answer is perfectly valid, you don't necessarily need to add anything in your custom jest configuration. For a project built with the Vue CLI service, just adding the following script in the package.json worked fine, and the coverage is showing up for Vue components:

"test:coverage": "vue-cli-service test:unit --coverage",

There are additional options you can add, such as changing the reporter(s), and having a distinct Jest configuration just for this script. To get the full list of options, you can run the following command in your terminal:

 npx vue-cli-service test:unit help

And, among these options, you'll find collectCoverage and collectCoverageFrom which can help you keep everything in the script, rather than having a custom config file.

edited Sep 03 '19 at 02:50

acdcjunior

132,397
37
331
304

answered Apr 30 '19 at 15:40

Jalayn

8,934
5
34
51

4

Indeed, another way to tackle this is to use the Jest CLI via `test:unit` :) If Vue CLI was used to generate the project with `@vue/unit-jest`, the project would already contain Jest configs either in `jest.config.js` (if `useConfigFiles` enabled), or in `package.json`'s `jest` property. I'd argue that it would be cleaner to keep all Jest configs in the same location rather than separating one/some of them in an `npm` script. – tony19 Apr 30 '19 at 16:45
coverage folder is generated but how to get the report file in XML – Girish Apr 05 '22 at 11:59

score 9 · Answer 3 · answered Aug 04 '19 at 22:26

If you don't use Vue CLI plugin @vue/cli-plugin-unit-jest, you can still generate test coverage report for Vue components. You can have Jest configured similar to the following way:

jest.config.js

module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.vue$': 'vue-jest'
  },
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{js,vue}', '!src/main.js']
}

Then you can generate the coverage report by simply running npx jest.

The coverage reports will look like below:

(1) Terminal

(2) HTML

Able to get the coverage, how to get the JUnit report in XML using vue3-jest 27.0.0-alpha.4 — Girish, Apr 05 '22 at 12:00

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

3 Answers3