question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Debug CRA Tests stopped working on VSCode v1.19

See original GitHub issue

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Yes

Which terms did you search for in User Guide?

Debug CRA Tests in VS Code https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-tests-in-visual-studio-code

Environment

  1. node -v: v8.9.1
  2. npm -v: 4.1.2
  3. yarn --version (if you use Yarn): No yarn
  4. npm ls react-scripts (if you haven’t ejected): -- (empty)

Then, specify:

  1. Operating system: Windows 10
  2. Browser and version (if relevant): not relevant

Steps to Reproduce

  1. Open VS Code 1.19
  2. Setup a launch configuration as described here: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-tests-in-visual-studio-code
  3. Fire the debugger with F5 or play on the debugging panel
  4. The debugger doesn’t start the test scripts and eventually fires a timeout
  5. Rollback to VSCode version 1.18
  6. Follow steps 1-2
  7. The debugger starts the test scripts and properly attaches to the debugger

Expected Behavior

Debug CRA Test launch configuration works on VSCode 1.19 (similar to VSCode 1.18).

No changes between VSCode versions, or an updated version of the documentation to setup the launch configuration.

Actual Behavior

  • The launch configuration doesn’t start the test scripts
  • The debugger doesn’t attach to the test process
  • Timeout error is thrown on VS Code

References

The changelog for VSCode 1.19 mentions new additions on the debugging experience: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-tests-in-visual-studio-code

Issue created on VSCode: https://github.com/Microsoft/vscode/issues/40293

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
pedro-masscommented, Feb 16, 2018

Turned out I needed Node@v8+ Older project, so I had to bump my .nvmrc file

2reactions
amadeogallardocommented, Dec 15, 2017

The VSCode team provided the correct configuration for launch.json. Apparently, the configuration documented on Create React App was working accidentaly due to a VS Code bug that was addressed on the latest version 1.19.

Here’s the verified working code since VSCode 1.19, in case someone runs onto this. Let me know if you would like me to update the documentation (or if someone on the CRA team can do that).

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

github_iconTop Results From Across the Web

Debug CRA Tests stopped working on v1.19 #40293 - GitHub
Fire the debugger with F5 or play on the debugging panel; The debugger doesn't start the test scripts and eventually fires a timeout;...
Read more >
Debugging in Visual Studio Code
VS Code maintains a debug session while the program is running, and pressing the Stop button terminates the program. Tip: The Run action...
Read more >
Debugging jest unit tests with create-react-app doesn't hit ...
When I run debug "Debug CRA Tests" everything kind of working and test passes but it doesn't hit breakpoint in VSCode. Have I...
Read more >
Troubleshooting - Jest
There are multiple ways to debug Jest tests with Visual Studio Code's built-in debugger. ... More information on Node debugging can be found...
Read more >
How to Debug Jest Tests in VS Code for React - YouTube
In this video we learn how to debug jest tests in visual studio code for a react project. We also learn how to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found