Debugging Jest on VS Code

Question

I\'m trying to debug Jest unit tests using VS Code. I have the following config file settings

\"configurations\": [
    {
        \"name\": \"Debug Jest Te         


        

Answer 1

I am using launch.json based on https://www.basefactor.com/using-visual-studio-code-to-debug-jest-based-unit-tests article, in particular example https://github.com/Lemoncode/jest-vs-code-debugging-example/blob/master/custom-solution-jest-config-file/01-implemented/.vscode/launch.json

The section of launch.json to debug single test (assuming that the configuration is located in ./config/test/jest.json):

{
  "type": "node",
  "request": "launch",
  "name": "Jest debug current file",
  "program": "${workspaceFolder}/node_modules/jest/bin/jest",
  "args": [
    "${fileBasename}",
    "-c",
    "./config/test/jest.json",
    "--verbose",
    "-i",
    "--no-cache",
    //"--watchAll"
  ],
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen"
}

Answer 2

About debugging Jest unit tests using VSCode, create a the following file (path: .vscode/launch.json)

If you have created your app using create-react-app

  {
      "version": "0.2.0",
      "configurations": [
        {
          "name": "Debug tests watch mode",
          "type": "node",
          "request": "launch",
          "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
          "args": ["test", "--runInBand", "--no-cache", "--watchAll=true"],
          "cwd": "${workspaceRoot}",
          "protocol": "inspector",
          "console": "integratedTerminal",
          "internalConsoleOptions": "neverOpen"
        }
      ]
    }

If you have created your app from scratch:

   {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "node",
          "request": "launch",
          "name": "Jest watch all tests",
          "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
          "args": [
            "--verbose",
            "-i",
            "--no-cache",
            "--watchAll"
          ],
          "console": "integratedTerminal",
          "internalConsoleOptions": "neverOpen"
        }
      ]
    }

There are more configurations available, if you need more info check out:

• Step by step guide (post)
• Create react app official guide
• Microsoft official guide

Answer 3

@tmp dev, if you simply change runtimeArgs to args in your configuration, it would work:

"configurations": [
    {
        "name": "Debug Jest Tests",
        "type": "node",
        "request": "launch",
        "args": [
            "${workspaceRoot}/node_modules/jest/bin/jest.js",
            "--runInBand"
        ],
        "console": "integratedTerminal",
        "internalConsoleOptions": "neverOpen"
    }
]

runtimeArgs is to runtimeExecutable as args is to program. As you are launching Jest directly with node, in this case you should use args passing arguments to node. See the Nodejs debugging docs and this ticket for more details.

[2nd way] Specify the actual program to run:

  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Jest Test",
      "program": "${workspaceFolder}/node_modules/jest/bin/jest",
      "args": ["--runInBand", "--config=${workspaceFolder}/jest.config.js"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]

[3rd way] If you would like to launch the debugger via npm (which is a runtimeExecutable), and your package.json looks like this:

{
  "scripts": {
    "test:unit:debug": "node --inspect-brk=9229 ./node_modules/jest/bin/jest.js --no-cache --runInBand"
  },
  ...
}

You can launch the debugger using runtimeArgs like this in VS Code:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch via npm",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "test:unit:debug"],
      "port": 9229
    }
  ]
}

Answer 4

I can't answer the precise question, however this basic launch config for debugging Jest works for me, it's also simple to include Jest skip files

    {
      "type": "node",
      "request": "launch",
      "name": "Jest",
      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
      "args": [
          "-i"
      ],
       "skipFiles": [
        "<node_internals>/**/*.js", "node_modules",
      ]
    },