Breakpoints in TypeScript with mocha and VSCODE

Question

I'm trying to get vscode to launch mocha and stop on breakpoints. When I run the tests manually I use the following command:

$ mocha -r node_modules/reflect-metadata/Reflect.js --recursive

I can also use the following command:

mocha -r node_modules/reflect-metadata/Reflect.js --recursive --debug-brk

And the following debug config:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "processId": "${command.PickProcess}",
            "port": 5858,
            "sourceMaps": true,
            "outFiles": [
                "src/**/**.js",
                "test/**/**.test.js"
            ]
        }
    ]
}

This allows me to set breakpoints in the .js files and see the original TypeScript source. But I can't set a break point directly in the TypeScript code.

My second problem is that I would like to simply press debug in the VSCode UI and trigger mocha in debug mode automatically and again hit breakpoints directly in the .ts files.

Is this possible?

Answer 1

I also recommend a separate launch profile for debugging Mocha tests. I have the following configs, working with Mocha Typescript test. My launch.json debug mocha profile looks like the following:

{
        "type": "node",
        "request": "launch",
        "name": "Debug tests",
        "runtimeExecutable": "mocha",
        "windows": {
            "runtimeExecutable": "mocha.cmd"
        },
        "preLaunchTask": "build:tests",
        "runtimeArgs": [
            "--debug-brk",
            "-p",
            "tsconfig.test.json",
            "test-js/test/index.js"
        ],
        "program": "${workspaceRoot}\\test\\index.ts",
        "outFiles": [
            "${workspaceRoot}\\test-js\\**\\*.js"
        ],
        "port": 5858
    },

build:tests is a vs code task, that runs 'tsc -p tsconfig.test.json'. I had some issues in the past with gulp-typescript sourcemap generation, that's why I'm using TSC at the moment.

My tsconfig.test.json is:

{
"compilerOptions": {
    "outDir": "./test-js",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2016",
    "declaration": true,
    "sourceMap": true,
    "inlineSources": true
},
"files": [
    "./test/index.ts"
]
}

Answer 2

I had already a very similar setup as @JasonDent but that didn't work. The node2 setting is already outdated (vscode will warn you). Instead simply add "protocol": "inspector" and voilá breakpoints are hit now:

    {
        "name": "Mocha",
        "type": "node",
        "protocol": "inspector",
        "request": "launch",
        "cwd": "${workspaceRoot}",
        "preLaunchTask": "tsc",
        "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
        "args": [ "--no-timeouts", "--colors", "${workspaceRoot}/out/test/**/*.js" ],
        "stopOnEntry": false,
        "runtimeExecutable": null,
        "env": {
           "NODE_ENV": "testing"
        },
        "sourceMaps": true
    },

Answer 3

Here's my config based on the latest task building in VSCode. Out the box it doesn't work with Typescript!? Anyway combining the answer from @Jason Dent I was able to get it working! Its also using the newer node2 debugger. For your setup, change the build/test to where ever you have put your files.

{
    "type": "node2",
    "request": "launch",
    // Automatically stop program after launch.
    "stopOnEntry": false,
    "name": "Mocha Tests",
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/mocha",
    "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/mocha.cmd"
    },
    "runtimeArgs": [
        "-u",
        "tdd",
        "--timeout",
        "999999",
        "--colors",
        "--recursive",
        "${workspaceRoot}/build/test"
    ],
    "sourceMaps": true,
    "outFiles": ["${workspaceRoot}/build"],
    "internalConsoleOptions": "openOnSessionStart",

     // Prevents debugger from stepping into this code :)
    "skipFiles": [
        "node_modules/**/*.js",
        "<node_internals>/**/*.js"
    ]
},

Answer 4

I hope you figured it out by now.

Basic answer, yes you can set breakpoints in .ts files and debug them with VSCode. They have a walk through here on general debugging: Debugging with VSCode

The key part is that you need to make a launch profile explicitly for mocha. This is just an example of how I got it to work. You will need to add something like the following to your .vscode/launch.json.

{
    // Name of configuration; appears in the launch configuration drop down menu.
    "name": "Run mocha",
    // Type of configuration. Possible values: "node", "mono".
    "type": "node",
    // Request type "launch" or "attach"
    "request": "launch",
    // Workspace relative or absolute path to the program.
    "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
    // Automatically stop program after launch.
    "stopOnEntry": false,
    // Command line arguments passed to the program (mocha in this case).
    "args": ["--recursive", "lib/*.test.js"],
    // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
    "cwd": "${workspaceRoot}",
    // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
    "runtimeExecutable": null,
    "outDir": "${workspaceRoot}/lib",
    "sourceMaps": true,
    // Environment variables passed to the program.
    "env": { "NODE_ENV": "test"}
}

This will launch mocha to test *.test.js files in the lib directory.

I used the following tsconfig.json file and have my unit tests next to the code:

{
  "compilerOptions": {
    "target": "es5",
    "declaration": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./lib",
    "sourceMap": true,
    "removeComments": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "data",
    "lib"
  ]
}