From 79554e4c61bb5f09ccbc7817b8d6cae32d0c4b36 Mon Sep 17 00:00:00 2001 From: "Morgis, Matt (ELS-PHL)" Date: Tue, 22 Aug 2017 09:02:38 -0400 Subject: [PATCH 1/4] docs: adding section about debugging tests --- packages/react-scripts/template/README.md | 68 +++++++++++++++++++++++ 1 file changed, 68 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index c55ccdf949f..b6934f7bbf7 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -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 +``` + +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 +``` + +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", + "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. From abc6143637b160053468f5c57bb826b7c3b5e255 Mon Sep 17 00:00:00 2001 From: Matt Morgis Date: Thu, 31 Aug 2017 18:51:08 -0400 Subject: [PATCH 2/4] docs: removing node-inspector references --- packages/react-scripts/template/README.md | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index b6934f7bbf7..a7cde8e1c39 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1484,13 +1484,7 @@ If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest 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 -``` +### Chrome Place `debugger;` statements in any test and run @@ -1506,12 +1500,12 @@ node node_modules/bin/react-scripts --inspect-brk test --runInBand --testPathIgn 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: +Open the following in Chrome ``` -node-inspector +about:inspect ``` -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. +After opening that link, the Chrome Developer Tools will be displayed. Select `inspect` on your process and a breakpoint will be set at the first line of the react 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. @@ -1528,7 +1522,7 @@ Use the following [`launch.json`](https://code.visualstudio.com/docs/editor/debu "name": "Debug CRA Tests", "type": "node", "request": "launch", - "runtimeExecutable": "${workspaceRoot/node_modules/.bin/react-scripts", + "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts", "runtimeArgs": [ "--inspect-brk", "test" From b03b7b1b334b4ef18609ec299183f0bf3122cf9e Mon Sep 17 00:00:00 2001 From: Matt Morgis Date: Sun, 3 Sep 2017 14:02:33 -0400 Subject: [PATCH 3/4] docs: replacing terminal command with npm script --- packages/react-scripts/template/README.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index a7cde8e1c39..159b49e881d 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1486,16 +1486,15 @@ There are various ways to setup a debugger for your Jest tests. We cover debuggi ### Chrome -Place `debugger;` statements in any test and run - -macOS/Linux -```bash -node node_modules/.bin/react-scripts --inspect-brk test --runInBand --env=jsdom +Add the following to the `scripts` section in your project's `package.json` +```json +"scripts": { + "test:debug": "react-scripts --inspect-brk test --runInBand --env=jsdom" + } ``` - -Windows +Place `debugger;` statements in any test and run: ```bash -node node_modules/bin/react-scripts --inspect-brk test --runInBand --testPathIgnorePatterns=ui-tests/* --env=jsdom +$ npm run test:debug ``` This will start running your Jest tests, but pause before executing to allow a debugger to attach to the process. @@ -1509,7 +1508,7 @@ After opening that link, the Chrome Developer Tools will be displayed. Select `i >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 Tests in Visual Studio Code Debugging Jest tests for `create-react-app` is supported out of the box for [Visual Studio Code](https://code.visualstudio.com). From 96db59e022ee00e8069e8b2ba3435688e7a7a91b Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 14 Nov 2017 08:04:33 -0500 Subject: [PATCH 4/4] Update README.md --- packages/react-scripts/template/README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 159b49e881d..d36e71f845a 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1482,9 +1482,11 @@ If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest ## Debugging Tests -There are various ways to setup a debugger for your Jest tests. We cover debugging in Chrome and Visual Studio Code. +There are various ways to setup a debugger for your Jest tests. We cover debugging in Chrome and [Visual Studio Code](https://code.visualstudio.com/). -### Chrome +>Note: debugging tests requires Node 8 or higher. + +### Debugging Tests in Chrome Add the following to the `scripts` section in your project's `package.json` ```json @@ -1510,7 +1512,7 @@ After opening that link, the Chrome Developer Tools will be displayed. Select `i ### Debugging Tests in Visual Studio Code -Debugging Jest tests for `create-react-app` is supported out of the box for [Visual Studio Code](https://code.visualstudio.com). +Debugging Jest tests 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: ```