How to make test coverage show all vue files in Vue-cli 3 using jest
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:
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.
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.
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: