No coverage for .vue files

[roxaaams]

Subject of the issue

Hello all,

Using vue-jest and vue-test-utils, I was able to require a simple Vue component in test and run it successfully. However, this is not reported in the in the test coverage report generated by Jest, as can be seen below. The working and simplified demo can be seen here

jest --coverage

PASS src/views/HelloWorld.spec.ts
HelloWorld ✓ props is sent (15 ms)

----------|---------|----------|---------|---------|-------------------

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	0	0	0	0
----------	---------	----------	---------	---------	-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.801 s, estimated 4 s
Ran all test suites.

My jest.config.js looks like this:
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */ module.exports = { preset: 'ts-jest', globals: {}, testEnvironment: 'jsdom', transform: { '^.+\\.vue$': '@vue/vue3-jest', }, moduleFileExtensions: ['vue', 'js', 'json', 'ts', 'node'], moduleNameMapper: { '@/(.*)': '<rootDir>/src/$1', }, coverageThreshold: { global: { branches: 20, functions: 20, lines: 20, statements: 20, }, }, };

While the package.json looks as follows:

"engines": { "node": "14.15.1" }, "dependencies": { "core-js": "^3.19.2", "dotenv": "10.0.0", "vue": "^3.2.23", "vue-class-component": "^8.0.0-rc.1", "vuex": "^4.0.2" }, "devDependencies": { "@babel/node": "^7.8.7", "@babel/preset-env": "^7.9.0", "@commitlint/cli": "12.0.1", "@commitlint/config-conventional": "12.0.1", "@types/jest": "^27.4.0", "@types/lodash": "^4.14.178", "@typescript-eslint/eslint-plugin": "5.10.1", "@typescript-eslint/parser": "5.7.0", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-e2e-cypress": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-plugin-unit-jest": "^4.5.15", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "^4.5.15", "@vue/compiler-sfc": "^3.2.29", "@vue/eslint-config-airbnb": "^5.0.2", "@vue/eslint-config-prettier": "6.0.0", "@vue/eslint-config-typescript": "^7.0.0", "@vue/vue3-jest": "^27.0.0-alpha.4", "babel-jest": "^27.4.6", "eslint": "^7.21.0", "eslint-config-prettier": "8.3.0", "eslint-config-standard": "16.0.2", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jest": "24.1.5", "eslint-plugin-node": "11.1.0", "eslint-plugin-prettier": "4.0.0", "eslint-plugin-promise": "4.3.1", "eslint-plugin-vue": "^7.0.0", "cypress": "^9.4.1", "husky": "5.1.3", "jest": "^27.4.7", "lint-staged": "10.5.4", "node-sass": "^4.12.0", "prettier": "2.2.1", "sass-loader": "^8.0.2", "ts-jest": "^27.1.3", "ts-loader": "^6.2.2", "typescript": "4.5.4", "vue-loader": "^17.0.0", "webpack": "^4.42.1", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.10.3", "prettier-config-standard": "4.0.0", "@testing-library/jest-dom": "^5.16.2", "@vue/test-utils": "^2.0.0-rc.18" }

Possible Solutions

I have already tried the following solutions, but they did not help in my case:

1. Running tests with vue-cli-service
2. Adding collectCoverageFrom property in jest.config.js

Any insight on what is happening here or a possible solution for this issue would be greatly appreciated.

[vcollado]

Hi, same issue here, downgraded jest to v26 to get it working

[BaskovicP]

Similar issue, the <script> wasn't being tested properly solved by downgrading to jest v26, thx @vcollado

[ebisbe]

In theory the bug is in Vue-jest and not vue-test-utils. For more info check here #1977