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

【问题标题】：VSCode: How to debug current Jest test fileVSCode：如何调试当前的 Jest 测试文件
【发布时间】：2020-01-16 20:10:04
【问题描述】：

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

问题：

windows下使用vscode时，无法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）。

所以要么运行比预期更多的测试，要么根本不运行任何测试。

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

【问题讨论】：

标签： windows visual-studio-code jestjs

【解决方案1】：

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

调试配置：

{
    "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）下测试过，所以不知道是不是cross env。

还有其他想法吗？

【讨论】：

请发布以防您找到任何替代解决方案，而不是编写全新的脚本以使其工作。

【解决方案2】：

我认为 ${relativeFile} 不会起作用，因为它提供了 Jest 也不喜欢的相关路径。

相反，您应该使用 ${fileBasename}

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

【讨论】：

【解决方案3】：

取自这里：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/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/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/bin/jest",
      "args": [
        "${fileBasename}",
        "--verbose",
        "-i",
        "--no-cache",
        "--watchAll"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

【讨论】：

【解决方案4】：

接受的答案提供启动任务以运行所有测试、观看所有测试或观看单个文件。如果您只想在当前文件中运行测试，那么 --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} 只是文件名 - 它根本不匹配路径。

经过反思，这不是一个非常好的答案。我将把它搁置一旁，与其说是有用的东西，不如说是警告。

【讨论】：

【解决方案5】：

我在 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。

【讨论】：