2

I got a failing javascript jest test on my hands and so, I have used the usual stuff to debug: node-debug --nodejs --harmony ./node_modules/jest-cli/bin/jest.js --runInBand

So, it actually works but with all the babel-jest black magic going behind the scene, I cannot get to see the original code and to get the debugger to navigate through it properly. I only get one of those horrible one-liners we all hate, or sometimes get stuck in the calling function in the debugger (tried chrome dev tools and visual studio code). So, is there a way to generate a usable js map and use it to debug jest test? Do I have to navigate only by watching the call stack and by guessing where I am in my piece of code?

Anton Sarov
  • 3,712
  • 3
  • 31
  • 48
Loïc Lacombe
  • 88
  • 8

1 Answers1

2

This question is already quite old, so much has changed. For a recent adventure of Jest debugging that led to a solution read my post:

Debugging Jest unit tests with breakpoints in VS Code with React Native

In short it boils down to this:

  1. Do not use NodeJS v8.* yet! This was the main problem. inspector protocol is not production-ready.
    • I downgraded from 8.1.2 to 7.10.1
  2. I used the Ignite CLI to bootstrap the project with the default ignite-ir-boilerplate
    • But you can use any boilerplate you want, if not using React Native or having different preferences. Most boilerplates generate source maps by default.

  3. I used the Visual Studio Code debugger v1.13.1 and then set the following 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
}

That's it. You can set breakpoints in app code, node_modules and in your unit tests.

Arnold Schrijver
  • 3,588
  • 3
  • 36
  • 65