Create-react-app: Document how to debug unit tests

[gaearon]

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]

I can work on this.

[gaearon]

:+1:

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]

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

[kentcdodds]

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

[kentcdodds]

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

[geowarin]

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]

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]

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]

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]

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]

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]

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

[maximderbin]

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]

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

[asfktz]

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

[cdaringe]

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]

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

[gaearon]

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

You can apply some heat by submitting a PR. 😉

[cdaringe]

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

[cdaringe]

got it, PR comin' in hot!

[gaearon]

Awesome

[designbyadrian]

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

[thg303]

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

[Codier]

adding heat to this issue. Have been banging my head on this for a while

[Pitmov]

Same for me

[jaynsw]

It is really crazy when a test can not pass and no way to output any information or debugging by node-inspector....

please help...

[avantgardnerio]

This affects me daily. I had it working in 2016, but can't set a breakpoint now to save my life. Debugging is a major part of my workflow. Yes, I can submit a PR... when this costs me enough to justify a fix, which working in a foreign codebase of a transitive dependency would have to be pretty bad.

[LVCarnevalli]

1 Solution:

Configure launch.json in VS Code:

{
            "name": "Debug Jest",
            "type": "node",
            "request": "launch",
            "runtimeArgs": [
                "--debug-brk",
                "node_modules/react-scripts/scripts/test.js",
                "--runInBand",
                "--env=jsdom"
            ],
            "cwd": "${workspaceRoot}"
}

Open test file and press F5.

2 Solution:

Add "debbuger" in code and execute:

node debug node_modules/react-scripts/scripts/test.js --runInBand --env=jsdom

[Timer]

If you're using VS Code you should probably use the --inspect protocol and Node >= 8.4.0.

[gaearon]

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): https://github.com/facebook/jest/issues/1652. The Jest issue was blocked by a Node issue (as you can see by reading that thread): https://github.com/nodejs/node/issues/7593. And as you can see somebody finally solved it in Node 8.4 just about now: https://github.com/facebook/jest/issues/1652#issuecomment-322607349.

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]

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]

The following should also work (?):

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

https://github.com/facebookincubator/create-react-app/pull/2041 should turn making npm test -- --inspect (or npm test -- --inspect --inspect-brk) "alias" the above command (automatically toggling runInBand).

[cdaringe]

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 :rotating_light: _hack_ :rotating_light: 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]

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

[Timer]

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]

i did not! i tested on 1.0.10! :)

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

[Timer]

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]

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]

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]

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]

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

[MattMorgis]

@prigara Got the party started with this PR.

[rsmolkin]

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

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

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

That might be worth mentioning.

[TheTFo]

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]

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

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 [e-mail] 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
https://github.com/facebookincubator/create-react-app/issues/594#issuecomment-334976149,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAgWoKDZ6mcayuM_9fTwAKMVOj9u1TEvks5sqCLWgaJpZM4J1890
.

[TheTFo]

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]

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

Thanks again!

[avantgardnerio]

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

[valoricDe]

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