VSCode: How to debug current Jest test file

Question

How to launch jest in debug mode on the current opened file, and only this one, regardless of the OS (windows, linux, mac).

The problem:

When using vscode under windows, it is impossible to jest the current (active) file, and only this one.

This debug config (from https://github.com/microsoft/vscode-recipes/tree/master/debugging-jest-tests):

{
      "type": "node",
      "request": "launch",
      "name": "Jest Current File",
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "args": [
        "${fileBasenameNoExtension}",
        "--config",
        "jest.config.js"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "disableOptimisticBPs": true,
      "windows": {
        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
      }
    }

Will not run only the active test if you have several tests with the same name (like index.test.js)

If I replace

    "args": [
        "${fileBasenameNoExtension}",
        ....
    ]

by

    "args": [
        "${file}",
        ...
    ]

It will not work at all as the first argument jest expects is a regex and ${file} returns the absolute path of the file, which, on a windows machine will contain \ backslashes which in turn will be interpreted as escaping the following chars in the pattern.

After reading carefully Jest's doc, it's impossible to specify a single file.

And VSCode is unable to convert a variable to a regexp.

The solution from this question, although almost similar, will not work either as it fails with files of the same name (case 1).

So either more tests than expected are run, or no test at all is run.

I've found a solution involving a separate script but any other solution would be appreciated.

Answer 1

Taken from here: https://github.com/Lemoncode/jest-vs-code-debugging-example/blob/master/custom-solution-config-package-json/01-implemented/.vscode/launch.json

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

Answer 2

The accepted answer provides launch tasks to run all tests, watch all tests or watch a single file. If you just want to run the tests in the current file then the --testPathPattern option is what you want:

{
  "type": "node",
  "request": "launch",
  "name": "Jest debug current file",
  "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
  "args": ["--verbose", "-i", "--no-cache", "--testPathPattern", "${fileBasename}"],
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen"
}

This does have the problem that similarly named files may be run by mistake, as ${fileBasename} is just the filename - it doesn't match the path at all.

On reflection this isn't a terribly good answer. I'm going to leave it up, more as a warning than as something helpful.

Answer 3

I don't think ${relativeFile} will work as it gives the relatvie path that Jest doesn't like either.

Instead, you should use ${fileBasename}

"args": [
   ...,
   "${fileBasename}"
]

Answer 4

The solution mentionned in the above question (involves a separate script):

debug configuration:

{
    "type": "node",
    "request": "launch",
    "name": "Jest Current File",
    "program": "${workspaceFolder}/src/utils/betterJestCli.js",
    "args": [
        "${relativeFile}",
    ],
    "console": "integratedTerminal",
    "internalConsoleOptions": "neverOpen",
    "disableOptimisticBPs": true,
    "windows": {
        "program": "${workspaceFolder}/src/utils/betterJestCli.js",
    },
    "cwd": "${workspaceFolder}",
},

betterJestCli.js:

const { exec } = require('child_process');

const path = process.argv[2];
const child = exec(
    ['"./node_modules/.bin/jest"', path.replace(/\\/g, '/'), '--config', 'jest.config.js'].join(' '),
    // eslint-disable-next-line prefer-arrow-callback, func-names
    function (error/* , stdout, stderr */) {
        if (error) {
            // eslint-disable-next-line no-console
            console.log(error);
        }
    }
);
// to see Jest's output
child.stderr.pipe(process.stderr);

So replacing \ by / on a relative path does the trick since / has no meaning from a regex point of view (escaping the . would be a good idea too).

The biggest issue is that I lose Jest's output colors in the terminal.

It's not yet tested under different environment (linux, mac) so I don't know if it's cross env.

Any other ideas?

Answer 5

I am using the following debug config in VSCode to run the current jest file

{
  "name": "Debug Current Jest File",
  "type": "node",
  "request": "launch",
  "program": "${workspaceFolder}/node_modules/jest/bin/jest",
  "args": [
    "--runTestsByPath",
    "${relativeFileDirname}/${fileBasename}"
  ],
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "port": 9229
}

Tested it on Windows and WSL (Ubuntu-18), not sure about mac.