Jest 调试方法汇总及实战操作

Jest 是一个面向 JavaScript 的单元测试框架，它提供了一系列强大的功能，包括快速反馈、自动化测试、并行测试等等。在编写单元测试时，我们经常会遇到一些问题，比如测试用例不符合预期、测试覆盖率低等等。这时候，就需要使用调试工具来帮助我们快速定位问题所在。本文将介绍 Jest 单元测试中的调试方法汇总，并提供实战操作和相关示例代码。

调试方法汇总

1. 使用 console.log 调试

使用 console.log 是最简单、最直接的调试方法。我们可以在测试用例中打印出各种变量的值，以便于查看其运行情况。例如：

test('测试用例', () => {
  const a = 1;
  const b = 2;
  console.log(a, b);
  expect(a + b).toBe(3);
});

2. 使用 debugger 调试

debugger 是一种在代码中设置断点的方式，以便于在浏览器中进行调试。在 Jest 中，我们可以使用 debugger 来调试测试用例。例如：

test('测试用例', () => {
  const a = 1;
  const b = 2;
  debugger;
  expect(a + b).toBe(3);
});

这时，当我们运行该测试用例时，代码会在 debugger 处进行暂停，我们可以在浏览器中查看变量的值、调用栈等信息，以便于快速定位问题。

3. 使用 node-inspect 调试

node-inspect 是 Node.js 的一个调试工具，可以在命令行中运行，并提供类似浏览器调试器的界面。在 Jest 中，我们可以使用 node-inspect 来调试测试用例。例如：

首先，在 package.json 中添加以下内容：

"scripts": {
  "test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand"
},

然后，在命令行中运行以下命令：

npm run test:debug -- your-test-file

此时，命令行会输出调试命令，如下：

Debugger listening on ws://127.0.0.1:9229/8a2f17cb-5eee-46b9-aa1c-14b51030f4ef
For help, see: https://nodejs.org/en/docs/inspector

我们可以在浏览器中输入上述地址，即可进入调试界面进行调试。

4. 使用 VS Code 调试

VS Code 是一种通用的代码编辑器，提供了丰富的代码编辑、调试、部署等功能。在 Jest 中，我们可以使用 VS Code 进行调试。以下是具体的操作步骤：

• 在 VS Code 中进入调试界面，并添加以下调试配置文件：

// javascriptcn.com 代码示例
{
  "type": "node",
  "request": "launch",
  "name": "Debug Jest Tests",
  "runtimeExecutable": "npm",
  "runtimeArgs": [
    "run-script",
    "test:debug",
    "--",
    "-t",
    "your-test-name"
  ],
  "port": 9229,
  "protocol": "inspector"
}

• 在命令行中运行以下命令：

npm run test:debug -- your-test-file

• 在 VS Code 中点击调试按钮，即可进入调试界面进行调试。

实战操作

以下是一个具体的实战操作示例，以帮助读者更好地理解 Jest 的调试方法：

首先，在 package.json 中添加以下内容：

{
  "scripts": {
    "test": "jest"
  }
}

然后，创建一个名为 sum.js 的文件，其中包含以下代码：

function sum(a, b) {
  return a + b;
}

module.exports = sum;

接着，创建一个名为 sum.test.js 的文件，其中包含以下测试用例：

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  const a = 1;
  const b = 2;
  const result = sum(a, b);
  expect(result).toBe(4);
});

在该测试用例中，我们故意将期望值设为了 4，以便于查看 Jest 应该如何进行断言。

接下来，我们将使用 VS Code 来对该测试用例进行调试。具体的操作步骤如下：

• 在 VS Code 中进入调试界面，并选择 "Add Configuration..."。
• 在弹出的配置文件中添加以下内容：

// javascriptcn.com 代码示例
{
  "type": "node",
  "request": "launch",
  "name": "Debug Jest Tests",
  "program": "${workspaceFolder}/node_modules/.bin/jest",
  "args": [ "--runInBand", "sum.test.js" ],
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen"
}

• 在命令行中运行以下命令，以便于 VS Code 进行调试：

npm test

• 在 VS Code 中点击调试按钮，并选择 "Debug Jest Tests"，即可进入调试界面进行调试。

总结

本文介绍了 Jest 单元测试中的几种调试方法，包括 console.log、debugger、node-inspect、VS Code 等。读者可以根据自己的喜好和需求选择对应的调试工具，以便于快速定位测试用例中的问题。同时，我们还提供了一个基于 VS Code 的实战操作示例，以便于读者掌握具体的使用方法。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65332a8c7d4982a6eb698503