Debugging Jest unit tests with breakpoints in VS code using React Native

Question

I created a React Native project using the popular Ignite CLI v2.0.0 with the default template . Then I decorated it with a bunch of nodal spacers, because I will have some node dependencies. Everything works, and I can run Jest tests from the command line. So far so good.

However, now one of my unit tests is a timeout. This is probably due to the failure of the asynchronous call that calls the node function. But there is no information about the error, location, etc.

So, I want to debug using Visual Studio v1.13.1 , and here the problem begins. I can’t understand for the rest of my life how to configure this to set breakpoints both in tests and in application code + node_modules .

I installed React Native Tools v0.3.2 and can start the debugger using the default Debug Android configuration:

 [vscode-react-native] Finished executing: adb -s emulator-5554 shell am broadcast -a "com.myexample.RELOAD_APP_ACTION" --ez jsproxy true [vscode-react-native] Starting debugger app worker. [vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application [vscode-react-native] Debugger worker loaded runtime on port 13746 Running application "MyApplication" with appParams: {"rootTag":1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF 

But breakpoints do not fall. VS says: Breakpoint ignored because generated code not found (source map problem?). (btw: both index.android.bundle and index.android.map just been generated in .vscode/.react ). And also I see no way to debug test code (which lives in ${projectRoot}/Tests ).

Based on a large number of search queries, I created another debug configuration for running Jest in VS Code:

  { "type": "node", "request": "launch", "name": "Jest Tests", "program": "${workspaceRoot}/node_modules/jest-cli/bin/jest.js", "args": [ "--config", "package.json", "--runInBand", "--verbose", "--no-cache", "-u" ], "runtimeArgs": [ "--nolazy" ], "console": "internalConsole", "sourceMaps": true, "address": "localhost", "port": 8081, "outFiles": [ "${workspaceRoot}/.vscode/.react" ], "env": { "NODE_ENV": "test" } } 

This at least runs the tests, showing the test report in the VS debugging console, but once again not a single breakpoint hits.

I also tried setting outFiles to the place where ignite generates the package, i.e. ${workspaceRoot}/android/app/build/intermediates/assets/debug/* with the same results.

Can someone point me in the right direction?

PS. I'm on Ubuntu 16.04:

 System platform linux arch x64 cpu 4 cores Intel(R) Core(TM) i7-4500U CPU @ 1.80GHz JavaScript node 8.1.2 /usr/local/bin/node npm 4.6.1 /usr/local/bin/npm yarn 0.24.6 /usr/bin/yarn React Native react-native-cli 2.0.1 app rn version 0.45.1 Ignite ignite 2.0.0 /usr/local/bin/ignite Android java 1.8.0_111 /usr/bin/java android home - undefined 

Answer 1

Finally found a solution. Apparently, there are still a number of problems with the new inspector protocol in Node 8.* . In short, support for --inspect is still pretty experimental.

For example, the NodeJS Inspector Manager (NiM 0.13.8 ) crashes and disconnects the websocket after a few seconds (see NiM Github Issue No. 17 and Chromium # 734615).

So, I downgraded NodeJS 8.1.2 > 7.10.1

Now, finally, everything works as expected. I can do all the debugging in VS code, hit all breakpoints with the following debug configuration:

  { "type": "node", "request": "launch", "name": "Launch Tests", "program": "${workspaceRoot}/node_modules/.bin/jest", "args": [ "--runInBand", "--no-cache" ], "runtimeArgs": [ "--debug-brk=127.0.0.1:5858" ], "port": 5858 } 

Spent more than a day on what should be 5 minutes. no brainer. But, fortunately, it works now!