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?

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

Solution 2

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.

Solution 3

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

Comments

[tony19]

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.

[tony19]

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.

[Girish]

coverage folder is generated but how to get the report file in XML

[Girish]

Able to get the coverage, how to get the JUnit report in XML using vue3-jest 27.0.0-alpha.4