ts-jest: Unable to use breakpoints to debug TypeScript in Visual Studio Code.

Issue

I’m unable to debug Jest test cases written in TypeScript. Possibly just a configuration problem? What am I missing? Thanks!

Steps to reproduce

  1. Install Visual Studio Code. I tested with version 1.11.2
  2. Install Node.js. I tested with 7.8.0.
  3. Clone the repo here
  4. run npm install or yarn
  5. Set breakpoint on line 6 of SystemUnderTest.spec.ts. (Just above debugger; statement)
  6. Set breakpoint on line 3 of SystemUnderTest.ts. (Inside constructor).
  7. Press F5 or click “Start Debugging”.

Expected Behavior

Debugger should stop…

  1. On line 6 of SystemUnderTest.spec.ts.
  2. On line 3 of SystemUnderTest.ts.
  3. On line 7 of SystemUnderTest.spec.ts.

Actual Behavior

Debugger only stops on line 7 of SystemUnderTest.spec.ts

Additional observations

debugger statements stop in the proper location in the TS files, not in the transpiled JS, so sourcemaps are being emitted and consumed. Once stopped, VS Code debug controls (e.g. F10 to step over) work fine. VS Code reports that the breakpoints are loaded. They are not greyed out.

breakpoints

However, as the debugger reaches each expected breakpoint but doesn’t it it, it will begin reporting a source map problem.

sourcemaps

The “future” breakpoint (line 8 of SystemUnderTest.spec.ts) does not report any sourcemap problem.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 19 (5 by maintainers)

Most upvoted comments

Hours spent on issues like that make me proud to be a software engineer. Bill Burr + Louis C.K. and still can’t laugh as loud. I’m also going to like my own comment for the added effects

@netpoetica Here’s mine, which I use on this project I use a separate jest config for debugging. launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug Tests",
            "preLaunchTask": "debugBuild",
            "program": "${workspaceRoot}\\node_modules\\jest\\bin\\jest.js",
            "args": [
                "--runInBand",
                "--config",
                "${workspaceRoot}\\config\\jest.debug.json"
            ],
            "sourceMaps": true,
            "outFiles": [
                "${workspaceRoot}/output/debug/**/*"
            ]
        }
    ]
}

tasks.json

{
    "version": "0.1.0",
    "command": "yarn",
    "isShellCommand": true,
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "build",
            "showOutput": "never",
            "args": [
                "run",
                "build"
            ],
            "isBuildCommand": true
        },
        {
            "taskName": "debugBuild",
            "showOutput": "never",
            "args": [
                "run",
                "build:debug"
            ]
        }
    ]
}

Relevant related files are here: package.json jest.debug.json tsconfig.debug.json Hope this helps!

Same as @Cryza , it’s a pain to have to generate the js files beforehand to get the debugging working, it’s even killing the need for ts-jest at all in that case as if we do that, this lib is not needed anymore 😞 When using jasmine, using ts-node wifh a simple --require ts-node/register arg make it work wonderfully, debugging included. Why can’t this be also the case with Jest?

@jcgillespie thanks for creating the repo!

Making the following changes got this working for me:

  • In launch.json, set outFiles to [ "${workspaceRoot}/build/**/*" ]
  • In jest.json set testRegex to (/__tests__/.*|\\.spec)\\.js$

Maybe someone could post a working VSCode launch.json config if they have one? You would be such a dear ^-^

Did anyone find a way to get this working without requiring a discrete build step? I really dig the way the preprocessor inside this repo makes it unnecessary to pollute the working directory with build artifacts.

Hi,

Does the debug work in Node v6.11.0? Anyone here has been able to do it.

I’m on windows10.

Thank you.

@kulshekhar That worked! Thank you so much! I Wouldn’t have thought to point the jest tests at the .js files rather than the ts.

I’d recommend figuring out how to do it via stack overflow or discord or something, then open up a PR adding any missing documentation. As mentioned, breakpoints with typescript works out of the box, zero config, for me. But I don’t use VS Code.

I doubt there’s an issue with Jest itself (although, happy to tweak Jest if we figure out it somehow makes things harder for IDEs, as long as we don’t lose features over it).

Jest has no goal of working with ts-node. require hooks is not the way Jest does transpilation, and it’s never going to be a supported use case. If it works, that’s great. If it’s simple to adapt Jest to work, that’s great. But we’re not going to spend time working on compatibility, the approach taken is fundamentally different. (Jest injects its own require implementation and runs the code inside of a JSDOM or Node sandbox, and does transpilation and mocking on the fly - node’s own require never runs inside your tests)

I write TS full time at work using Babel as transpiler, and have 0 issues with breakpoints in the IDE when running tests. I know VS Code tries to be clever when it tries to add breakpoints, so I’d look into that side of things. I recommend looking at https://github.com/facebook/create-react-app/issues/5319 (especially trying the disableOptimisticBPs option).

But require hooks is just a hack for a symptom, it’s not the solution to the problem or something Jest will strive to support.

Lastly, this is an old issues - we fixed a lot of incompatibilities with sourcemaps in Jest 23 (released in May) so some of the assumptions and tests done before that may not be valid anymore