-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
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
Docs: How to Debug Unit Tests #2992
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -64,6 +64,7 @@ You can find the most recent version of this guide [here](https://github.com/fac | |
- [Disabling jsdom](#disabling-jsdom) | ||
- [Snapshot Testing](#snapshot-testing) | ||
- [Editor Integration](#editor-integration) | ||
- [Debugging Tests](#debugging-tests) | ||
- [Developing Components in Isolation](#developing-components-in-isolation) | ||
- [Getting Started with Storybook](#getting-started-with-storybook) | ||
- [Getting Started with Styleguidist](#getting-started-with-styleguidist) | ||
|
@@ -1479,6 +1480,73 @@ If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest | |
|
||
![VS Code Jest Preview](https://cloud.githubusercontent.com/assets/49038/20795349/a032308a-b7c8-11e6-9b34-7eeac781003f.png) | ||
|
||
## Debugging Tests | ||
|
||
There are various ways to setup a debugger for your Jest tests. We cover debugging in Chrome and Visual Studio Code. | ||
|
||
### Chrome & Node Inspector | ||
|
||
Download [Node Inspector](https://github.com/node-inspector/node-inspector) or similar debugger | ||
|
||
```bash | ||
npm install -g node-inspector | ||
``` | ||
|
||
Place `debugger;` statements in any test and run | ||
|
||
macOS/Linux | ||
```bash | ||
node node_modules/.bin/react-scripts --inspect-brk test --runInBand --env=jsdom | ||
``` | ||
|
||
Windows | ||
```bash | ||
node node_modules/bin/react-scripts --inspect-brk test --runInBand --testPathIgnorePatterns=ui-tests/* --env=jsdom | ||
``` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. On a general note: instead of a Terminal command, can we suggest adding
to There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah, that is much cleaner. Updated! |
||
|
||
This will start running your Jest tests, but pause before executing to allow a debugger to attach to the process. | ||
|
||
To attach the `node-inspector` debugger, run: | ||
``` | ||
node-inspector | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm a bit out of touch but I had an impression that There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice! I had no idea, just gave it a shot and you are correct. Updating this! |
||
``` | ||
|
||
This will output a link that you can open in Chrome. After opening that link, the Chrome Developer Tools will be displayed, and a breakpoint will be set at the first line of the Jest CLI script (this is done simply to give you time to open the developer tools and to prevent Jest from executing before you have time to do so). Click the button that looks like a "play" button in the upper right hand side of the screen to continue execution. When Jest executes the test that contains the debugger statement, execution will pause and you can examine the current scope and call stack. | ||
|
||
>Note: the --runInBand cli option makes sure Jest runs test in the same process rather than spawning processes for individual tests. Normally Jest parallelizes test runs across processes but it is hard to debug many processes at the same time. | ||
|
||
### Visual Studio Code | ||
|
||
Debugging Jest tests for `create-react-app` is supported out of the box for [Visual Studio Code](https://code.visualstudio.com). | ||
|
||
Use the following [`launch.json`](https://code.visualstudio.com/docs/editor/debugging#_launch-configurations) configuration file: | ||
``` | ||
{ | ||
"version": "0.2.0", | ||
"configurations": [ | ||
{ | ||
"name": "Debug CRA Tests", | ||
"type": "node", | ||
"request": "launch", | ||
"runtimeExecutable": "${workspaceRoot/node_modules/.bin/react-scripts", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Missing There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks! |
||
"runtimeArgs": [ | ||
"--inspect-brk", | ||
"test" | ||
], | ||
"args": [ | ||
"--runInBand", | ||
"--no-cache", | ||
"--env=jsdom" | ||
], | ||
"cwd": "${workspaceRoot}", | ||
"protocol": "inspector", | ||
"console": "integratedTerminal", | ||
"internalConsoleOptions": "neverOpen" | ||
} | ||
] | ||
} | ||
``` | ||
|
||
## Developing Components in Isolation | ||
|
||
Usually, in an app, you have a lot of UI components, and each of them has many different states. | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What is
ui-tests/*
? Seems like that shouldn't be here.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Whoops, good catch. Fixed.