Unable to use breakpoints to debug TypeScript in Visual Studio Code.

[jcgillespie]

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.

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

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

[kulshekhar]

@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$

[jcgillespie]

@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.

[jcgillespie]

@kulshekhar What's the proper configuration to get this all to work and keep coverage remapping? The debug config above works, but coverage in the TS files is all zeroed out. I feel like the magic is somewhere in the collectCoverageFrom configuration, but I'm not finding the right combo.

As an interim, I've updated the testRegex to be "(/__tests__/.*|\\.spec)\\.(ts|js)$", which gets the coverage working again, but now the tests are run twice (once as .js and once as .ts).

[kulshekhar]

@jcgillespie you could have separate configs for debugging and testing/coverage

[kulshekhar]

also, iirc, the degug config in the sample repo didn't use the --coverage flag when invoking jest

[netpoetica]

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

[jcgillespie]

@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!

[tjoskar]

Thanks @jcgillespie,
Which version of node are you using? I can't get this to work since 8.x (with the new Inspector Protocol).

Edit: I just saw that you are using 7.8.0.

[anitsh]

Hi,

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

I'm on windows10.

Thank you.

[tonivj5]

Thank you very much @jcgillespie!! That works perfect! 😄

[jordond]

@jcgillespie I tested your example with node 7.8, and it works as expected. However using node 8+, it no longer breaks on breakpoints or debugger statements.

Any ideas how to fix it? I'm assuming it has something to do with the newer inspector protocol.

[liqwid]

@jordond found a solution to this one: https://www.jstwister.com/post/debugging-jest-with-vscode/
It's the "sourceMaps": true option in launch.json that prevents debugger from being triggered

[manu-unter]

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.

[sinedied]

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?

[lukepighetti]

@SimenB Please see above comment for supporting my request to have determination over using require to use ts-node with Jest

[SimenB]

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 facebook/create-react-app#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

[lukepighetti]

@SimenB I'm happy to drop ts-node but I haven't seen any documentation for running Jest with Typescript with breakpoints. I have heard people like yourself say it works but I haven't been able to find anything conclusive. Should I open an issue on facebook/jest for documentation?

[SimenB]

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).

[zenVentzi]

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