Debugging Mocha in Visual Studio Code

I've been writing a lot of JavaScript and TypeScript lately. In fact, I've been writing a lot of back-end JavaScript and TypeScript, and for a lot more than just chatbots too.

Mocha has been my go-to testing framework, as I get more disciplined in ensuring greater code coverage. It's a pretty easy framework to use, and works in conjunction with the built-in assertions that Node.JS provides. It also has a number of reporters that you can dump data to for external consumption. For example, at work, we integrate Mocha reports with Microsoft's Team Foundation Server for our CI/CD process.

Sometimes, you might feel the need to debug your tests in order to find out why certain methods are failing, or why certain assertions aren't working the way you thought. Visual Studio Code makes this relatively easy. In fact, it has a built-in configuration for Mocha tests. All you have to do is open up the launch.json configuration file in your .vscode folder, put your cursor after an existing configuration, and hit ctrl + space to see the autocomplete menu. You can then scroll through the list until you find the Node.JS Mocha configuration.

Alternately, you can just create a new configuration from the debug tab.

By default, you'll get the following:

{
          "type": "node",
          "request": "launch",
          "name": "Mocha Tests",
          "program": "${workspaceRoot}/node_modules/mocha/bin/mocha",
          "args": [
              "--inspect-brk",
              "${workspaceFolder}/test/**/*.js"
          ],
          "internalConsoleOptions": "openOnSessionStart"
      }
      

If yours doesn't look exactly like this, just make sure the --inspect-brk argument is present.

Now this might not work for you right out-of-the-box. It didn't for me. For me, I had to add a port property, so my configuration looks like this:

{
          "type": "node",
          "request": "launch",
          "name": "Mocha Tests",
          "program": "${workspaceRoot}/node_modules/mocha/bin/mocha",
          "args": [
              "--inspect-brk",
              "${workspaceFolder}/test/**/*.js"
          ],
          "port": 9229,
          "internalConsoleOptions": "openOnSessionStart"
      }
      

In Visual Studio Code, when I added the port property, the value defaulted to 9229, which was where the debugger was listening--so Visual Studio Code, in theory, will fill in the appropriate port for you.

Once the port was added to the configuration, I was able to debug Mocha test runs without any issues.