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

Question

如何在当前打开的文件上以调试模式启动 jest，并且仅此一个，无论操作系统如何（windows、linux、mac）。

问题：

windows下使用vscode时，无法调侃当前（活动）文件，只能调侃这一个。

此调试配置（来自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 无法将变量转换为正则表达式。

这个问题的解决方案虽然几乎相似，但也不起作用，因为它对同名文件失败（情况1）。

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

我找到了一个涉及单独脚本的解决方案，但任何其他解决方案将不胜感激。

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

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} 只是文件名 - 它根本与路径不匹配。

仔细想想，这并不是一个非常好的答案。我将把它保留下来，更多的是作为警告，而不是作为有用的东西。

Answer 3

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

调试配置：

{
    "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）下进行测试，所以我不知道它是否是跨环境的。

还有其他想法吗？