New Project with vue 2 + babel + typescript + jest doesn't work code coverage

[GrRivero]

Version

5.0.8

Reproduction link

github.com

Environment info

  System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
  Binaries:
    Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22000.120.0), Chromium (104.0.1293.47)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.1.1 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  5.0.8 
    @vue/babel-preset-jsx:  1.3.1 
    @vue/babel-sugar-composition-api-inject-h:  1.3.0 
    @vue/babel-sugar-composition-api-render-instance:  1.3.0 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.3.0 
    @vue/babel-sugar-v-on:  1.3.0 
    @vue/cli-overlay:  5.0.8 
    @vue/cli-plugin-babel: ~5.0.0 => 5.0.8 
    @vue/cli-plugin-e2e-cypress: ~5.0.0 => 5.0.8 
    @vue/cli-plugin-eslint: ~5.0.0 => 5.0.8 
    @vue/cli-plugin-router: ~5.0.0 => 5.0.8 
    @vue/cli-plugin-typescript: ~5.0.0 => 5.0.8 
    @vue/cli-plugin-unit-jest: ~5.0.0 => 5.0.8 
    @vue/cli-plugin-vuex: ~5.0.0 => 5.0.8 
    @vue/cli-service: ~5.0.0 => 5.0.8 
    @vue/cli-shared-utils:  5.0.8 
    @vue/compiler-sfc:  2.7.8 
    @vue/component-compiler-utils:  3.3.0 
    @vue/eslint-config-typescript: ^9.1.0 => 9.1.0 
    @vue/test-utils: ^1.1.3 => 1.3.0 
    @vue/vue2-jest: ^27.0.0-alpha.2 => 27.0.0 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^8.0.3 => 8.7.1 
    jest-serializer-vue:  2.0.2 
    typescript: ~4.5.5 => 4.5.5 
    vue: ^2.6.14 => 2.7.8 
    vue-class-component: ^7.2.3 => 7.2.6 
    vue-eslint-parser:  8.3.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  17.0.0 (15.10.0)
    vue-property-decorator: ^9.1.2 => 9.1.2 
    vue-router: ^3.5.1 => 3.5.4 
    vue-style-loader:  4.1.3 
    vue-template-compiler: ^2.6.14 => 2.7.8 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.6.2 => 3.6.2 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Run test:unit:coverage script

What is expected?

A coverage under 100% with uncovered lines

What is actually happening?

See that the coverage is 100% with uncovered lines

---

It's a new clean project. But i reproduce this with other projects in vue2

[vigneshwarankaliselvam]

possible to add the testcase codes as well @GrRivero ?

[okoell]

The reason why this happens for new projects is, that newer babel versions (> 7.17.9) generate different source maps, that vue2-jest does not understand. See:

• Coverage report incorrect vue-jest#480
• Source maps for vue2 SFCs using TS are not created/wrongly created for v28 vue-jest#474

This appears to have been fixed for vue-jest@28 with vuejs/vue-jest#486.

Unfortunately vue-cli still uses jest@27 and vue-jest@27. So to fix this in vue-cli I see 2 options:

• convince vue-jest to also make the fix for vue-jest@27
• migrate vue-cli to jest@28 and vue-jest@28

A workaround is to downgrade the babel dependencies in your vue-cli projects to versions <= 7.17.9, but this is rather cumbersome because there are so many of them.

[GrRivero]

possible to add the testcase codes as well @GrRivero ?

Sorry @vigneshwarankaliselvam I don't understand you well but you can reproduce the issue easy.

You can install a new vue-cli project with vue2 + babel + typescript + jest and see the coverage.

or

You can use the link that i attached in the first post to run a repo with this params and one test modified

Repo

[GrRivero]

A workaround is to downgrade the babel dependencies in your vue-cli projects to versions <= 7.17.9, but this is rather cumbersome because there are so many of them.

This workaround maybe it's a good idea but it's not possible to maintain. In my project i see more than 100 references of babel, it's crazy!!

For my part I think it's better to migrate vue-cli to jest@28 because if you create a new project with vue-cli doesn't work. But... It's no my decision :)

[kaangokdemir]

Did you able to find any solution? @GrRivero

[okoell]

@kaangokdemir
I settled on the following workaround for my projects:
Instead of fixing the babel dependencies, I'm now using vue-cli@5 with jest@28, which works quite nicely.

  "devDependencies": {
    "@types/jest": "^28.0.0",
    "@vue/cli-plugin-babel": "~5.0.8",
    "@vue/cli-plugin-unit-jest": "~5.0.8",
    "@vue/cli-service": "~5.0.8",
    "@vue/vue3-jest": "^28.0.0",
    "jest": "^28.0.0",
    "jest-environment-jsdom": "^28.0.0",
    "ts-jest": "^28.0.0",
  },
  "resolutions": {
    "@types/jest": "^28.1.8",
    "babel-jest": "28.1.3",
    "istanbul-lib-instrument": "5.2.0",
    "jest": "28.1.3"
  }

This requires some dependency locking, which I'm doing through yarn's resolutions property.

In the meantime, I found another transient dependency that breaks code coverage in newer versions: "instanbul-lib-instrument" - hence the resolutions entry above.

This setup works well for me with both vue@2 and vue@3.

[GrRivero]

Did you able to find any solution? @GrRivero

We have a news from other post:

vuejs/vue-jest#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:

vuejs/vue-jest#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"
}