Jest 进阶：异步代码、钩子函数和快照测试

用 Jest 深入测试你的 JavaScript 代码

测试异步代码

Jest 让我们能够用多种方式测试异步代码。使用回调函数、Promise 或 async/await，我们可以验证异步操作的行为是否符合预期。

• 回调函数： 使用 done 回调函数，Jest 会等到异步操作完成。
• Promise： Jest 允许我们使用 resolves.toBe() 断言来测试 Promise 的结果。
• async/await： ES2017 的 async/await 语法简化了异步代码的测试，让我们可以在测试函数中直接使用 async。

测试钩子函数

Jest 支持测试钩子函数，如 beforeEach、afterEach、beforeAll 和 afterAll。

• beforeEach 和 afterEach： 这些钩子分别在每个测试用例前后运行，用于设置和清理测试环境。
• beforeAll 和 afterAll： 这些钩子在所有测试用例前后运行，用于执行一次性操作，如数据库连接或服务器启动。

快照测试

快照测试是一种通过比较代码输出和预期结果来测试代码行为的方法。Jest 的 toMatchSnapshot 方法让快照测试变得非常容易。

• 在测试中，我们调用 toMatchSnapshot，并将测试代码的输出作为快照存储起来。
• 当测试再次运行时，Jest 将比较当前输出与存储的快照。
• 如果输出不一致，测试将失败。

用代码示例

测试回调函数异步代码：

test('异步回调测试', (done) => {
  setTimeout(() => {
    expect(result).toBe(10);
    done();
  }, 1000);
});

测试 Promise 异步代码：

test('Promise 测试', () => {
  return expect(Promise.resolve(10)).resolves.toBe(10);
});

测试 async/await 异步代码：

test('async/await 测试', async () => {
  const result = await Promise.resolve(10);
  expect(result).toBe(10);
});

测试 beforeEach 和 afterEach 钩子函数：

beforeEach(() => {
  // 设置测试环境
});

afterEach(() => {
  // 清理测试环境
});

测试快照：

test('快照测试', () => {
  const result = {
    name: 'John Doe',
    age: 30
  };

  expect(result).toMatchSnapshot();
});

结论

通过掌握 Jest 的这些进阶用法，你可以编写更可靠的 JavaScript 代码。异步代码、钩子函数和快照测试让你的测试工具箱更强大，让你能够捕捉到更多潜在的错误，提升代码质量。

常见问题解答

• Jest 如何处理错误的 Promise？
  Jest 会将未处理的 Promise 视为测试失败。
• beforeEach 和 beforeAll 钩子函数之间的区别是什么？
  beforeEach 在每个测试用例前后运行，而 beforeAll 仅在所有测试用例之前运行一次。
• Jest 的快照测试与单元测试有什么不同？
  快照测试专注于测试代码输出，而单元测试专注于测试代码内部的特定逻辑。
• 如何更新快照？
  通过调用 toMatchSnapshot({ updateSnapshot: true })，你可以更新快照以匹配当前输出。
• Jest 可以用在前端还是后端测试中？
  Jest 主要用于前端 JavaScript 测试，但也可以用于测试 Node.js 后端代码。