how to debug jest unit tests on create-react-app?

Question

I use create-react-app and I would like to debug my unit tests

as Jest documentation says, debugging is possible using this command:

node --debug-brk --inspect ./node_modules/.bin/jest -i [any other arguments here]

unfortunately, it's not working with create-react-app. I got this error instead:

node --debug-brk --inspect ./node_modules/.bin/jest -i
Debugger listening on port 9229.
Warning: This is an experimental feature and could change at any time.
To start debugging, open the following URL in Chrome:
    chrome-devtools://devtools/remote/serve_file/@60cd6e859b9f557d2312f5bf532f6aec5f284980/inspector.html?experiments=true&v8only=true&ws=localhost:9229/node
Debugger attached.
module.js:457
    throw err;
    ^

Error: Cannot find module '/Users/asafkatz/dev/newmaps/node_modules/.bin/jest'
    at Function.Module._resolveFilename (module.js:455:15)
    at Function.Module._load (module.js:403:25)
    at Timeout.Module.runMain [as _onTimeout] (module.js:590:10)
    at tryOnTimeout (timers.js:232:11)
    at Timer.listOnTimeout (timers.js:202:5)
Waiting for the debugger to disconnect...

what is the proper way to debug jest unit test on create-react-app?

Answer 1

The create react app documentation has documentation on how to debug tests.

https://create-react-app.dev/docs/debugging-tests/

In summary, all you have to do is add this to your package.json

"scripts": {
"test:debug": "react-scripts --inspect-brk test --runInBand --no-cache"
}

place a debugger; statement in your test and run

$ npm run test:debug