Create-react-app: Enable CLI debugger with Jest
Would be really great if there was a 'test debug' command that enabled a command-line debugger. There is an issue open to make a debugger work _for the browser_ but I think a command-line debugger would be more useful.
Or, at least, documentation on the recommended command and/or tool to use alongside create-react-app to get a CLI debugger running for existing tests.
amandapouget
All 7 comments
I think most people would want to use Chrome for debugging. Is there some particular reason why you prefer a CLI debugging interface? Does one exist for Node? (I’ve never used one to be honest.)
gaearon
on 21 Sep 2016
I’m really surprised that most people would prefer Chrome debugging, in that walking through tests with a debugger is a very standard and popular thing with, say, Ruby (pry). In a previous project, we used this command: "test_debug": "node debug ./node_modules/jasmine/bin/jasmine.js”.
In short, if a test fails, it’s easier to just throw in a debugger and use a different test command than it is to bother going and opening and browser and all of that. Chrome’s tools are great, but honestly, if you’re debugging regular domain models and not the react components themselves, there is no reason to get a browser involved when you just want to break at a certain line of a test. I usually have my CLI and my editor arranged on the screen such that switching out of CLI because I happen to be running for a debug is just a pain… I’d rather throw in a bunch of console.logs to get around the issue than open up a browser to pry apart one test.
It would seem that adding a CLI debugger command would be a really simple task here, provided that Jest allows you to debug the same way Jasmine does.
On Sep 21, 2016, at 9:37 AM, Dan Abramov [email protected] wrote:
I think most people would want to use Chrome for debugging. Is there some particular reason why you prefer a CLI debugging interface? Does one exist for Node? (I’ve never used one to be honest.)
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/facebookincubator/create-react-app/issues/691#issuecomment-248614539, or mute the thread https://github.com/notifications/unsubscribe-auth/AMQpjL8gBsq947pwCusUaPdjTLr75vGcks5qsTMigaJpZM4KCzkr.
amandapouget
on 21 Sep 2016
Another primary limitation of "Chrome-only" debugger tools is, how do you debug server-side code? You can do that with a CLI debugger but not Chrome.
amandapouget
on 22 Sep 2016
You can see others are monkey-patching Jest to accomplish this:
http://stackoverflow.com/questions/25142173/debugging-jest-test-cases-using-node-inspector
amandapouget
on 22 Sep 2016
Another primary limitation of "Chrome-only" debugger tools is, how do you debug server-side code? You can do that with a CLI debugger but not Chrome.
To clarify, debugging Node (potentially server-side) code is exactly what I meant by “Chrome debugging”. This is a very recent officially supported feature in Node, so it’s not documented well yet.
This is what I’m referring to:
https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27
http://facebook.github.io/jest/docs/troubleshooting.html#tests-are-failing-and-you-don-t-know-why
gaearon
on 22 Sep 2016
It looks like devtools debugging currently does not work (https://github.com/facebookincubator/create-react-app/pull/2041) CLI debugger looks like only way to debug or inspect tests at the moment.
Here is an example that would run debugger on single test:
CI=1 node debug node_modules/react-scripts/scripts/test.js --runInBand --env=jsdom src/App.test.js
CI env option is to disable watch mode, --runInBand to run tests serially
And screenshot:
This was made on fresh create-react-app with adding debugger statement:
bmihelac
on 6 Jun 2017
I'll close this we've documented the Chrome debugger (https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-tests-in-chrome).
Hope the above helps for those who want a CLI debugger.
gaearon
on 8 Jan 2018
Related issues
stopachka
·
3Comments
Aranir
·
3Comments
AlexeyRyashencev
·
3Comments
DaveLindberg
·
3Comments
JimmyLv
·
3Comments
Most helpful comment
I’m really surprised that most people would prefer Chrome debugging, in that walking through tests with a debugger is a very standard and popular thing with, say, Ruby (
pry). In a previous project, we used this command:"test_debug": "node debug ./node_modules/jasmine/bin/jasmine.js”.In short, if a test fails, it’s easier to just throw in a debugger and use a different test command than it is to bother going and opening and browser and all of that. Chrome’s tools are great, but honestly, if you’re debugging regular domain models and not the react components themselves, there is no reason to get a browser involved when you just want to break at a certain line of a test. I usually have my CLI and my editor arranged on the screen such that switching out of CLI because I happen to be running for a debug is just a pain… I’d rather throw in a bunch of console.logs to get around the issue than open up a browser to pry apart one test.
It would seem that adding a CLI debugger command would be a really simple task here, provided that Jest allows you to debug the same way Jasmine does.