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.

If you remove the outFiles property from the launch.json does it work (albeit slowly)? — Zeke Hernandez
– Zeke Hernandez, Commented Mar 3, 2022 at 15:18
@atlantis No, I didn’t. I no longer have access to the code either. But, IIRC, I realized that the issue only occurred prior to the first real breakpoint I set. The debugger would stop at an “invisible” breakpoint, and then when I continued it would act normally. — Kyle Millar
– Kyle Millar, Commented Aug 8, 2022 at 21:07

Alberto S. · Accepted Answer · 2022-07-05 15:49:49Z

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

MuzaffarShaikh · Accepted Answer · 2021-11-05 09:59:02Z

8

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.

answered Nov 5, 2021 at 9:59

MuzaffarShaikh

4605 silver badges14 bronze badges

4 Comments

Kyle Millar Over a year ago

Unfortunately this does not solve the issue, I have tried several extensions already. The issue is not executing the test in debug mode. The issue is that the breakpoints that I set in my Typescript files are moving when I debug. For example, if I set a breakpoint on line 5 of my TS test file, the debugger will stop on line 2 of the corresponding JS file.

C13 Over a year ago

@KyleMillar this happens because the source map being applied in VS Code isn't the same as the debugger. You need to use 'debugger' statements in the code for it to match up.

RoyM Over a year ago

@C13 fwiw, that doesn't help either. (debugger statements)

Sankofa Over a year ago

I ended up using jest runner but your post led me to the answer I wanted. Thanks. marketplace.visualstudio.com/…

Domi · Accepted Answer · 2024-11-20 11:06:25Z

Debug Jest Tests in Monorepos [Nov 2024]

I just tested this - This works with a monorepo setup and breakpoints as expected. It runs the currently open test file (in current tab) in debug mode:

{
  "name": "Jest my-package CURRENT FILE",
  "type": "node",
  "request": "launch",
  "runtimeArgs": [
    "--inspect-brk",
    "${workspaceRoot}/node_modules/jest/bin/jest.js",
    "--config",
    "${workspaceRoot}/packages/my-package/jest.config.js",
    "--runInBand",
    "${file}"
  ],
  "cwd": "${workspaceFolder}/packages/my-package",
  "console": "integratedTerminal"
}

If you have any problems with it, make sure to run the exact same thing manually and debug from there:

Make sure to cd into the config's cwd.
Then run the equivalent of:
- node --inspect-brk <jest.js> --config <jest.config.js> --runInBand <myFile.test.ts>

Reubeniv · Accepted Answer · 2023-05-26 13:15:17Z

-1

I might be a bit late to the party but the Jest extension worked for me, no setup needed

https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

edit: to elaborate on the 'no setup needed' it does the set up for you, which for me on this project I'd just cloned that came with a ton of tests and no test config in the launch.js file was enough

edited May 26, 2023 at 13:15

answered May 26, 2023 at 11:01

Reubeniv

257 bronze badges

3 Comments

Reubeniv Over a year ago

'no setup needed' no extending the launch.json nothing you install the extension and it comes with a 'debug' button that does what op is asking for

CPlus Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Reubeniv Over a year ago

the link isn't the answer I posted the link so people could read more about the extension, I agree just posting a link in some circumstances might not be helpful, but in this case you literally just install the extension and voila you can debug your tests, it builds the config for you

Collectives™ on Stack Overflow

How to setup VS Code to debug Jest using Typescript?

4 Answers 4

Comments

4 Comments

Debug Jest Tests in Monorepos [Nov 2024]

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Debug Jest Tests in Monorepos [Nov 2024]

Comments

3 Comments

Related