VSCode：如何调试当前的Jest测试文件

Question

如何在当前打开的文件上启动jest调试模式，仅限于此文件，无论操作系统（Windows、Linux、Mac）如何。

问题：

在Windows下使用VS Code时，无法对当前（活动）文件进行jest测试，仅限于此文件。

这是从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",
      }
    }

如果你有几个同名测试文件（比如说 index.test.js），那么它不会仅运行当前活动的测试用例。

如果我替换

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

通过

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

作为第一个参数，jest期望的是正则表达式，而${file}返回文件的绝对路径，在Windows机器上，它将包含反斜杠\，这将被解释为模式中后面要转义的字符，因此根本不起作用。

仔细阅读Jest文档后，不可能指定单个文件。

而VSCode无法将变量转换为正则表达式。 this question的解决方案几乎相似，但也行不通，因为它在名称相同的文件（情况1）中失败了。

因此，要么运行的测试比预期的更多，要么根本没有运行测试。

我已经找到了一种涉及单独脚本的解决方案，但欢迎任何其他解决方案。

- remix23

Answer 1

从这里获取：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"
    }
  ]
}

- Dmitry Shvedov

Answer 2

接受的答案提供了启动任务来运行所有测试、观察所有测试或观察单个文件。如果您只想在当前文件中运行测试，则 --testPathPattern 选项就是您需要的：

{
  "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"
}

这种方法的问题在于，文件名相似的文件可能会被错误地运行，因为 ${fileBasename} 只是文件名，它根本不匹配路径。

经过思考，这并不是一个特别好的答案。我将保留它，更多的是作为警告而非有用的东西。

- Edward Woolhouse

Answer 3

我正在使用以下的调试配置在VSCode中运行当前的jest文件。

{
  "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
}

已在Windows和WSL（Ubuntu-18）上测试，不确定是否适用于Mac。

- tgraff

Answer 4

我认为${relativeFile}不可行，因为它提供了Jest不喜欢的相对路径。

相反，你应该使用${fileBasename}。

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

- Marshal

Answer 5

上述问题中提到的解决方案（涉及单独的脚本）： 调试配置：

{
    "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);

将相对路径中的\替换为/就能解决问题，因为从正则表达式的角度来看，/没有特殊含义（转义.也是个好主意）。

最大的问题是终端中丢失了Jest的输出颜色。

尚未在不同环境（Linux、Mac）下进行测试，所以我不知道它是否兼容多个环境。

还有其他的想法吗？

- remix23

---

如果您找到了其他解决方案，而不是编写全新的脚本来使其正常工作，请发表。 - Jimit.Gandhi