How to configure debug for vue mocha unit tests in VS Code?

Question

I have managed to start debugger, but it looks like VS Code do not see the sourcemap.

When I add debugger JS statement, it breaks in webpack generated file main.js (that do not event exists in file system) but using this is painfull.

I have next setup:

package.json:

    "scripts": {
        "test:debug": "node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js test:unit"
    }

launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug unit tests",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "program": "${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service.js",
      "args": [
        "test:unit",
        "--inspect-brk"
      ],
      "port": 9229
    }
  ]
}

I tried different ways to specify a source maps but nothing helped.

Does anyone have a working setup?

Answer 1

This is what I do and breakpoints work both in TS/JS and inside the unit tests themselves. Using "@vue/cli-service": "^4.1.1" and "@vue/test-utils": "^1.0.0-beta.30".

launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Mocha Tests",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "test:debug"],
      "port": 9229,
    }
  ]
}

package.json

"test:debug": "vue-cli-service test:unit --inspect-brk",

Add one "debugger" line in your test code to start the inspect and from then on your breakpoints will be hit in vscode. Otherwise add --watch to "test:debug" and then your breakpoints will hit without debugger line like this:

"test:debug": "vue-cli-service test:unit --inspect-brk --watch",