Debug TypeScript VS Code

[mscottx88]

🐛 Bug Report

I cannot debug the code under test in jest. I can for the most part debug the actual jest spec file, but when I attempt to drill into the code which is actually being called, it amounts to seeing the VS Code editor pull up the source, with the "current line" always at the bottom of the screen.

I can step through the program logic, seeing the Local Variables changing, return values etc. but the actual stepping through the logic and seeing the lines of code executing is not working. Line breaks do not work.

This is for a TypeScript project, not JavaScript.

To Reproduce

Write a TypeScript module.
Write a TypeScript jest spec file.
Put a breakpoint in the TypeScript module under test (not the jest spec).
Press F5.
No breakpoints ever reach.

Expected behavior

Debugging works.

Run npx envinfo --preset jest

Paste the results here:

npx: installed 1 in 7.299s

  System:
    OS: Linux 4.4 Ubuntu 16.04.4 LTS (Xenial Xerus)
    CPU: (4) x64        Intel(R) Core(TM) i5-3570K CPU @ 3.40GHz
  Binaries:
    Node: 8.10.0 - ~/.nvm/versions/node/v8.10.0/bin/node
    Yarn: 1.12.3 - /usr/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v8.10.0/bin/npm

[SimenB]

I don't think this is actionable for us. Have you looked at facebook/create-react-app#5319 and tried the workarounds there?

I don't use VS Code, so not much help. Maybe @orta has any fresh insight?

[orta]

I think this needs an example project, because vscode doesn't support running jest out of the box and there's not enough info here to talk about how you're running jest with --inspect etc

[mscottx88]

I'll add the package details and launch.json today.

[begmec]

I have the same issue. I played around with different jest version. Under jest version 22.1.4 debugging works as expected. Using this version is a current workaround. Working with the latest version of jest, breaks the debugging capabilites in VS Code.

I attached a project where the problem occurs. Trying to step into the function "sum" will fail when you try to debug under VS Code. The launch config is configured for a windows system.

example.zip

[wasker]

After much experimentation, I was able to get TypeScript spec debugging working with VSCode and Jest v24.x.

My setup:

• NodeJS v10.15.3 (latest LTS)
• Jest v24.x
• TS-Jest v23, v24
• Latest VSCode

Launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug unit tests",
            "runtimeArgs": [
                "--inspect-brk",
                "--nolazy",
                "node_modules/jest/bin/jest",
                "--runInBand",
                "--watch",
                "--config=path/to/jest.config.json",
            ],
            "sourceMaps": true,
            "disableOptimisticBPs": true,
            "cwd": "${workspaceFolder}",
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "port": 9229,
            "env": {
                "NODE_ENV": "test"
            }
        }
    ]
}

Jest is configured with preset ts-jest/presets/js-with-ts.

TypeScript is configured with "sourceMap": true.

Note that even watch is working!

[wasker]

Potentially duplicate issue: #6683

[mscottx88]

I figured out what may have been causing issues for me. Don't specify collectCoverage during debugging as this will result in generating files which we cannot debug.

To overcome, i added --collectCoverage=false to my launch.json as my jest.config has collectCoverage: true.

[tonyhallett]

this is a known issue. --collectCoverage=false works

[mscottx88]

I found a recipe for debugging jest in VS Code that works great.

This comes from https://github.com/microsoft/vscode-recipes/tree/master/debugging-jest-tests

Paths below may need to be adjusted based on your particular needs. In this case, this is a monrepo and the actual location of the jest module is a few levels up.

    {
      "type": "node",
      "request": "launch",
      "name": "Test Spec File w/ ts-node",
      "protocol": "inspector",
      "program": "${workspaceRoot}/../../../node_modules/jest/bin/jest.js",
      "args": [
        "${fileBasenameNoExtension}",
        "--runInBand",
        "--colors",
        "--verbose=false",
        "--collectCoverage=false",
        "--config",
        "${workspaceRoot}/jest.config.js"
      ],
      "osx": {
        "console": "integratedTerminal"
      },
      "envFile": "${workspaceRoot}/.vscode/.env",
      "skipFiles": ["${workspaceRoot}/../../../node_modules/**/*", "<node_internals>/**/*"],
      "disableOptimisticBPs": true
    }

[mscottx88]

Given these new findings, I believe this issue can be closed, thank you for your time and attention to this.