Add Debug Jest Tests In create-react-app as a react til

README.md

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_655 TILs and counting..._
+_656 TILs and counting..._
 
 ---
 
@@ -450,6 +450,7 @@ _655 TILs and counting..._
 - [Alter The Display Name Of A Component](react/alter-the-display-name-of-a-component.md)
 - [Building A React App In The Browser](react/building-a-react-app-in-the-browser.md)
 - [create-react-app Comes With Lodash](react/create-react-app-comes-with-lodash.md)
+- [Debug Jest Tests In create-react-app](react/debug-jest-tests-in-create-react-app.md)
 - [Defining State In A Simple Class Component](react/defining-state-in-a-simple-class-component.md)
 - [Destructure Variables As Props To A Component](react/destructure-variables-as-props-to-a-component.md)
 - [Dispatch Anywhere With Redux](react/dispatch-anywhere-with-redux.md)

react/debug-jest-tests-in-create-react-app.md

@@ -0,0 +1,24 @@
+# Debug Jest Tests In create-react-app
+
+When you put a `debugger;` statement in one of your Jest tests and
+run `yarn test`, the test runner will ignore the debug statement and run to
+completion. This is because Jest defaults to parallelizing tests which won't
+mix well with manual debugging intervention.
+
+If we want to be able to run our Jest tests through a debugger. We will need
+two things. First, we need a debugging environment -- Chrome's devtools will
+work well for this. Second, we need our tests to run in band. The
+[`react-scripts`
+documentation](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-tests)
+recommends adding a second, debug-specific test command to your
+`package.json`:
+
+```javascript
+"scripts": {
+  "test:debug": "react-scripts --inspect-brk test --runInBand --env=jsdom"
+}
+```
+
+You can now run `yarn test:debug` which will start a paused debug session.
+Open chrome at `chrome://inspect` to access and open the debugging session
+panel. Now, debug away.