How to setup VS Code to debug Jest using Typescript?

Question

When I debug my tests, the breakpoints do not show up in the correct place. They are unbound. Setting a breakpoint in a Typescript file results in the debugger stopping on a completely different line in the corresponding Javascript code. The issue only occurs when executing jest in the debugger. Running the app code (not tests) with the same launch config lets me use breakpoints normally.

I would like to be able to set breakpoints and step through the Typescript file from the VS code debugger when running tests.

Project structure:

    .
    ├── src   
    │   ├── test
    │   |     └── example.test.ts
    │   |     └── jest.config.ts
    │   └── example.ts
    ├── tsconfig.json

VS Code launch.json:

  "version": "0.2.0",
  "configurations": [
    {
      "name": "Unit Tests",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/jest/bin/jest.js",
        "--config",
        "${workspaceRoot}/build/src/test/jest.config.js",
        "--runInBand"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "port": 9229,
      "outFiles": ["${workspaceFolder}/build/**/*.js", "!**/node_modules/**"]
    }
  ]
}

TS Config:

  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020"],
    "declarationMap": true,
    "sourceMap": true,
    "composite": true,
    "outDir": "build",
    "moduleResolution": "node",
    "typeRoots": ["node_modules/@types", "types"],
    "types": ["node", "jest"],
    "esModuleInterop": true
  },
  "exclude": ["node_modules", "build"]
}

Other info: I am running the tsc command prior to the tests and the /build folder looks ok. It seems as though the source maps are not being found, but I have already checked the .js.map files and they look correct. Notably, the default coverage provider for jest is able to map the coverage back to the .ts file. So, I believe it is a vs code launch configuration issue.

This is a minimal version of the project. I have requirements that limit me to using tsc and then jest, rather than just using ts-jest to JIT transform.

user_1538604 · Answer

Since your tests are written in jest+typescript, I would suggest you follow the following setup:

launch.json

        {
            "name": "Jest file",
            "type": "pwa-node",
            "request": "launch",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/jest",
            "args": [
                "${fileBasenameNoExtension}",
                "--runInBand",
                "--watch",
                "--coverage=false",
                "--no-cache"
            ],
            "cwd": "${workspaceRoot}",
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "sourceMaps": true,
            "windows": {
                "program": "${workspaceFolder}/node_modules/jest/bin/jest"
            }
        },

Verify these libraries on package.json

  "devDependencies": {
    "@types/jest": "^26.0.24",
    "jest": "^27.0.6",
    "ts-jest": "^27.0.3",
    "ts-node": "^10.2.1",
    "ts-node-dev": "^1.1.8",
    "typescript": "^4.3.5",
  }

This configuration should let you debug your jest-ts files just fine, while using the Jest file debug profile

user_12059893 · Answer

As you are using VSCode, I would suggest looking into this extension - Jest Run It. It let's you run and debug test cases. You can add breakpoint in the test case and debug. You can check the extension here: Jest Run It. Search for it in the extensions section of the VSCode editor.

How to setup VS Code to debug Jest using Typescript?

2 Answers