Document how to debug unit tests #594

gaearon · 2016-09-06T15:14:46Z

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.

wdhorton · 2016-09-06T15:27:19Z

I can work on this.

gaearon · 2016-09-06T15:33:29Z

👍

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.

geowarin · 2016-09-06T15:38:50Z

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

kentcdodds · 2016-09-06T15:52:16Z

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

kentcdodds · 2016-09-06T15:52:53Z

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

geowarin · 2016-09-06T23:57:35Z

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.

wdhorton · 2016-09-07T03:52:45Z

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

kentcdodds · 2016-09-07T08:29:27Z

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

cpojer · 2016-09-07T12:22:52Z

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+.

gaearon · 2016-09-07T17:10:03Z

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.

wdhorton · 2016-09-07T21:31:46Z

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?

cpojer · 2016-09-07T21:33:38Z

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

maximderbin · 2016-09-08T21:07:09Z

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

wdhorton · 2016-09-15T15:16:19Z

node --inspect is still ignoring debugger statements, so I think we're going to have to wait until this Jest issue is resolved

asfktz · 2016-10-01T11:38:34Z

can I ask to take a look?
http://stackoverflow.com/questions/39798495/how-to-debug-jest-unit-tests-on-create-react-app

cdaringe · 2016-12-17T00:54:17Z

yikes. surprised this hasn't ~~come up before~~ had more heat applied to it. i see that react-scripts creates a jest config in mem. i wrote that config to disk, updated the targetEnvironment to jsdom instead of node, then ran:

node --debug-brk ./node_modules/.bin/jest --config jest-config.json --runInBand -i --no-cache src/__test__/<my-file>.test.js

and in fact it honored my debugger but it was super mangled (e.g. no source maps) :/

cdaringe · 2017-01-06T17:48:10Z

can anyone furnish a successful workflow debugging via react-scripts with source maps?

gaearon · 2017-01-06T18:58:36Z

surprised this hasn't ~~come up before~~ had more heat applied to it.

You can apply some heat by submitting a PR. 😉

cdaringe · 2017-01-06T18:59:33Z

i would love to do that once i get it to work! :)

cdaringe · 2017-01-07T00:46:59Z

got it, PR comin' in hot!

gaearon · 2017-01-07T00:49:06Z

Awesome

designbyadrian · 2017-03-09T12:07:48Z

@cdaringe Gone cold :( https://facebook.github.io/jest/docs/troubleshooting.html

thg303 · 2017-04-20T06:50:49Z

any news on this issue?? testing with cra is quite disappointing

gaearon · 2017-08-16T16:55:31Z

any news on this issue

If there were news at the time, they would be on the issue. This is generally true in any open source project. Nobody wants to withhold good news on an open issue if there any. :-)

adding heat to this issue

You are not "adding heat" with a comment that does nothing to advance the conversation. Comments like this just cause extra stress for maintainers for whom this is an additional notification that carries no information. Let's all try to keep the issue tracker signal rather than noise by only posting when we have important information to share. You can use the GitHub voting feature to vote for issues that affect you.

If you want to help you are welcome. Last time I checked, debugging tests was blocked by this Jest issue (already linked from this thread earlier): jestjs/jest#1652. The Jest issue was blocked by a Node issue (as you can see by reading that thread): nodejs/node#7593. And as you can see somebody finally solved it in Node 8.4 just about now: jestjs/jest#1652 (comment).

So if you'd like to help, please test whether that suggestion works in Node 8.4, and if it does, please send a PR documenting it. Thanks!

gaearon · 2017-08-16T17:14:26Z

Try this with Node 8.4:

node --inspect --inspect-brk node_modules/.bin/react-scripts test --env=jsdom --runInBand

We'll probably add some sweeter alternative way to run this but please check if this works.

Timer · 2017-08-16T17:27:19Z

The following should also work (?):

./node_modules/.bin/react-scripts --inspect --inspect-brk test --env=jsdom --runInBand

#2041 should turn making npm test -- --inspect (or npm test -- --inspect --inspect-brk) "alias" the above command (automatically toggling runInBand).

cdaringe · 2017-08-16T18:13:29Z

thx guys.

node --inspect --inspect-brk node_modules/.bin/react-scripts test --env=jsdom --runInBand

^ will not work because react-scripts runs the test command in a child_process, therefore, the jest process is not exposed to the --inspect --inspect-brk flags.

./node_modules/.bin/react-scripts --inspect --inspect-brk test --env=jsdom --runInBand

^ will not work because of the way react-scripts.js parses args. yields "Unknown script "--inspect".

a 🚨 hack 🚨 is to modify react-scripts.js:

from:

  case 'test': {
    const result = spawn.sync(
      'node',
      [require.resolve('../scripts/' + script)].concat(args),
      { stdio: 'inherit' }
    );

to:

  case 'test': {
    const result = spawn.sync(
      'node',
      ['--inspect', '--inspect-brk', require.resolve('../scripts/' + script)].concat(args),
      { stdio: 'inherit' }
    );

now, you can run:

./node_modules/.bin/react-scripts --inspect --inspect-brk test --env=jsdom --runInBand

cdaringe · 2017-08-16T18:14:53Z

PS, i dont recommend the hack--i recommend someone pick up #2041, but it's a useful unblocker!

Timer · 2017-08-16T18:30:28Z

Did you test ./node_modules/.bin/react-scripts --inspect-brk test --env=jsdom --runInBand on react-scripts@^1.0.11?

It should work, but I can't test it right now. This feature is only available on v1.0.11+.

cdaringe · 2017-08-16T18:39:47Z

i did not! i tested on 1.0.10! :)

i see what you're up to now. nice!

Timer · 2017-08-16T19:00:53Z

Optimally, I'd love to make npm test -- --inspect or npm test -- --inspect-brk forward the parameter to Node, followed by appending the --runInBand arg automatically.

Given current:

https://github.com/facebookincubator/create-react-app/blob/e8a3e4b2995f4c6e49c0a7ed653a1646a7b5e515/packages/react-scripts/bin/react-scripts.js#L16-L19

https://github.com/facebookincubator/create-react-app/blob/e8a3e4b2995f4c6e49c0a7ed653a1646a7b5e515/packages/react-scripts/bin/react-scripts.js#L26-L32

Something like filtering --inspect and --inspect-brk out of args.slice(scriptIndex + 1), appending one to nodeArgs (where --inspect-brk trumps --inspect) and then appending --runInBand to args.slice(scriptIndex + 1) if script === 'test'.

Timer · 2017-08-16T19:01:49Z

Or maybe it'd be better to only automatically append --runInBand if --inspect(-brk?) was found in nodeArgs. This would probably be the least-intrusive and future proof.

Everything works fine now as-is and we could document it as such, but maybe we can make it friendlier!

MattMorgis · 2017-08-21T14:03:14Z

After some experimentation on Friday and again this morning, I came up with this VS Code launch.json configuration to actually launch the tests and debug, rather than needing to launch them separately and attach the debugger after the fact.

This works with CRA/react-scripts:

Node: v8.4.0
react-scripts: v1.0.11
jest: 20.0.4

Update: works with react-scripts v1.0.12

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

I'd be happy to send in PR with the updated docs on this?

prigara · 2017-08-22T12:25:58Z

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?

MattMorgis · 2017-08-22T12:40:14Z

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

MattMorgis · 2017-08-22T13:07:18Z

@prigara Got the party started with this PR.

rsmolkin · 2017-08-31T19:26:40Z

@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!

MattMorgis · 2017-09-01T01:47:44Z

@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. 🤷‍♂️

kriim · 2017-09-17T17:56:35Z

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.

TheTFo · 2017-10-07T21:37:01Z

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.

MattMorgis · 2017-10-08T01:17:53Z

@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?

TheTFo · 2017-10-08T01:49:44Z

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> .

TheTFo · 2017-10-08T22:07:12Z

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!

TheTFo · 2017-10-16T15:42:07Z

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

Thanks again!

avantgardnerio · 2017-11-14T12:28:18Z

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

valoricDe · 2017-11-14T12:32:34Z

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

gaearon added the enhancement label Sep 6, 2016

gaearon added this to the 1.0.0 milestone Sep 6, 2016

maximderbin mentioned this issue Sep 8, 2016

debugger; and breakpoints don't work with node --inspect jestjs/jest#1652

Closed

cdaringe mentioned this issue Jan 7, 2017

feature/add-first-class-debugging-support-for-tests #1360

Closed

gaearon removed enhancement tag: enhancement labels Mar 6, 2017

Timer mentioned this issue Aug 18, 2017

node --inspect appears to be broken or unsupported #2969

Closed

MattMorgis mentioned this issue Aug 21, 2017

Updating Troubleshooting.md to include --inspect jestjs/jest#4312

Merged

MattMorgis mentioned this issue Aug 22, 2017

Docs: How to Debug Unit Tests #2992

Merged

mlesk mentioned this issue Oct 27, 2017

vscode debugging not working wmonk/create-react-app-typescript#52

Closed

Timer closed this as completed in #2992 Nov 14, 2017

justinlevi mentioned this issue Jan 30, 2018

Debug w/ Create React App does not seem to work. jest-community/vscode-jest#239

Closed

lock bot locked and limited conversation to collaborators Jan 21, 2019

Document how to debug unit tests #594

Document how to debug unit tests #594

Comments

gaearon commented Sep 6, 2016

wdhorton commented Sep 6, 2016

gaearon commented Sep 6, 2016

geowarin commented Sep 6, 2016

kentcdodds commented Sep 6, 2016

kentcdodds commented Sep 6, 2016

geowarin commented Sep 6, 2016 • edited Loading

wdhorton commented Sep 7, 2016 • edited Loading

kentcdodds commented Sep 7, 2016 • edited Loading

cpojer commented Sep 7, 2016

gaearon commented Sep 7, 2016

wdhorton commented Sep 7, 2016 • edited Loading

cpojer commented Sep 7, 2016

maximderbin commented Sep 8, 2016 • edited Loading

wdhorton commented Sep 15, 2016

asfktz commented Oct 1, 2016

cdaringe commented Dec 17, 2016 • edited Loading

cdaringe commented Jan 6, 2017 • edited Loading

gaearon commented Jan 6, 2017

cdaringe commented Jan 6, 2017

cdaringe commented Jan 7, 2017

gaearon commented Jan 7, 2017

designbyadrian commented Mar 9, 2017

thg303 commented Apr 20, 2017

gaearon commented Aug 16, 2017

gaearon commented Aug 16, 2017

Timer commented Aug 16, 2017 • edited Loading

cdaringe commented Aug 16, 2017

cdaringe commented Aug 16, 2017

Timer commented Aug 16, 2017 • edited Loading

cdaringe commented Aug 16, 2017 • edited Loading

Timer commented Aug 16, 2017

Timer commented Aug 16, 2017 • edited Loading

MattMorgis commented Aug 21, 2017 • edited Loading

prigara commented Aug 22, 2017

MattMorgis commented Aug 22, 2017

MattMorgis commented Aug 22, 2017 • edited Loading

rsmolkin commented Aug 31, 2017 • edited Loading

MattMorgis commented Sep 1, 2017 • edited Loading

kriim commented Sep 17, 2017

TheTFo commented Oct 7, 2017 • edited Loading

MattMorgis commented Oct 8, 2017

TheTFo commented Oct 8, 2017 via email

TheTFo commented Oct 8, 2017

TheTFo commented Oct 16, 2017

avantgardnerio commented Nov 14, 2017

valoricDe commented Nov 14, 2017

geowarin commented Sep 6, 2016 •

edited

Loading

wdhorton commented Sep 7, 2016 •

edited

Loading

kentcdodds commented Sep 7, 2016 •

edited

Loading

wdhorton commented Sep 7, 2016 •

edited

Loading

maximderbin commented Sep 8, 2016 •

edited

Loading

cdaringe commented Dec 17, 2016 •

edited

Loading

cdaringe commented Jan 6, 2017 •

edited

Loading

Timer commented Aug 16, 2017 •

edited

Loading

Timer commented Aug 16, 2017 •

edited

Loading

cdaringe commented Aug 16, 2017 •

edited

Loading

Timer commented Aug 16, 2017 •

edited

Loading

MattMorgis commented Aug 21, 2017 •

edited

Loading

MattMorgis commented Aug 22, 2017 •

edited

Loading

rsmolkin commented Aug 31, 2017 •

edited

Loading

MattMorgis commented Sep 1, 2017 •

edited

Loading

TheTFo commented Oct 7, 2017 •

edited

Loading