How to debug comic unit tests for create-react-app?

Question

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

as Jest documentation says debugging is possible with this command:

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

Unfortunately, it does not work with create-react-app. Instead, I got this error:

 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 correct way to debug a jest unit test in a create-react-app?

Answer 1

Running jest with Chrome DevTools seems problematic (see this issue ).

Problem:

You can start the node debugger using the new V8 Inspector protocol using the above command lines (adjust jest path):

 node --debug-brk --inspect ./node_modules/.bin/jest --runInBand 

Value:

 # node params --debug-brk: start debugger, expose external interface, and break at the first line --inspect: use the new V8 Inspector protocol in the debugger # jest params --runInBand: do not fork (make it debuggable) 

You can then use Google Chrome and connect to this URL or use this useful extension to do this automatically for you.

Unfortunately, debugger; calls are currently in debugger; in the test code will not be taken into account.

Workaround

To work around this problem, you can currently download a GUI debugger that is compatible with the regular V8 protocol, such as Visual Studio Code . To use it, you must run the node debugger without the --inspect flag:

 node --debug-brk ./node_modules/.bin/jest --runInBand 

Then from VCS you can go to the project folder, enter the "Debugging" section, create standard debugging configurations and launch the Attach to Process configuration.

Answer 2

If you are using visual studio code, you can use the following configuration. Hope this helps someone a few hours.

My setup:

• Project with failed project create-react-app (1.3.1)
• Node version: v6.10.3
• Npm Version: 4.6.1

To get this working, I also needed to install jest-file and jest-css using npm i --save-dev jest-file jest-css . They are used as file transformers, so the joke does not complain about importing files, such as svg.

launch.json

 { "version": "0.2.0", "configurations": [ { "name": "Test with debugger", "type": "node", "request": "launch", "port": 5858, "runtimeArgs": [ "--debug-brk", "--nolazy" ], "program": "${workspaceRoot}/node_modules/jest/bin/jest.js", "args": [ "--runInBand", "--transform={\"^.+\\\\.(js|jsx)$\": \"babel-jest\",\"^.+\\\\.css$\": \"jest-css\",\"^(?!.*\\\\.(js|jsx|css|json)$)\": \"jest-file\"}" ], "cwd": "${workspaceRoot}" } ] } 

Explanation

- nolazy: fully compile code so that we can use breakpoints correctly

- runInBand: stop Jest from spawning tests in workflows

- transform: stop errors when importing files such as svg. If you add this to package.json, the response scripts will not let you run npm test because it does not support overwriting conversion parameters.

The following lines should be added to package.json or .babelrc

 "babel": { "sourceMaps": "inline", "presets": [ "react-app" ] } 

Explanation

sourceMaps: it must be either "inline" or "both." If you do not install this, when debugging the tests, you will see the rewritten code instead of the source.

presets: react-app is the default preset for the create-react-app project. If you do not include this in package.json or .babelrc, you will get errors because jest will not know how to handle jsx.

Result

If you are not using visual studio code , you can run the following command and connect to the debugging session using another GUI debugger: node --debug-brk ./node_modules/jest/bin/jest.js --runInBand --config=./jest-config.json . Just remember to set the below configuration in the jest-config.json :

 "transform": { "^.+\\.(js|jsx)$": "babel-jest", "^.+\\.css$": "jest-css", "^(?!.*\\.(js|jsx|css|json)$)": "jest-file" } 

Answer 3

create-react-app puts its node_modules (and therefore shushu) in another place. Try the following:

node --debug-brk --inspect ./node_modules/react-scripts/node_modules/.bin/jest -i

If this does not work, just search the project folders for the file named jest and update the path.

Answer 4

I also use VSCode, and in 2018 the above configuration did not work for me. I finally got it to work using this configuration in launch.json:

  { "name": "Debug CRA Tests", "type": "node", "request": "launch", "port":9229, "runtimeExecutable": "${workspaceRoot}/main/node_modules/.bin/react-scripts", "runtimeArgs": [ "--inspect-brk", "test" ], "args": [ "--runInBand", "--no-cache", "--env=jsdom" ], "cwd": "${workspaceRoot}/main", "protocol": "inspector", "console": "integratedTerminal", "internalConsoleOptions": "neverOpen" }, 

Note that I have / main after the value of workspaceRoot, this may be different for you, since my project is called main. This should be the location of your project root.

In addition, before moving on to my tests, errors that were not related to my code were thrown. To fix this, I needed to go to the debugger tab at breakpoints and uncheck the boxes for uncaught exceptions and module.js.

After I went through these steps, now I can debug my unit tests, set breakpoints in them, etc., but it still doesn't work as well as I would like. For example, it launches an additional command line in the terminal, and there are other minor oddities. But it works well enough to do the job.