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
recommends adding a second, debug-specific test command to your
package.json:
"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.