Document how to debug unit tests

We should provide/document a way to do this: https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27. Support for this landed in Node 6.3.0.

I can work on this.

👍

I'm not sure if there's anything we need to expose here. I wonder how to pass flags to node when using npm scripts.

@Gaeron

@Gaeron It's not pretty. @kentcdodds did something similar not so long ago.

It's actually not terrible. The latest node 6 has --inspect and jest has documentation on how to debug with a browser.

Haha, just noticed Dan already mentioned it's available in node 6 😅

I mean node --inspect ./node_modules/.bin/jest is less ideal than jest -- --inspect or something similar 😄.
And you need to test if node version is compatible, indeed.

But that would be a very cool feature. I've been looking for a good debugging tool for tests all around.
What really works for me, at the moment, is WebStorm/IntelliJ + mocha (out-of-the-box support for a node script located in /node_modules/_mocha without sourcemap support).
Native debugging in node is a big improvement.

@kentcdodds

jest has documentation on how to debug with a browser

@kentcdodds I can't find the documentation on their site. Do you know where it is? It was announced in this June blog post, but the link doesn't go anywhere anymore

@cpojer

Huh... That's weird... I can't find it anymore either. I wonder if @cpojer or @DmitriiAbramov can explain why.

If I recall correctly, it was something like:

node --inspect --debug-brk ./node_modules/jest-cli --runInBand

Yeah we removed the outdated docs for Jest that relied on node-inspector or other third party tools. Would appreciate a PR to Jest that adds docs on how to do this with node 6.3+.

I mean node --inspect ./node_modules/.bin/jest is less ideal than jest -- --inspect or something similar 😄. And you need to test if node version is compatible, indeed.

But we can do exactly that automatically from scripts/test.js. So it could be a simple --debug flag on react-scripts side.

So the idea is:
From the user side, let them use something like react-scripts test --debug to trigger testing with debugging in browser.
Add functionality to scripts/test to call the (potentially ugly) command node --inspect ./node_modules/.bin/jest ... when the --debug flag is passed?

I starting looking at this, and one problem I'm running into is that when I open the browser debugger, I can only seem to step through the code of jest itself, rather than my tests. Anyone experienced that before?

You should probably run Jest with -i because otherwise Jest will run tests in worker processes.

Trying to run it too, but no luck
node --inspect --debug-brk ./node_modules/jest-cli/bin/jest.js -i --runInBand ./path-to-test.js and getting debugger stopped at jest-cli code here

> 'use strict';

if (process.env.NODE_ENV == null) {
  process.env.NODE_ENV = 'test';
}

require('../build/cli').run();

});

and when continue it ignores debugger statement inside my test

@mattmorgis

I've sent a PR to Jest adding a section about debugging Jest tests in WebStorm, similar to what @mattmorgis did for VS Code.
I think, we can add a new section Debugging Tests right after Running Tests that will cover debugging tests in Chrome with --inspect --inspect-brk --, debugging in VS Code and in WebStorm. What do you think?

@prigara

@prigara Sounds good to me — I'm on board to help with documenting the VS Code stuff!

@prigara

@prigara Got the party started with this PR.

@mattmorgis

@mattmorgis I tried 3 other configurations that I found online, none worked. Yours from 10 days ago above worked! But oddly, when it starts, I still get a deprecation warning about
(node:32460) [DEP0062] DeprecationWarning: node --inspect --debug-brk is deprecated. Please use node --inspect-brk instead.
Which is strange, cause in the config the runtimeArgs say --inspect-brk. So I'm just curious why this thing may still be complaining. But the main thing is it works. So thanks!

@rsmolkin

@rsmolkin Glad it worked! I get that same DeprecationWarning — I think it's specific to VS Code's debugger. It does print out that it's using the Inspector protocol in the debug console, however. Running in Chrome doesn't output anything. 🤷‍♂️

VS Code doesn't hit breakpoints using this setup unless using Node 8.4.0+ (jestjs/jest#1652). I tried with 8.0.0 and 8.5.0, where only 8.5.0 worked.

That might be worth mentioning.

@mattmorgis

Hi all,

I'm using node 8.4.0 with @mattmorgis launch config above in VSCode. The breakpoints hit fine in my tests, but when I dive into the code being tested, it seems to break in odd places, like the source mapping isn't working. Are there certain configurations that need to be in place for source maps to work?

FWIW, I'm a bit of newb, node -v shows 8.4.0, vscode help is showing version 7.4.0, but I don't think that's what executes the tests. Coul dbe wrong though.

Thanks!

EDIT: I forgot to mention, I'm using flow. Also, it looks like some files this is fine for. Debugging redux thunks (nested functions and such) appears to be where the problem is.

@TheTFo

@TheTFo I might be able to help! Can you setup a small sample project reproducing it? Also, where are you seeing the 7.4.0 in VS Code?

I'll try to put together a repro tomorrow! Thanks! I was seeing the 7.4.0, (7.9.0 after I upgraded today) in the Help -> About menu.

…

On Sat, Oct 7, 2017, 9:18 PM Matt Morgis ***@***.***> wrote: @TheTFo <https://github.com/thetfo> I might be able to help! Can you setup a small sample project reproducing it? Also, where are you seeing the 7.4.0 in VS Code? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#594 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAgWoKDZ6mcayuM_9fTwAKMVOj9u1TEvks5sqCLWgaJpZM4J1890> .

Here's a reproduction, https://github.com/TheTFo/cria/tree/jest-debug

Please see /src/actions/todoActions.js, line 15, launch Jest debugging from VSCode.

I appreciate the time!

@mattmorgis

@mattmorgis Did you have a chance to dig into my project?

Thanks again!

Thank you! So happy to have this fixed. I really appreciate the updated docs for vscode and IntelliJ!

For whom it may concern: To sum up my local working setup with docker and Jetbrains Editor:
docker run -p 9229:9229 -volume ... node:8.9.0 ...

package.json: "test-debug": "react-scripts --inspect-brk=0.0.0.0:9229 test --env=jsdom --runInBand -i"

PhpStorm: Edit Configurations: + Chromium Remote: Host: MYDOCKERIP Port: 9229

Navigation Menu

Repository navigation

Document how to debug unit tests #594

29 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Document how to debug unit tests #594

Description

Activity

wdhorton commented on Sep 6, 2016

gaearon commented on Sep 6, 2016

geowarin commented on Sep 6, 2016

kentcdodds commented on Sep 6, 2016

kentcdodds commented on Sep 6, 2016

geowarin commented on Sep 6, 2016

wdhorton commented on Sep 7, 2016

kentcdodds commented on Sep 7, 2016

cpojer commented on Sep 7, 2016

gaearon commented on Sep 7, 2016

wdhorton commented on Sep 7, 2016

cpojer commented on Sep 7, 2016

maximderbin commented on Sep 8, 2016

29 remaining items

prigara commented on Aug 22, 2017

mattmorgis commented on Aug 22, 2017

mattmorgis commented on Aug 22, 2017

rsmolkin commented on Aug 31, 2017

mattmorgis commented on Sep 1, 2017

kriim commented on Sep 17, 2017

TheTFo commented on Oct 7, 2017

mattmorgis commented on Oct 8, 2017

TheTFo commented on Oct 8, 2017

TheTFo commented on Oct 8, 2017

TheTFo commented on Oct 16, 2017

avantgardnerio commented on Nov 14, 2017

valoricDe commented on Nov 14, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions