在 Jest 测试中如何 debug 断点？-JavaScript中文网-JavaScript教程资源分享门户

什么是 Jest？

Jest 是一个基于 JavaScript 的测试框架，它由 Facebook 编写并维护。它可以在多种 JavaScript 环境下运行，例如浏览器、Node.js、React Native 等，是目前流行的前端测试框架之一。

在 Jest 测试中，你可能会遇到需要使用断点调试的情况。比如你的测试用例运行结果不符合预期，需要排除问题。

下面我们将介绍如何在 Jest 测试中使用断点调试功能。

Jest 提供了集成了 VS Code 插件的命令行工具，这样就可以在 VS Code 中进行断点调试了。

首先你需要安装 Jest 和 VS Code 插件：

npm i jest jest-runner-vscode-debugger --save-dev

安装完成后，你需要在 package.json 中配置 Jest 的调试命令：

{
  "scripts": {
    "test": "jest --runInBand --detectOpenHandles --debug"
  }
}

这里的 --debug 标志将告诉 Jest 使用 VS Code 调试器，--runInBand 标志告诉 Jest 顺序运行测试，以避免并发问题，--detectOpenHandles 标志可检测未关闭的资源，例如未关闭的服务器实例。

接下来你需要在你的测试代码中添加一个断点：

test('debug test', () => {
  const first = 1;
  const second = 2;

  debugger;

  expect(first + second).toBe(3);
});

在这个测试用例中，我们使用了 debugger 关键字来添加一个断点。当 Jest 运行到这个点时，它就会自动启动 VS Code 调试器。

然后你需要打开 VS Code，按下 Ctrl + Shift + D 组合按键打开 VS Code 调试面板。在调试面板中，选择 Jest Tests，然后点击运行按钮就可以进行调试了。

如果你不想安装插件，也可以使用 Node.js 内置的调试器进行断点调试。首先你需要安装 Jest：

npm i jest --save-dev

接下来你需要更新 package.json 中的命令：

{
  "scripts": {
    "test": "node --inspect-brk ./node_modules/.bin/jest"
  }
}

这里的 --inspect-brk 标志告诉 Node.js 使用调试器，./node_modules/.bin/jest 是 Jest 的执行程序。

然后你需要在你的测试代码中添加一个断点：

test('debug test', () => {
  const first = 1;
  const second = 2;

  debugger;

  expect(first + second).toBe(3);
});

在这个测试用例中，我们使用了 debugger 关键字来添加一个断点。当 Jest 运行到这个点时，它就会自动启动 Node.js 调试器。

接下来你需要运行测试命令：

npm test -- --no-coverage

这里的 --no-coverage 标志告诉 Jest 不要生成测试覆盖率报告，以避免误导调试结果。

当测试用例运行到断点时，Node.js 就会暂停并等待调试器连接。接下来你需要打开 Chrome 浏览器，输入 chrome://inspect 并打开。在页面中选择 Open dedicated DevTools for Node 即可开始调试了。

在 Jest 测试中使用断点调试功能可以帮助你快速排除问题，提高测试效率。通过 VS Code 插件进行断点调试，或使用 Node.js 内置调试器，都可以实现断点调试。不同的调试方式有各自的优缺点，在实际应用中需要根据需求选择适合自己的方式。

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