How to debug failing unit test with Visual Studio Code

General
,
1

We have the problem, that failing unit tests are impossible to debug. How to you start and debug unit tests from Visual Studio Code?

2

I assume that you want to debug mocha tests within the TypeScript sources and not within the JavaScript files that are generated by the TypeScript compiler.

In this case you can have two options in Visual Studio Code that enable you to set break points in the TypeScript sources:

  • using the generated JavaScript files and the SourceMap files generated by Typescript
    • This is a quick and easy way to be able to debug in Visual Studio Code.
    • Does not need additional dependencies.
    • TypeSript sources have to be compiled beforehand.
  • using ts-node and source-map-support to directly work with the TypeScript sources (This is our current approach.)
    • Does need additional dependencies (ts-node and source-map-support).
    • The execution is sometimes slow due to ts-node in time compilation.
    • No need to compile TypeSript sources beforehand.

For both you have to create - if it does not exist - a launch.json in your .vscode directory.

  • For the first option you can use the Visual Studio Code UI to create a “Node.js: Mocha Test” configuration by clicking on the “Add Configuration…” button on the bottom left side. The result will look similar to this:
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Tests",
      "protocol": "inspector",
      "cwd": "${workspaceRoot}",
      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
      "args": [
        "--no-timeouts",
        "--ui", "bdd",
        "--sort",
        "--reporter", "spec",
        "--colors",
        "${workspaceFolder}/target/cache/javascript/test/**/*.@(test|spec).js",
      ],
      "internalConsoleOptions": "openOnSessionStart"
    }
  ]
}
  • For the second option you can use the setup from above and add ts-node and source-map-support as requires to mocha. The result will look similar to this:
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Tests (ts-node)",
      "protocol": "inspector",
      "cwd": "${workspaceRoot}",
      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
      "args": [
        "--no-timeouts",
        "--ui", "bdd",
        "--sort",
        "--reporter", "spec",
        "--colors",
        "--require" ,"ts-node/register/type-check",
        "--require", "source-map-support/register",
        "${workspaceRoot}/test/**/*.@(test|spec).ts?(x)"
      ],
      "internalConsoleOptions": "openOnSessionStart",
      "env": {
        "NODE_ENV": "development",
        "TS_NODE_PROJECT": "./test/tsconfig.json",
        "TS_NODE_CACHE": "true",
        "TS_NODE_CACHE_DIRECTORY": "./target/ts-node"
      }
    }
  ]
}

At the end debugging will look like this:
debugging

3

Based on Stefans solutiuon for mocha, this is the one for Jest (working with node > 6):

		{
			"type": "node",
			"request": "launch",
			"name": "Jest Current File",
			"program": "${workspaceFolder}/node_modules/.bin/jest",
			"args": [
				"${relativeFile}"
			],
			"console": "integratedTerminal",
			"internalConsoleOptions": "neverOpen",
			"windows": {
				"program": "${workspaceFolder}/node_modules/jest/bin/jest",
			}
		}