Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to debug jest tests from CRA unless I have run npm run eject first #65793

Closed
nimms opened this issue Dec 29, 2018 · 14 comments
Closed

Unable to debug jest tests from CRA unless I have run npm run eject first #65793

nimms opened this issue Dec 29, 2018 · 14 comments
Assignees
Labels
debug Debug viewlet, configurations, breakpoints, adapter issues

Comments

@nimms
Copy link

nimms commented Dec 29, 2018

  • VSCode Version: 1.30.1
  • OS Version: Mac 10.14.2

Creating a new bug request for this because all the other similar ones are closed. Essentially I can't debug jest tests from an create-react-app app unless I run npm run eject first. I've gone through all the previous bug requests, have set -disableOptimisticBPs etc and nothing worked until I finally tried running npm run eject
Steps to Reproduce:

  1. Run create-react-app jest-test
  2. Use the following launch.json
{
      "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",
      "outFiles": [
        "${workspaceFolder}/**/*.js"
      ],
      "disableOptimisticBPs": true
    }
  1. Set breakpoint in App.test.js
  2. Run "Debug CRA Tests" launch config
  3. Observe that breakpoint is not hit.
  4. From terminal - run npm run eject
  5. Add following config to launch.json
{
      "type": "node",
      "request": "launch",
      "name": "Jest All",
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "args": ["--runInBand"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "disableOptimisticBPs": true,
      "windows": {
        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
      }
    }
  1. Change the following in package.json
    "testEnvironment": "node"
  2. Run "Jest All" debug config
  3. Observe that it hits your breakpoint

Does this issue occur when all extensions are disabled?: Yes

I have confirmed this occurs in the vs-code insiders build from yesterday also.

@isidorn isidorn assigned roblourens and weinand and unassigned isidorn Dec 31, 2018
@isidorn isidorn added the debug Debug viewlet, configurations, breakpoints, adapter issues label Dec 31, 2018
@roblourens
Copy link
Member

That launch config looks correct. There is some fine print on disableOptimisticBPs. You may still not hit the BP until rerunning the tests, or if you can break at a debugger statement in your script.

Does it work if you add a debugger statement to the top of the test script? Or if you rerun the tests by pressing a in the terminal?

@nimms
Copy link
Author

nimms commented Jan 1, 2019

ah this was my mistake. I had hit enter to trigger a new run, but didn't press a to trigger re-running all tests that hadn't changed. Classic...i spent a good 2 days of messing around on this. I couldn't getting it running with the debugger statement, but pressing a worked for me.

@nimms
Copy link
Author

nimms commented Jan 1, 2019

I guess the only new piece of info for the record was that ejecting the react build seemed to allow my tests to run. it's probably a config issue that is fixed by ejecting the jest config

@denis-ok
Copy link

denis-ok commented Jan 1, 2019

@nimms
What does you mean to 'press a' ?

I have similar problem.
I have three tests of same function and set breakpoint inside of function body. It not stops on first test, only on second and third.

If i have single test then breakpoint not fire at all.
If i insert debugger inside function body - if fires 3 times as expected.

@nimms
Copy link
Author

nimms commented Jan 2, 2019 via email

@roblourens
Copy link
Member

Glad that works for you. I added an extra note to our Jest debug recipe: https://github.com/Microsoft/vscode-recipes/tree/master/debugging-jest-tests#debugging-all-tests

@nimms
Copy link
Author

nimms commented Jan 7, 2019

Am I able to re-open this? My project is back to not working unless I run npm run eject. There's something about the jest setting in the create-react-scripts which doesn't agree with vscode. I can share a repo where this is reproducible. Essentially, I currently can't hit breakpoints in vscode unless I eject the project from react. It's working in webstorm however.

@roblourens
Copy link
Member

Yeah please share a repo, thanks.

@nimms
Copy link
Author

nimms commented Jan 9, 2019 via email

@roblourens
Copy link
Member

Thanks for the repo. There is something very strange going on. It seems that the --runInBand flag is ignored, because when I run and attach, the test scripts are clearly not loaded in the process.

If I downgrade some deps to versions that work in another random project I have sitting around,

"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "2.0.4",

then debugging works fine. Gotta file something upstream...

@roblourens roblourens reopened this Jan 9, 2019
@nimms
Copy link
Author

nimms commented Jan 9, 2019

hmm have just tried downgrading react/dom/scripts to those versions and it doesn't work for me. Thank for looking into it, this has been causing me to tear my hair out.

@roblourens
Copy link
Member

Have you successfully debugged the tests using chrome devtools? For me, it only works consistently when running a single test file, whether in chrome devtools or vscode.

@roblourens
Copy link
Member

Ok, I'm not insane. That's exactly the problem and it's a bug in Jest that was fixed recently. I guess you just have to wait for that change to come down the pipeline jestjs/jest#7518. You should still be able to debug when running a single file at a time in the meantime.

The code makes it look like it should also work when not in 'watch' mode but I don't know how to start it like that.

@nimms
Copy link
Author

nimms commented Jan 9, 2019

Thanks again Rob.

@vscodebot vscodebot bot locked and limited conversation to collaborators Feb 23, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
debug Debug viewlet, configurations, breakpoints, adapter issues
Projects
None yet
Development

No branches or pull requests

5 participants