Debugging TypeScript Mocha Tests With VSCode

Visual Studio Code is a powerful IDE, and my editor of choice while working on RxJS. They have some amazing debugging features, but I was having a really hard time getting it to work with TypeScript-based Mocha tests while working on the experimental branch of RxJS.

The following is my configuration that got things working for Mocha and TypeScript debugging with VSCode:

(Note: You’ll want to change modules/**/*-spec.ts to a glob that matches your test files)

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Mocha All",
      "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
      "args": [
          "-r",
          "ts-node/register",
          "--timeout",
          "999999",
          "--colors",
          "${workspaceFolder}/modules/**/*-spec.ts",
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "protocol": "inspector"
  },
  ]
}

How I Got There

RxJS experimental branch is using ts-node and mocha together to run our tests. The npm script for this looks like so:

"scripts": {
  "test": "mocha -r ts-node/register modules/**/*-spec.ts"
},

If you’ll notice, almost the same as the "program" and "args" sections of the debugger config above. The main difference is we’re actually pointing directly to the mocha executable in ${workspaceFolder}/node_modules/mocha/bin/_mocha and then we have added a few additional arguments to do things like make colors display, and make sure that it doesn’t timeout the tests while we’re paused in the debugger.

Dealing With “legacy protocol” Messages

I still wasn’t exactly able to step into my code yet, and I noticed in the debug console that I had this message:

Debugging with legacy protocol because Node.js v7.7.2 was detected.

I have no idea what’s causing that, I’m using version 8 of node when I check in terminal… but it’s not important. In order to solve that, I had to add "protocol": "inspector" to my configuration in launch.json. After that, I was able to step into code while debugging.

That’s It!

I hope this article helps someone else, or at the very least, I hope I remember I wrote it the next time I run into this issue. I just wanted to document it for the internet, seeing as I couldn’t find exactly what I needed to do in any one spot. Just bits and pieces.