SFC Vue files with tests disappear from test coverage reports

[wopian]

I have Jest setup to test files with @vue/vue3-jest and it runs all of the Vue tests just fine, however I came across a peculiar issue regarding test coverage - it was going down in our CI dashboard as I was testing more components.

SFC Vue files without a *.spec.js test show up in the Jest coverage summary with zero coverage as expected. After adding a *.spec.js for a component, it will no longer collect or be listed in the coverage summary in our project.

Regular JavaScript files are unaffected and report coverage as expected.

I have a demo repository setup, however it only partially reproduces our issue - @components/Demo.vue is missing, but the two components in @components/demo/ show up fine (which doesn't happen in our project). Removing the @components/Demo.spec.js makes it show up again with zero coverage.

Demo: https://github.com/wopian/jest-coverage-demo

Demo moved to PR: #423

With Demo.spec.js, coverage unreported

With Demo.spec.js.old, (zero) coverage reported

vue: ^3.2.23
jest: ^27.3.1
@vue/vue3-jest: ^27.0.0-alpha.4

[lmiller1990]

Odd, definitely a bug. Is this something you might be interested in looking into? I'd recommend trying to reproduce it in this repo next, then we can easily debug, test and deploy a fix. You could add a test project here: https://github.com/vuejs/vue-jest/tree/master/e2e/3.x

[wopian]

I've added a more minimal reproduction project there, though I don't know if I will have the free time to investigate further due to work commitments

[lucassonsinlima]

Facing the same here, I'm trying to find out something that could cause this but I not went so far

vue: ^3.2.26
@vue/cli-plugin-unit-jest: ^5.0.0-rc.1
@vue/vue3-jest: ^27.0.0-alpha.4

[lmiller1990]

If anyone wants to take a look at this, it would be great! I'm too busy to look at vue-jest bugs at this point in time.

[jonsalvas]

for those who are interested: we had the same issue in our project and as workaround we returned to

"vue-jest": "^5.0.0-alpha.10",

for now until this issue is fixed.

[lmiller1990]

Interesting, we should find out the different between the code in v5 and @vue/vue3-jest@27 - they are very similar, it's just between the two, we moved from semantic versioning to matching the Jest version and a monorepo. The actual code is quite similar, so if someone can track down what broke and port it to @vue/vue3-jest@27, that'd be great.

[kinoli]

We had the same issue, switching the reporter to V8 fixed it.

[websmurf]

I'm not entirely certain if it's related, but we're seeing 'weird' things in coverage as well. (vue2 + vue-jest)
I've gone back in our pipeline and narrowed it down to this upgrade:

Difference in coverage:

[adholland]

Seeing exactly the same with recent version of (vue2 + vue-jest). Vue2 version 4.5.17, Vue-jest version 3.0.7.

[websmurf]

After my last comment, we've tried to reconstruct the coverage by downgrading. In the end, we also needed to downgrade @babel/core to version ^7.16.7 in order to make coverage working again.

So we are now in the situation that coverage is working again but with vue-jest@^3.0.7 and @babel/core@^7.16.7 on Jest 28.

[kinoli]

Why don't you just use V8?

[wopian]

Why don't you just use V8?

V8 is incredibly slow on a GitHub Actions runner and runs into OOM errors for large projects

#423 (comment)

[AnthonyRuelle]

Hey,

Is there a date announced for the correction of this bug?

I'm waiting for this fix because on my application I have 100% coverage everywhere and it's really very annoying.

I tried to revert to previous versions and without success.

The update of the lock package following an audit fix was fatal for me

Thx !

[joshua-farmlink]

Can anyone share a working set of npm packages that gives correct coverage for Vue 2? We were previously using [email protected] with [email protected] and upgraded to v28 with @vue/vue2-jest, now our coverage numbers are completely wrong. Jest is showing 1 statement for the entire SFC instead of any methods/computed properties/etc inside the <script> tag as seen in the screenshot from an earlier comment.

[websmurf]

There's a tip here you can try which should resolve the issues with the latest version: vuejs/vue-cli#7040 (comment)

[AnthonyRuelle]

The solution that is proposed is to use the coverprovider v8 + jest 27 is that it?
For my part, I don't have a vuecli so I don't quite understand the link with the concern we have.
Could we have a summary here of what we need to put in version/config to try to solve this problem?

Thanks in advance !

[lmiller1990]

Can anyone share a working set of npm packages that gives correct coverage for Vue 2? We were previously using [email protected] with [email protected] and upgraded to v28 with @vue/vue2-jest, now our coverage numbers are completely wrong. Jest is showing 1 statement for the entire SFC instead of any methods/computed properties/etc inside the <script> tag as seen in the screenshot from an earlier comment.

You could try vue-jest@4 - old version but it should work with Vue 2 and Jest 26, and have many updates over vue-jest@3.

If the latest versions has speed/OOM memory issues, we should just fix those.

[AnthonyRuelle]

I upgraded to version 4 of vue-jest with jest in version 24.9 and I still have the problem of 100% coverage everywhere
It still does not pass on all the methods / computed / etc

how to get good coverage ?

[lmiller1990]

Question - does Vue CLI ship this w/ code coverage out of the box? Is it a bug here, or bug in the configuration in your project <-> Jest?

[jrtitus]

I noticed something strange while testing with Vue 3. If the Vue SFC does not import anything itself, the test coverage is reported correctly.

If there are any import statements in the SFC (even import {ref} from 'vue'), the file goes missing from test coverage.

jest.config.js

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  collectCoverageFrom: ['src/**/*.{vue,js}']
}

Does anyone else see the same behavior?

"vue": "3.2.37",
"@vue/cli-plugin-unit-jest": "5.0.6",
"@vue/test-utils": "2.0.0",
"@vue/vue3-jest": "27.0.0", 
"babel-jest": "27.5.1", 
"jest": "27.5.1", 

EDIT: Switching the coverageProvider setting to "v8", as mentioned by someone in an earlier comment resolves the issue, so it's definitely a problem related to babel, I think.

[AnthonyRuelle]

HI !

To unlock future people looking for a solution to this problem (myself included) it is therefore enough to put (temporarily) our versions in [email protected] and [email protected] and to pass the coverageProvider in "v8" is that right?

I will try on my side if it allows me to recover a coherent coverage

[vano20]

HI !

To unlock future people looking for a solution to this problem (myself included) it is therefore enough to put (temporarily) our versions in [email protected] and [email protected] and to pass the coverageProvider in "v8" is that right?

I will try on my side if it allows me to recover a coherent coverage

I have similar setup. Passing v8 for the coverageProvider give me the right statements count but still 0/0 of branches and functions count.

[tassioFront]

Hi, guys. I'm, getting the same error.

I've tried to use v8 to try to fix it, but I got this error:

Does it happen with any else?

 "vue": "^2.6.12",
 "vue-jest": "3.0.7", // I also have tried ^5.0.0-alpha.10 version
 "jest": "26.6.3", // I also have tried 27.* and 28.* versions

Thanks!

[lmiller1990]

You might want @vue/vue2-jest. You want the version that matches your Jest version (v26, v27, etc).

Vue Jest 3 is about 4 years old and is not updated.

[tassioFront]

Thanks a lot @lmiller1990 !

Even though I keep getting wrong coverage 🙁

Just sharing my files

// jest.conifg
 collectCoverage: true,
  testEnvironment: "jsdom",
  testMatch: ["<rootDir>/**/*.(spec).(ts|tsx)"],
  collectCoverageFrom: ["src/**/*.(vue|ts|js)"],
  transform: {
    "^.+\\.ts$": "ts-jest",
    "^.+\\.vue$": "@vue/vue2-jest", // Update to match your installed version
  },
  coverageProvider: "v8",
  coverageReporters: ["json", "lcov", "text-summary", "html"],

//packages
  "@vue/cli-plugin-babel": "~4.5.17",
    "@vue/cli-plugin-eslint": "~4.5.17",
    "@vue/cli-plugin-router": "~4.5.17",
    "@vue/cli-plugin-typescript": "~4.5.17",
    "@vue/test-utils": "^1.0.3",
    "ts-jest": "^27.1.1",
    "ts-loader": "^9.3.1",
    "jest": "27.5.1"
    "@vue/vue2-jest": "27",
    "ts-node": "^10.9.1",
    "typescript": "~3.9.0",
   "babel-core": "^7.0.0-bridge.0",
    "vue-template-compiler": "^2.6.11",
    "@vue/cli-plugin-unit-jest": "~4.5.17",
    "babel-jest": "27.5.1"

[GrRivero]

I have the same issue. Exists Workaround?

I tried a lot of combinations but not work I have 100% of coverage allways in typescript code in .vue files.

This is my last test:

"vue": "^2.6.11",

"devDependencies": {
    "@4tw/cypress-drag-drop": "^2.2.1",
    "@babel/core": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "@mdi/font": "^7.0.96",
    "@playwright/test": "^1.24.2",
    "@types/concat-stream": "^2.0.0",
    "@types/jest": "^28.1.6",
    "@types/js-beautify": "^1.13.3",
    "@types/jsdom": "^20.0.0",
    "@types/lodash.clonedeep": "^4.5.7",
    "@types/mssql": "^8.0.3",
    "@types/node": "^18.6.5",
    "@types/sanitize-html": "^2.6.2",
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/eslint-plugin": "^5.33.0",
    "@typescript-eslint/parser": "^5.33.0",
    "@vue/cli-overlay": "4.5.17",
    "@vue/cli-plugin-babel": "4.5.17",
    "@vue/cli-plugin-eslint": "4.5.17",
    "@vue/cli-plugin-router": "4.5.17",
    "@vue/cli-plugin-typescript": "4.5.17",
    "@vue/cli-plugin-unit-jest": "4.5.17",
    "@vue/cli-plugin-vuex": "4.5.17",
    "@vue/cli-service": "4.5.17",
    "@vue/cli-shared-utils": "4.5.17",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/test-utils": "^1.3.0",
    "babel-jest": "^24.9.0",
    "concat-stream": "^2.0.0",
    "cypress": "^10.4.0",
    "eslint": "^6.8.0",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-tsdoc": "^0.2.16",
    "eslint-plugin-vue": "^9.3.0",
    "jest": "26.6.3",
    "jest-junit": "^14.0.0",
    "jest-sonar-reporter": "^2.0.0",
    "jsdom": "^20.0.0",
    "mssql": "^8.1.3",
    "playwright-chromium": "^1.24.2",
    "prettier": "^2.7.1",
    "sass": "^1.54.0",
    "sass-loader": "^10.2.1",
    "ts-jest": "^26",
    "typescript": "^4",
    "vue-cli-plugin-vuetify": "^2.5.1",
    "vue-jest": "3.0.7",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.3"
},

and my jest.config.js:

module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue", "ts", "tsx"],
  transform: {
      "^.+\\.vue$": "vue-jest",
      ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
      "^.+\\.tsx?$": "ts-jest",
      ".*\\.(js)$": "babel-jest"
  },
  transformIgnorePatterns: ["/node_modules/"],
  moduleNameMapper: {
      "^@/(.*)$": "<rootDir>/src/$1"
  },
  snapshotSerializers: ["jest-serializer-vue"],
  testMatch: ["**/__tests__/*spec.(js|jsx|ts|tsx)", "!cypress/**/*spec.(js|jsx|ts|tsx)"],
  testPathIgnorePatterns: ["/cypress/"],
  testURL: "http://localhost/",
  watchPlugins: ["jest-watch-typeahead/filename", "jest-watch-typeahead/testname"],
  globals: {
      "ts-jest": {
          babelConfig: true
      }
  },
  coverageProvider: 'v8',
  collectCoverageFrom: ["src/**/*.{ts,vue}", ...ignoreCoverageFrom],
  coverageReporters: ["text", "lcov", "cobertura"],
  reporters: ["default", ["jest-junit", { suiteName: "Unit Tests", outputDirectory: "./junit", outputName: "jest-junit-ut.xml" }]]
}

Thanks!

[lmiller1990]

Silly question but is it possible you are actually getting 100% code coverage? Or are you just importing the component and not doing anything in your test?

[GrRivero]

Silly question but is it possible you are actually getting 100% code coverage? Or are you just importing the component and not doing anything in your test?

Sorry but it worked before and I don't know which library or libraries has stopped working. The tests work but it does not show coverage or allow real-time debugging in them. 😟

Edited to add new info:

I triyed with a new project and the code coverage doesn´t work

New project: https://github.com/GrRivero/vue2-jest-ts-coverage

New Issue: vuejs/vue-cli#7270

Do you have thoughts on why that is happening this?

Thanks!

[tassioFront]

I triyed with a new project and the code coverage doesn´t work

@GrRivero, I have done the same and also getting the same strange behavior. :/

[schirrel]

Any update on it?

[kaangokdemir]

Have the same issue. Tried all suggestions above and didn't work.

[lmiller1990]

@kaangokdemir what version of Jest and Vue Jest are you using?

[GrRivero]

We have a news from other post:

#480

I applied the workaround and works more less fine.

The coverage its god but in my case i can't use breakpoints in script vue:

#480 (comment)

The workaround for me in npm is:

"overrides": {
  "@babel/core": "7.17.9",
  "@babel/generator": "7.17.9",
  "istanbul-lib-instrument": "5.2.0"
}

[kaangokdemir]

@kaangokdemir what version of Jest and Vue Jest are you using?

I'm using [email protected] and [email protected]. Tried the @vue/vue2-jest and v8 solutions but they did not helped me though.

[kaangokdemir]

We have a news from other post:

#480

I applied the workaround and works more less fine.

The coverage its god but in my case i can't use breakpoints in script vue:

#480 (comment)

The workaround for me in npm is:

"overrides": {
  "@babel/core": "7.17.9",
  "@babel/generator": "7.17.9",
  "istanbul-lib-instrument": "5.2.0"
}

Thank you for the idea. This versions did not work but I rollbacked into the:

 "overrides": {
    "@babel/core": "7.12.10",
    "@babel/generator": "7.12.11",
    "istanbul-lib-instrument": "4.0.3"
  }

then run jest --clearCache

Now I have my coverage backs and could continue with this intermediate solution.

[lmiller1990]

Vue Jest v3 hasn't been updated in years. If there's a bug in @vue/vue2-jest , we should try fix it.

[neatcoding]

I have the same issue while using versions below:

@vue/[email protected]
[email protected]

Some .vue files are missing from the coverage report, even if they have blocks of complex code covered/not covered by tests.

I tried using workarounds described, but had no luck.

Debug info: removing imports from <script> caused the issue to go away for a given file. In a fresh create-nuxt-app the symptom was 0/100% coverage report, instead of the file disappearing from the coverage report.

Using coverageProvider: 'v8' fixes the issue of .vue files missing or having 0/100 coverage, but it's not a solution for me, as it's less precise, uses more resources, and causes reported coverage to be too high. detailed description of trade-offs

[mhdSid]

Issue is being encountered all around the globe....

[mhdSid]

I hope someone including myself can look into it and hopefully create a PR to solve it

[lmiller1990]

Same - I don't have bandwidth to look into it right now, but happy to review a PR.

[mhdSid]

@neatcoding
@kaangokdemir
@tassioFront

Can someone please try this pre_release version: https://github.com/mhdSid/vue-jest/releases/tag/v30.0.0_pre
and see if it works for vue files written in vue / js syntax?

I believe that this pre-release should fix coverage report for vue files.

I have currently checked that it is working for vue/js components, but haven't yet tested it with vue /ts + coffee. Additionally, the pre-release requires test updates.

[mhdSid]

I have published it to npm registry:
"sippi-vue2-jest": "^30.0.0",

experimentalCssCompile: false