Debugging Angular Tests with Jest in Visual Studio Code

Issue

Our project is currently using jest for Angular tests. We use jest-preset-angular and it is configured to run in debug mode within Visual Studio Code. The debugging works except that it first converts the spec.ts files to JavaScript. This means that the breakpoint is usually not where I want it to be as the file has been transformed from TypeScript to JavaScript.

How can I configure my project so that I can debug my tests as Typescript within Visual Studio Code?

I have tried running Karma along side Jest as the Karma experience for debugging in the browser is much easier. However, there are so many Jest dependencies within the tests that this is also a challenge.

launch.json
    {
      "name": "Tests",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/jest-cli/bin/jest.js",
      "stopOnEntry": false,
      "args": ["-i", "-o"],
      "cwd": "${workspaceRoot}",
      "preLaunchTask": null,
      "runtimeExecutable": null,
      "env": {
        "NODE_ENV": "test"
      },
      "console": "integratedTerminal",
      "outFiles": ["${workspaceRoot}/dist/**/*"],
      "sourceMaps": true
    }

package.json

  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/setupJest.ts"
    ],
    "moduleDirectories": [
      "node_modules",
      "./"
    ],
    "testResultsProcessor": "jest-teamcity-reporter",
    "testMatch": [
      "**/app/**/*.spec.ts"
    ]

tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "types": ["jest", "node"]
  },
  "files": ["src/test.ts", "src/polyfills.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

Solution

I finally came across a suggestion in an article by Micha Pierzchala that was linked on https://jestjs.io/docs/testing-frameworks#angular. The article recommends IDE integrations, with the one for VS Code being vscode-jest. This is exactly what I was looking for and provides a fantastic debugging experience for your TypeScript code.

I didn't have to change anything about my jest configuration. I simply added this extension to my VS Code workspace.

Edit: I found vscode-jest to be quite buggy, thus I switched to vscode-jest-runner. With this extension, you initiate the test from a right-click-context menu. It has the same result in making the debugging experience much more pleasant for your TypeScript code.

Answered By - jellybeans