vue-jest Coverage report incorrect

I've been trying to get jest to work properly with a Vue 2 + Vite project. Jest reports pass/fail as I would expect, but the coverage report seems incorrect. Link to the repro here: https://github.com/qkjosh/vue-jest-coverage

package.json

"devDependencies": {
    "@babel/core": "7.18.5",
    "@babel/preset-env": "^7.18.2",
    "@vue/test-utils": "^1.2.2",
    "@vue/vue2-jest": "^28.0.0",
    "babel-jest": "28.1.1",
    "jest": "28.1.1",
    "jest-environment-jsdom": "28.1.1",
    "vite": "2.9.12",
    "vite-plugin-vue2": "^2.0.1"
  }

Given an incomplete test suite, the coverage report indicates 100% coverage and seems to treat the whole SFC component as one statement. Do I have something completely misconfigured, or is the coverage report broken?

Jun 22 '22 01:06 ghost

I've also been investigating this, in our case we do not use vite, but it seems to be related to babel 7 switching from source-map to @jridgewell/gen-mapping here:

https://github.com/babel/babel/blob/main/CHANGELOG.md#v71710-2022-04-29

Jun 24 '22 16:06 dreid

After some poking around I also narrowed it down to something in babel (noticed coverage working again after downgrading a few packages). Thanks for that link. Wonder if this is outside scope of vue-jest then?

Jun 24 '22 21:06 ghost

I'm not really sure, I tried stepping through https://github.com/vuejs/vue-jest/blob/master/packages/vue2-jest/lib/generate-source-map.js and it seemed like it was not able to find the originalLine for many lines in the file.

And from investigating the jest transforms cache an indicator of this problem is that the source map for the version with incorrect coverage does not have as much mapping data as the version with correct coverage.

Its possible that vue-jest could address this by switching to https://github.com/jridgewell/trace-mapping instead of source-map or by using https://www.npmjs.com/package/@ampproject/remapping ?

Jun 24 '22 22:06 dreid

same problem on my application for several weeks. It's really very blocking. Do we have a solution?

Jun 28 '22 12:06 AnthonyRuelle

Any update?

Jul 05 '22 02:07 howard-repos

I've also been investigating this, in our case we do not use vite, but it seems to be related to babel 7 switching from source-map to @jridgewell/gen-mapping here:

https://github.com/babel/babel/blob/main/CHANGELOG.md#v71710-2022-04-29

I have downgraded my @babel/core to 7.17.9 just before switched to @jridgewell/gen-mapping on 7.17.10 but it seems no luck

Anyone with a proposed solution much appreciated

Jul 07 '22 10:07 adelsagemilang

I've also been investigating this, in our case we do not use vite, but it seems to be related to babel 7 switching from source-map to @jridgewell/gen-mapping here: https://github.com/babel/babel/blob/main/CHANGELOG.md#v71710-2022-04-29

I have downgraded my @babel/core to 7.17.9 just before switched to @jridgewell/gen-mapping on 7.17.10 but it seems no luck

Anyone with a proposed solution much appreciated

Downgrading to 7.17.9 does not work because in @babel/core they did not freeze their dependencies. If you have a project that work, just make sure you don't upgrade @babel/core dependencies: removing and recreating your package-lock.json leads to issue. :(

My really ugly workaround is to to prevent @babel/generator to update to a buggy version. So I added inside my package.json:

  "overrides": {
    "@babel/generator": "<7.17.9"
  }

Then doing an npm install fixes broken package-lock.json. Be careful with this fix, because it forces a version of one dependency inside @babel/core which seems to rely on consistent versions : this workaround could not work or break your project: don't forget to remove the override part from your package.json when this issue is fixed.

Maybe knowing where the issue comes from more precisely will help maintainers?

Edit: This solution works only for npm > 8.3.0 as overrides were introduced in this version. If you still use an older version, you can use @AnthonyRuelle solution If you use yarn, you can use @BenShelton solution

Jul 12 '22 10:07 udebella

I'm also having this issue. Is the above PR being considered for a resolution here?

Jul 22 '22 12:07 bdeo

Same issue

Jul 22 '22 13:07 LG0012

Same issue

Jul 26 '22 06:07 okgo

Same issue ... 😩

Le mar. 26 juil. 2022 à 08:34, Yurii Rekechuk @.***> a écrit :

Same issue

— Reply to this email directly, view it on GitHub https://github.com/vuejs/vue-jest/issues/480#issuecomment-1195064330, or unsubscribe https://github.com/notifications/unsubscribe-auth/AWJ7JAH32ITDVPH2NZILRBTVV6BFPANCNFSM5ZOORPAA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

Jul 26 '22 07:07 AnthonyRuelle

Using yarn we were able to fix this by locking both versions of @babel/core and @babel/generator to 7.17.9 (thanks to the suggestion from @udebella )

"devDependencies": {
  "@babel/core": "7.17.9"
},
"resolutions": {
  "@babel/generator": "7.17.9"
},

We only use babel for jest so this doesn't have any other side effects for us, YMMV.

Jul 26 '22 14:07 BenShelton

Any solution how to fix this? Non of the SFC file

"dependencies": {
    "babel-jest": "^28.1.3",
    "core-js": "^3.19.3",
    "jest": "^28.1.3",
    "jest-environment-jsdom": "^28.1.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "vuetify": "^2.6.1",
    "vuex": "^3.6.2",
    "webpack": "^4.46.0"
},
"devDependencies": {
    "@babel/core": "7.18.10",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "@nuxt/types": "~2.15.0",
    "@nuxtjs/router-extras": "^1.1.1",
    "@nuxtjs/vuetify": "^1.12.3",
    "@types/jest": "^27.0.2",
    "@vue/test-utils": "^1.2.2",
    "@vue/vue2-jest": "^28.0.1",
    "babel-core": "^7.0.0-bridge.0"
}

Aug 05 '22 05:08 LG0012

any potential fixes for this?.... having the same issue :(

Aug 19 '22 10:08 john-maddock

Waiting for the fix, in the package.json:

Add this into scripts section: "preinstall": "npx npm-force-resolutions"
Add this section to force babel generator version: "resolutions": { "@babel/generator": "7.17.9" }, On my side it worked and it will be fine while waiting for the version upgrade with the fixes

Aug 19 '22 11:08 AnthonyRuelle

Waiting for the fix, in the package.json:

Add this into scripts section: "preinstall": "npx npm-force-resolutions"

Add this section to force babel generator version: "resolutions": { "@babel/generator": "7.17.9" }, On my side it worked and it will be fine while waiting for the version upgrade with the fixes

I still having this issue. hope it can be solved ASAP

Aug 23 '22 04:08 aztran

I have this issue:

https://github.com/vuejs/vue-cli/issues/7270

I tried all the workarounds in this post and no one works for me. Do we have a solution?

Sep 21 '22 14:09 GrRivero

I tried downgrade babel version and add sourceMaps: true to file jest.config. It worked. https://github.com/swc-project/swc/issues/3854#issuecomment-1059197618

Oct 05 '22 08:10 datlc-1387

I tried downgrade babel version and add sourceMaps: true to file jest.config. It worked.

Hi! sorry, can you share your package.json or versions of babel?

Thnx

Oct 05 '22 08:10 GrRivero

Any update on it?

Oct 13 '22 19:10 schirrel

same bug over here. I even get code red marked that has been demonstrably tested. on vue3

Oct 21 '22 11:10 xdubx

Same bug over here. I have lines that show as uncovered and they don't even exist

Oct 24 '22 08:10 emersonunes

Is there any other workaround? Downgrading @babel/core and @babel/generator didn't work for me, the coverage is still incorrect. Downgrading jest and @vue/vue2-jest to versions 28 solves it partly, it generates valid coverage, but some files are missing for some reason...

EDIT: Installing jest@28 and @vue/vue2-jest@28 along with adding coverageProvider: v8 to jest config did the trick for me.

Nov 08 '22 08:11 pazderka

Well, I have a weird workaround after digging into the @vue/vue2-jest code a bit.

So, it seems like the old template compiler (@vue/component-compiler-utils) and the new one (vue/compiler-sfc) are giving the exact same output except for the source mapping.

Vue2-jest has a weird handler for which one of these compilers it uses. Basically it does a try/catch, where if vue/compiler-sfc exists, it will assume you have a more modern version of vue and use the sfc compiler, and if it errors, it will use the component-compiler-utils. (vue2-jest/lib/process.js) - line 17-22.

What ended up working for me, at least partially (I may still run into some unforeseen error), was to delete the try block and only use the code that was in the catch. So, only use @vue/component-compiler-utils. However, this isn't a persistent solution. Instead, I found a hack to trick the module resolution.

(I am using yarn) In package.json

"dependencies": {
   ...
},
"resolutions": {
    "@vue/compiler-sfc": "link:./node_modules/.cache/null"
}

Basically, it pipes the require('@vue/compiler-sfc') to null, which then throws the error and uses the other compiler.

My expectation is that the Vue team will eventually align the two compilers, but in the meantime, this seems to fix my jest coverage.

NOTE: This is also using the @vue/cli-plugin-<whatever>@5.0.8 packages and @vue/[email protected]. I'm not sure if this same solution works on previous versions of either/both. Additionally, I needed to change the jest.config to use 'v8' as the coverage provider.

Nov 22 '22 04:11 EvanWoodard

Using yarn we were able to fix this by locking both versions of @babel/core and @babel/generator to 7.17.9 (thanks to the suggestion from @udebella )
"devDependencies": {
  "@babel/core": "7.17.9"
},
"resolutions": {
  "@babel/generator": "7.17.9"
},
We only use babel for jest so this doesn't have any other side effects for us, YMMV.

This fix has stopped working quite time ago. With step by step method I have found that the recent update of the istanbul-lib-instrument had broken something (there is an issue: https://github.com/istanbuljs/istanbuljs/issues/707).

So the next iteration of the workaround is (for npm >= 8):

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

Nov 25 '22 18:11 rklos

So the next iteration of the workaround is (for npm >= 8):
"overrides": {
  "@babel/core": "7.17.9",
  "@babel/generator": "7.17.9",
  "istanbul-lib-instrument": "5.2.0"
}

This workaround works for me with:

"dependencies": {
    "@types/cli-color": "^2.0.2",
    "@types/i18n": "^0.13.5",
    "ajv": "^8.11.2",
    "axios": "^0.27.2",
    "cli-color": "^2.0.3",
    "colors": "^1.4.0",
    "core-js": "^3.26.1",
    "i18next": "^22.0.6",
    "js-beautify": "^1.14.7",
    "jwt-decode": "^3.1.2",
    "lodash.clonedeep": "^4.5.0",
    "register-service-worker": "^1.7.2",
    "sanitize-html": "^2.7.3",
    "uuid": "^9.0.0",
    "vue": "^2.7.14",
    "vue-class-component": "^7.2.6",
    "vue-i18n": "^8.28.2",
    "vue-json-viewer": "^2.2.22",
    "vue-pdf-embed": "^1.1.5",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.6.5",
    "vue-simple-markdown": "^1.1.5",
    "vue-virtual-scroller": "^1.1.2",
    "vuedraggable": "^2.24.3",
    "vuejs-ace-editor": "^1.0.1",
    "vuetify": "^2.6.12",
    "vuex": "3.6.2",
    "vuex-class": "^0.3.2",
    "winston": "^3.8.2"
},
"devDependencies": {
    "@4tw/cypress-drag-drop": "^2.2.1",
    "@mdi/font": "^7.0.96",
    "@playwright/test": "^1.28.0",
    "@types/concat-stream": "^2.0.0",
    "@types/jest": "^28.1.8",
    "@types/js-beautify": "^1.13.3",
    "@types/jsdom": "^20.0.1",
    "@types/lodash.clonedeep": "^4.5.7",
    "@types/mssql": "^8.1.1",
    "@types/node": "^18.11.9",
    "@types/sanitize-html": "^2.6.2",
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "@typescript-eslint/parser": "^5.43.0",
    "@vue/cli-plugin-babel": "^4.5.19",
    "@vue/cli-plugin-eslint": "^4.5.19",
    "@vue/cli-plugin-pwa": "^4.5.19",
    "@vue/cli-plugin-typescript": "^4.5.19",
    "@vue/cli-plugin-unit-jest": "^4.5.19",
    "@vue/cli-service": "^4.5.19",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "@vue/test-utils": "^1.3.3",
    "concat-stream": "^2.0.0",
    "cypress": "9.7.0 ",
    "eslint": "^6.8.0",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-tsdoc": "^0.2.17",
    "eslint-plugin-vue": "^8.7.1",
    "jest-fetch-mock": "^3.0.3",
    "jest-junit": "^14.0.1",
    "jest-slow-test-reporter": "1.0.0",
    "jest-sonar-reporter": "^2.0.0",
    "jsdom": "^20.0.2",
    "jsdom-worker": "^0.3.0",
    "mssql": "^9.0.1",
    "node-fetch": "^2.6.7",
    "playwright-chromium": "^1.28.0",
    "prettier": "^2.7.1",
    "sass": "^1.56.1",
    "sass-loader": "^10.4.1",
    "ts-jest": "^26.5.6",
    "typescript": "4.6.4",
    "vue-cli-plugin-vuetify": "^2.5.8",
    "vue-template-compiler": "^2.7.14",
    "vuetify-loader": "^1.9.2"
},
"overrides": {
    "@babel/core": "7.17.9",
    "@babel/generator": "7.17.9",
    "istanbul-lib-instrument": "5.2.0"
}

Only the breakpoints in script vue dont works fine when launch jest.

Thanks all!!!

Nov 28 '22 08:11 GrRivero

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

works on vue3 too. thx @GrRivero @rklos

Nov 29 '22 11:11 xdubx

This solved my issue https://github.com/vuejs/vue-jest/issues/522, probably worth trying here as well?

Upgrading couple of packages and editing jest.config.ts fixed the issue with coverage.

package.json

"@types/jest": "^29.2.2",
"jest": "^29.3.1",
"jest-environment-jsdom": "29.3.1",
"ts-jest": "^29.0.3",

jest.config.ts

moduleNameMapper: {
  uuid: require.resolve("uuid"),
},
coverageProvider: "v8",

Dec 23 '22 00:12 Envoy49

update jest and @vue/vue2-jest to version 28.1.0 also did the trick for me

Dec 27 '22 07:12 Martin-Finereport

Why Im I seeing this error message TypeError: Cannot read properties of undefined (reading 'testEnvironmentOptions') It makes no sense, because I installed jest-environment-jsdom

Jan 05 '23 10:01 AllanOricil

Why Im I seeing this error message TypeError: Cannot read properties of undefined (reading 'testEnvironmentOptions') It makes no sense, because I installed jest-environment-jsdom

This issue is not relevant to this topic at all !!!

Jan 05 '23 10:01 Envoy49

vue-jest vue-jest copied to clipboard

Coverage report incorrect

package.json

vue-jest
vue-jest copied to clipboard