Jest 中打断点进行 debug

Jest 是一个由 Facebook 开发维护的 JavaScript 测试工具，常用于前端开发中对代码的自动化测试。在测试前端代码时，我们常常需要 debug 以帮助我们找到问题。本文将介绍如何在 Jest 中打断点进行 debug，以及如何在调试中使用 Jest。

在 Jest 中使用断点调试，我们需要使用 Node.js 中内置的 --inspect-brk 参数打开 Chrome 开发者工具。

打开 Chrome 开发者工具

在运行 Jest 命令时，传入 --inspect-brk 参数打开 Chrome 开发者工具。例如：

node --inspect-brk ./node_modules/.bin/jest

其中，./node_modules/.bin/jest 是 Jest 的执行命令路径。

此时，我们可以在 Chrome 中输入 chrome://inspect 进入开发者工具界面：

点击 “Open dedicated DevTools for Node” 进入 Node.js 调试环境：

在代码中设置断点

在代码中设置断点，我们需要使用 debugger 关键字。例如：

function test() {
  const a = 1;
  debugger;
  const b = 2;
  return a + b;
}

test();

在上述代码中，我们使用 debugger 关键字在第 3 行设置了断点。

运行 Jest

现在我们可以运行 Jest 了。在运行 Jest 时，我们可以指定要运行的测试文件：

node --inspect-brk ./node_modules/.bin/jest ./tests/example.test.js

此时，程序会在第 3 行的 debugger 处暂停，我们在 Chrome 的调试工具中就可以便捷地进行调试了。

调试 Jest

在 Jest 运行过程中，我们可以在 Chrome 开发者工具中进行编译后代码的调试。

配置源代码映射

在源代码调试时，我们需要在 Chrome 开发者工具中为 Jest 配置源代码映射。配置步骤如下：

• 打开 Chrome 开发者工具；
• 点击左上角的 “Sources”；
• 在左侧面板中选择 “Webpack”；
• 在右侧面板中勾选 “Local Overrides”；
• 在 “Local Overrides” 中点击 “Select Folder”；
• 选择包含源代码的目录；
• 选择目录后，点击右上角的 “Add folder to workspace”。

配置完映射后，我们就可以在源代码中进行调试了。

在源代码中设置断点

在源代码中设置断点与普通 JavaScript 代码相同。在需要打断点的位置上添加 debugger 关键字即可。

例如：

function test() {
  const a = 1;
  const b = 2;
  debugger;
  return a + b;
}

test();

调试

在设置断点后，我们运行 Jest 后程序会在断点处停下来。此时，我们可以通过 Chrome 开发者工具中的调试工具查看变量、执行表达式、单步跳转等操作。

总结

在 Jest 中打断点进行 debug 可以帮助我们发现问题所在。通过本文介绍的方法，我们可以在 Jest 中打断点，并在 Chrome 开发者工具中进行断点调试。同时，本文也介绍了如何在调试中使用 Jest，希望对读者能有所帮助。

示例代码

-- -------------------- ---- -------
-- ---------------------
---------------- -- -- -
  ---------- ------ --- -- -- -
    -------- ------ -
      ----- - - --
      ---------
      ----- - - --
      ------ - - --
    -

    -----------------------
  ---
---

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64791522968c7c53b05269cc