调试测试

有几种方法可以为您的 Jest 测试设置调试器。我们将介绍在 Chrome 和 Visual Studio Code 中进行调试。

在 Chrome 中调试测试

在项目 package.json 文件的 scripts 部分添加以下内容

"scripts": {
    "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache"
  }

在任何测试中放置 debugger; 语句并运行

$ npm run test:debug

这将开始运行您的 Jest 测试，但在执行之前暂停，以允许调试器附加到进程。

在 Chrome 中打开以下内容

about:inspect

打开该链接后，将显示 Chrome 开发者工具。选择您进程上的 inspect，将在 react 脚本的第一行设置断点（这样做是为了让您有时间打开开发者工具，并防止 Jest 在您有时间操作之前执行）。单击屏幕右上角看起来像“播放”按钮的按钮以继续执行。当 Jest 执行包含调试器语句的测试时，执行将暂停，您可以检查当前范围和调用堆栈。

注意：--runInBand 命令行选项确保 Jest 在同一进程中运行测试，而不是为单个测试生成进程。通常 Jest 会在进程之间并行运行测试，但同时调试多个进程很困难。

在 Visual Studio Code 中调试测试

对 Visual Studio Code 的 Jest 测试调试开箱即用。

使用以下 launch.json 配置文件

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