Vscode breakpoints for TypeScript Mocha tests

Profile picture for Andrew Butler
Andrew Butler

I have started developing a Node/ExpreeJS project in TypeScript. I should note that I am not running node directly. I am running node in a docker but I do not see any reason that this would be an issue.

I am using vscode as my editor and I am trying to configure a debug launch config for Mocha tests.

My launch configuration is

{
    "type": "node",
    "request": "launch",
    "name": "SK - Mocha Tests",
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": "make",
    "runtimeArgs": [
        "test-brk"
    ],
    "port": 9321,
    "console": "integratedTerminal",
    "internalConsoleOptions": "neverOpen",
    "protocol": "inspector",
    "sourceMaps": true,
}

The make test-brk command simply maps to a docker exec command that executes npm run test-brk within the container.

My package.json contains this script definition for test-brk

"test-brk": "mocha --require source-map-support/register --require node_modules/ts-node/register --inspect-brk=0.0.0.0:9222 --debug-brk --exit test/**/*.spec.ts"

Running the SK - Mocha Tests debug task from vscode launches Mocha and runs the tests as expected. The inspect server is started and the vscode debugger successfully connects as can be seen in the output below.

$  cd /home/andrew/workspace/service-kit/sk-base-nodejs ; /usr/bin/make test-brk 
(docker exec node npm run test-brk)

> sk-base-nodejs@0.0.1 test-brk /workspace
> mocha --require source-map-support/register --require node_modules/ts-node/register --inspect-brk=0.0.0.0:9321 --debug-brk --exit test/**/*.spec.ts

Debugger listening on ws://0.0.0.0:9321/d696c7a4-c4e1-4212-af85-ab1675856a7a
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
HTTP server listening on port 8080


  Hello World
    ✓ should return 200 and Hello World


  1 passing (34ms)

Waiting for the debugger to disconnect...

However breakpoints are not being hit. I have set in both the application TS source and the test TS source. When the tests are running the breakpoints grey out and show

Breakpoint ignored because generated code not found (source map problem?)

I understand that this is a source map issue between the source TS and the JS being executed for the tests. As above I am using ts-node with Mocha there seems to be a problem because ts-node does not generate source map files for vscode to read. This is described in ts-node/issues/46 however there is no solution in that issue. It ultimately links to vscode-chrome-debug-core/issues/533 which reports that it is fixed in a previous release of vscode.

There is also vscode/issues/3144 which suggests transpiling the TS tests into JS and then executing the JS.. but this doesn't allow debugging the source TS.

I would greatly appreciate any input to point me in the right direction.

I was able to get it to work with the following launch configuration:

{
    "name": "Run Mocha",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
    "args": [
        "--no-timeouts",
        "--require",
        "ts-node/register",
        "${workspaceRoot}/src/**/*.spec.ts"
    ],
    "cwd": "${workspaceRoot}",
    "protocol": "inspector"
}

I also had to set module as commonjs in my tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
  }
}

Here's an example repo with all the files setup correctly

Debugging Example

Further Reading