CODEWITHSUNDEEP
vue.jsvuejs2jestjsvue-cli-3nyc
devIT
devIT

Reputation: 239

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

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?

Upvotes: 20

Views: 24558

Answers (3)

Jalayn
Jalayn

Reputation: 9274

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.

Upvotes: 13

Yuci
Yuci

Reputation: 30079

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 enter image description here

(2) HTML enter image description here

Upvotes: 9

tony19
tony19

Reputation: 138226

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:

console screenshot

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.

Upvotes: 24

Related Questions