vscode, vue3, jest debugging doesn't hit breakpoint

[ezimmerman]

Github repo demonstrating the issue here Using the vue create app I create a new app with the following selections babel, unit testing, 3.x, jest, in package json.

Add to package.json the suggested setting

With our without a launch configuration the behavior is the same.

vscode settings.json:

{
  "jest.jestCommandLine": "npm run test:unit --"
}

Generated Launch configuration from jest setup extension

{
  "configurations": [
    {
      "type": "node",
      "name": "vscode-jest-tests.v2",
      "request": "launch",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "disableOptimisticBPs": true,
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "npm",
      "args": [
        "run",
        "test:unit",
        "--",
        "--runInBand",
        "--watchAll=false",
        "--testNamePattern",
        "${jest.testNamePattern}",
        "--runTestsByPath",
        "${jest.testFile}"
      ]
    }
  ]
}

In HelloWorld.vue on line 39 add the following:

  created() {
    console.log('test')
  }

Place a breakpoint at the console.log('test') line.

in the example.spec.js debug the test.

expected, that the breakpoint in Helloworld.vue at the console.log('test') should be hit.

actual, the breakpoint is never it. vscode version Version: 1.68.1 (Universal)

[thomhurst]

Been nearly a year and a half and not a single comment on this?

I'm having the same issue and it makes fixing tests extremely difficult.

[thomhurst]

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
}