Coverage (and debugging from IDE) is broken with @vue/vue3-jest

[michael42]

Hi there,

we're having issues getting a correct coverage report and additionally, breakpoints from inside the IDE don't activate. When placing debugger statements, the IDE jumps to a completely different line.

Reproduction:

• clone https://github.com/michael42/vue-jest-source-maps-broken
• npm install
• npm run coverage
• open coverage/lcov-report/Dummy.vue.html:

The example repo uses the latest versions, a minimal set of dependencies (@babel/preset-env, @vue/vue3-jest, babel-jest, jest, jest-environment-jsdom) and a pretty minimal config. I unexpectedly had to include and configure babel-jest, too, but I hope it's minimal enough that there's no error in that part of the config.

package.json (with jest and babel config)

{
  "name": "vue-jest-source-maps-broken",
  "license": "ISC",
  "scripts": {
    "test": "jest --no-cache",
    "coverage": "jest --no-cache --coverage"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.20.2",
    "@vue/vue3-jest": "^29.2.1",
    "babel-jest": "^29.3.1",
    "jest": "^29.3.1",
    "jest-environment-jsdom": "^29.3.1"
  },
  "jest": {
    "testEnvironment": "jsdom",
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.vue$": "@vue/vue3-jest"
    }
  },
  "babel": {
    "presets": ["@babel/preset-env"]
  }
}

I expect the issue is caused by somewhat broken source maps, but I did not make much progress when debugging it. Maybe the source map itself is intact, and just a line offset somewhere is wrong (because 1 line missing, 1 statement missing, 1 branch missing is all correct)?

[michael42]

Interestingly, if I take the internal compiled JS with source map from @vue/vue3-jest, put it into .js and .js.map files, link them with //# sourceMappingURL and import the compiled files from jest... then the source map seems to work fine.

[xdubx]

same bug in vue2 #480

[SamuelWei]

Same issue in vue2, tried to fix it using some suggestions in #480 but they didn't work. Tried v8, but that is causing some other issues, see #504.

Looks like vue-jest isn't getting much maintenance anymore, since vitest is the new default test driver. I had to change to vitest, as test coverage was critical for my project.

[wolandec]

Same here, we've got the same problem with the debugging.

[unematiii]

Can confirm, coverage is broken in latest @vue/vue3-jest:

"@babel/core": "^7.20.5",
"@vue/vue3-jest": "^29.2.2",
"babel-jest": "^29.3.1",
"jest": "^29.3.1",
"ts-jest": "^29.0.3"

[unematiii]

Can confirm, coverage is broken in latest @vue/vue3-jest:

"@babel/core": "^7.20.5",
"@vue/vue3-jest": "^29.2.2",
"babel-jest": "^29.3.1",
"jest": "^29.3.1",
"ts-jest": "^29.0.3"

Edit: It looks like locking istanbul-lib-instrument to version 5.2.0 solves the coverage issue.

[thomhurst]

Anyone know how to get breakpoints to work properly in VSCode? Also got it jumping to random lines and inspecting variables says they don't exist in the current context.

[thomhurst]

Update on debugging in VSCode

This worked for me in VSCode's launch.json. Weirdly variables are still saying undefined but it's hitting the right lines now.

{
... // other bits

    "sourceMapPathOverrides": {
      "webpack:/*": "${webRoot}/*",
      "/./*": "${webRoot}/*",
      "/src/*": "${webRoot}/*",
      "/*": "*",
      "/./~/*": "${webRoot}/node_modules/*"
    },

... // other bits
}