Today I Learned

Use debugger in jest tests

Normally debugger does not stop test execution and allow us to check the application when running jest tests. However we can do it by passing --inspect flag to node and using chrome devtools for node.

Step 1

When using CRA add to your package.json scripts:

"test:debug": "react-scripts --inspect test --runInBand --no-cache",

When not using CRA add to your package.json scripts:

"test:debug": node --inspect node_modules/.bin/jest --runInBand

Step 2

In Chrome open chrome://inspect and click Open dedicated DevTools for Node you should see new inspector window open. (do not close it)

Step 3

Add debugger keyword in the tested code/component.

Step 4

Run npm run test:debug

And there it is. In a moment in the open inspector window, you should see test executions stopped at your breakpoint.

You could also use debugger in terminal or your IDE. More info in the article and node docs