调试 Jest 单元测试
在前端开发中，单元测试是不可或缺的一部分。Jest 是一个流行的 JavaScript 测试框架，它可以帮助我们轻松地编写测试用例。然而，当测试用例失败时，我们需要调试并找出问题所在。本文将介绍如何在 Jest 中调试单元测试。
- 在命令行中运行测试用例
在执行 Jest 测试时，我们可以通过在命令行中添加 --runInBand 标志来运行测试用例。这将使 Jest 在一个进程中逐个运行测试用例，而不是并行运行所有测试用例，这非常有助于调试问题。
$ jest --runInBand
- 在测试用例中添加断点
断点可以帮助我们在代码执行时停止程序，并查看变量的值以及代码执行路径。我们可以在测试用例中添加 debugger 语句来设置断点。例如，在以下测试用例中，我们在变量 result 被赋值之前添加了一个断点：
test('adds 1 + 2 to equal 3', () => {
const result = sum(1, 2);
debugger;
expect(result).toBe(3);
});当我们运行测试用例时，它将在 debugger 语句处停止，并打开调试器。我们可以使用 Chrome 浏览器中的 DevTools 调试器，在 Sources 面板中找到 App.test.js 文件，并在此处设置断点。
- 使用 VS Code 调试器调试单元测试
除了在浏览器中使用 DevTools 调试器之外，我们还可以使用 VS Code 内置的调试器来调试 Jest 单元测试。
首先，确保已在项目中安装了以下依赖项：
jest：Jest 测试框架jest-cli：用于在命令行中运行 Jest 测试的 CLI 工具vscode-jest：VS Code 插件，用于与 Jest 进行集成
然后，在 VS Code 中创建一个文件 .vscode/launch.json，并添加以下配置：
-- -------------------- ---- -------
-
---------- --------
----------------- -
-
------- ------ ---- -------
------- -------
---------- ---------
-------------------- --------------------------------------------
------- ----------------
---------- ---------------------
------------------------- -----------
-
-
-这个配置文件告诉 VS Code 在调试模式下运行 Jest 测试，并停止在 debugger 语句处。
最后，打开我们的测试用例文件，单击代码左侧的行数，设置断点。然后，单击 VS Code 工具栏中的调试按钮，即可开始调试测试用例。
总结
在编写和调试 Jest 测试时，我们可以使用命令行、浏览器开发工具或 VS Code 调试器。无论我们选择哪种方法，我们都可以使用断点来查看代码执行路径和变量值。在测试用例失败时，这些工具对于提高效率和准确性非常重要。
示例代码：
// App.js
export function sum(a, b) {
return a + b;
}-- -------------------- ---- ------- -- ----------- ------ - --- - ---- -------- ---------- - - - -- ----- --- -- -- - ----- ------ - ------ --- --------- ----------------------- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6498f7bb48841e98945e6eac