Debugging Jest unit tests with breakpoints in VS C

Question

I created a React Native project using the popular Ignite CLI v2.0.0 with the default boilerplate. Then I adorned it with a bunch of nodejs shims, because I'll have some node-based dependencies. Everything is working and I can run the Jest tests from the command line. So far, so good.

However, now one of my unit tests is timing out. This is probably due to an async call failing that invokes a mocked out node function. But there is no information on error, location, etc.

So I want to debug using Visual Studio Code v1.13.1 and here problem starts. I can't for the life of me figure out how to configure this so I can set breakpoints both in the tests as in the app code + node_modules.

I have installed the 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 no breakpoints are hit. VS says: Breakpoint ignored because generated code not found (source map problem?). (btw: both index.android.bundle and index.android.map have just been generated in .vscode/.react). And also I don't see a way to debug through the test code (which lives in ${projectRoot}/Tests).

Based on much googling 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 test report in the VS debug console, but once again no breakpoint anywhere gets hit.

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

Can anyone please point me in the right direction?

PS. I am 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 the solution. It seems there are still a number of issues with the new inspector protocol in Node 8.*. In short the support for --inspect is still quite experimental.

For example the NodeJS Inspector Manager (NiM 0.13.8) was crashing and disconnecting websocket after few second (See: NiM Github issue #17 and Chromium bug #734615).

So I downgraded NodeJS 8.1.2 --> 7.10.1

Now finally things work as expected. I can do all debugging in VS code, hit all the 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
    }

Wasted more than a day on something that should be a 5 min. no-brainer. But luckily its working now!