The recommended debug launch configuration for jest doesn't work with react-scripts-ts OR How to debug jest tests?

[mattmazzola]

I'm trying to debug my jest tests by following instructions from the original create-react-app: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-tests-in-visual-studio-code

However, it seems react-scripts-ts are not accepting the command line arguments the launch config passes.

I also tried the other method: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-tests-in-chrome

but it has the same issue since it's essentially running the same command but through npm script instead of VScode launcher.

Seems VSCode is properly generating a port to debug node on; however, react-scripts isn't understanding the CLI arg and fails to run, thus there is timeout as the debugger can never attach to process since it was never started.

Is there an alternative launch config for debugging jest tests that works with react-scripts-ts?

Is there maybe some upstream change in react-scripts that would enable it work?

If there another method recommended for debugging jest tests with react-scripts-ts?

[DorianGrey]

Well, it does work in general - I've just tested it with a freshly generated project on my linux system. I'm not sure how you got the --inspect=25354 argument - it should be --inspect-brk=25354. See also: https://github.com/wmonk/create-react-app-typescript/issues/209

[mattmazzola]

Hmm, based on the issue you linked it seems to match the CRA docs I referenced. Assuming we have the same launch configuration and yours works and mine doesn't maybe I have different versions that are constructing different debug commands? I know VScode tries to do some smart stuff by detecting node versions and things.

What versions are you on?

I have:

Windows: 10.0.16299 Build 16299
VSCode: 1.20.1
Node: v8.2.1
npm: 5.7.1

 "react-scripts-ts": "2.6.0",

[DorianGrey]

The launch configuration does not even mention the inspect resp. inspect-brk argument - that's what I was wondering about, it's a bit curious to see a difference in here, esp. when it leads to an invalid argument.

The above worked fine on my linux machine, I'll have a look at this on my windows host tomorrow to see what happens there.

[mattmazzola]

The launch configuration does not even mention the inspect resp. inspect-brk argument

This part is specificed as: "protocol": "inspector", and then from my understanding VS Code looks at the node version to determine how to construct the command argument.

Somehow it's using both inspect and debug-brk in the same command.

Usually VSCode prints out orange text saying "detected node version X.... and using Y protocol" but I don't see that here.

[mattmazzola]

Also, the manual test:debug script they recommend (I linked in original post) manaully specifies inspect-brk and this still doesn't work.

"test:debug": "react-scripts-ts --inspect-brk test --runInBand --env=jsdom",

Do you have screen shot of what the whole command is when it's generated via your launch config?

[DorianGrey]

Just tested this configuration on my windows (10) machine - it ends up with using inspect and debug-brk in the same command, which only causes a deprecation warning, but things work fine otherwise. See the terminal output below - everything after this was just the test execution itself, so I've cut them off.

PS D:\Workspaces\cra-debug-test-app> cd 'D:\Workspaces\cra-debug-test-app'; & 'D:\Workspaces\cra-debug-test-app/node_modules/.bin/react-scripts-ts.CMD' '--inspect=46518' '--debug-brk' 'test' '--runInBand' '--no-cache' '--env=jsdom'
Debugger listening on ws://127.0.0.1:46518/3c321564-04e4-499b-80fc-2b9dbd430012
For help see https://nodejs.org/en/docs/inspector
Debugger attached.
(node:13232) [DEP0062] DeprecationWarning: `node --inspect --debug-brk` is deprecated. Please use `node --inspect-brk` instead.

Checked on:

• node 8.9
• create-react-scripts-ts 2.13
• vscode 1.21

Just not that I've updated jest to 22.4 to get the improved automatic source mapping, but that should not have something to do with the error you are facing.

So the only main difference seems to be that you are using a quite old version of react-scripts-ts (even though your node version should be updated). Is there a particular reason to do so? Have you tried the same on a more recent one?

[mattmazzola]

Well I'm at least a step closer, but still not able to hit breakpoints.

I updated VSCode to 1.21 and react-scripts-ts to 2.13.0 to match and the launch command now runs with deprecation warning just like your output above; however, I'm still not able to hit the breakpoints.

I also tried using the test:debug script which does remote debugger through chrome and even with a 'debugger' statement in the code it still doesn't stop.

I even tried a fresh new project with create-react-app my-app --scripts-version=react-scripts-ts and put debugger inside the App.test.ts and nothing :(.

Jest just runs and says test passes without pausing execution.

Only remaining different is node. I'm surprised I'm the only one with issues here given how recent the version requirements are just to debug. Perhaps everyone else is on linux.

Anyways, thanks for taking your time to test this stuff on different systems for me.

[DorianGrey]

[...] I'm surprised I'm the only one with issues here given how recent the version requirements are just to debug [...]

It's not that recent - the current LTS is node 8.10, with 9.8 being the most recent version. 8.2 is quite old and was never intended as LTS.

If you can set breakpoints, but not debug them, it also might have something to do with the jest version. As mentioned above, I've updated jest to 22.4, which contains several improvements regarding source maps. You should try to update it manually, and see if that helps (cra-ts 2.13 references jest 22.0).

[mattmazzola]

Ah yea, I meant the other versions, not node.

I'm still at loss. Here's what I tried for minimal reproduction of issue:

Updated to node 8.10.0

1. Create app

npx create-react-app jest-test-01 --scripts-version=react-scripts-ts

2. Add launch configuration

        {
            "name": "Debug CRA Tests",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts-ts",
            "args": [
                "test",
                "--runInBand",
                "--no-cache",
                "--env=jsdom"
            ],
            "cwd": "${workspaceRoot}",
            "protocol": "inspector",
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        }

(Same as here but change react-scripts to react-scripts-ts)

3. Update jest to 22.4.x (Maybe I did this part wrong?)

npm i jest@latest

4. Add breakpoint in app.test.ts
5. Run "Debug CRA Tests"

Expected: Execution stops on breakpoint Actual: Tests complete without stopping

Output:

D:\repos\jest-test-01> cd 'D:\repos\jest-test-01'; & 'D:\repos\jest-test-01/node_modules/.bin/react-scripts-ts.CMD' '--inspect=15668' '--debug-brk' 'test' '--runInBand' '--no-cache' '--env=jsdom'
Debugger listening on ws://127.0.0.1:15668/329976fc-3bff-4fb8-8d25-a3e373829778
For help see https://nodejs.org/en/docs/inspector
Debugger attached.
(node:4760) [DEP0062] DeprecationWarning: `node --inspect --debug-brk` is deprecated. Please use `node --inspect-brk` instead.
 PASS  src\App.test.tsx
  √ renders without crashing (21ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.849s
Ran all test suites related to changed files.

Minimal repo with changes above applied to default CRA: https://github.com/mattmazzola/jest-test-01

[DorianGrey]

I'm afraid I cannot reproduce this. Using the project above, I was able to debug without any problems (VSCode 1.21).

[mikew]

I think there's also some weirdness with how Jest works in general. It's like I've had to run a test first before I can even add a debugger, lest VS Code complains it cannot find the line in the source maps.

[joelleibow]

Has there been any further discovery regarding this issue? I'm running into my breakpoints being ignored with the following launch.json configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug CRA Tests",
      "type": "node",
      "request": "launch",
      "runtimeExecutable":
        "${workspaceRoot}/node_modules/.bin/react-scripts-ts",
      "args": ["test", "--runInBand", "--no-cache", "--env=jsdom"],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

Using the following versions on MacOS High Sierra 10.13.5:

node: 8.11.2 vscode: 1.24.1 react-scripts-ts: 2.16 jest: 23.1.0

I would really appreciate any help in getting through this.

[chenchenalex]

@joelleibow I used this scripts in my project for the latest CRA app, maybe this can help

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug CRA",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    },
    {
      "name": "Debug CRA Tests",
      "type": "node",
      "request": "launch",
      "args": [
        "${workspaceRoot}/scripts/test.js",
        "--runInBand",
        "--no-cache",
        "--env=jsdom"
      ],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}