Jest 如何测试异步 API？

在前端开发中，我们经常需要与后端进行数据交互，而这种交互往往是异步的。为了保证交互的正确性，我们需要对异步 API 进行测试。Jest 是一个流行的 JavaScript 测试框架，它提供了一些方便的方法来测试异步 API。

1. 使用 async/await

使用 async/await 是测试异步 API 的最佳实践。它可以使异步代码看起来像同步代码，使得测试代码更易于编写和理解。

假设我们有一个异步函数 fetchData()，它从服务器获取数据并返回一个 Promise。我们需要编写一个测试用例来测试这个函数是否正确地返回了数据。下面是一个使用 async/await 的示例：

test("fetchData() returns data from server", async () => {
  const data = await fetchData();
  expect(data).toEqual({ message: "Hello, world!" });
});

在这个示例中，我们使用了 async 关键字来表示测试函数是异步的，然后使用 await 关键字来等待 fetchData() 函数返回数据。最后，我们使用 expect() 函数来断言返回的数据是否符合预期。

2. 使用 Promise

如果您不想使用 async/await，也可以使用 Promise 来测试异步 API。Jest 提供了一个 done 回调函数，它可以用于测试 Promise。

假设我们有一个 Promise 函数 fetchData()，它从服务器获取数据并返回一个 Promise。我们需要编写一个测试用例来测试这个函数是否正确地返回了数据。下面是一个使用 Promise 的示例：

test("fetchData() returns data from server", (done) => {
  fetchData().then((data) => {
    expect(data).toEqual({ message: "Hello, world!" });
    done();
  });
});

在这个示例中，我们将测试函数标记为异步函数，并使用 done 回调函数来通知 Jest 测试已完成。我们使用 then() 方法来等待 Promise 完成，并在完成后使用 expect() 函数来断言返回的数据是否符合预期。

3. 使用 Jest 提供的异步测试工具

除了 async/await 和 Promise，Jest 还提供了一些方便的工具来测试异步代码。下面介绍几个常用的工具：

waitFor

waitFor 函数可以等待一个条件被满足后再继续执行测试代码。它通常用于等待异步操作完成或 DOM 元素被更新。

假设我们有一个异步函数 fetchData()，它从服务器获取数据并更新 DOM 元素。我们需要编写一个测试用例来测试这个函数是否正确地更新了 DOM 元素。下面是一个使用 waitFor 的示例：

test("fetchData() updates DOM element", async () => {
  document.body.innerHTML = '<div id="message"></div>';
  fetchData();
  await waitFor(() => document.getElementById("message").textContent === "Hello, world!");
  expect(document.getElementById("message").textContent).toEqual("Hello, world!");
});

在这个示例中，我们使用 waitFor 函数等待 DOM 元素的文本内容变为 "Hello, world!"，然后使用 expect() 函数来断言 DOM 元素是否正确地被更新。

mockResolvedValue 和 mockRejectedValue

mockResolvedValue 和 mockRejectedValue 函数可以模拟异步函数的返回值，使得我们可以在不与真实服务器交互的情况下测试异步代码。

假设我们有一个异步函数 fetchData()，它从服务器获取数据并返回一个 Promise。我们需要编写一个测试用例来测试这个函数是否正确地返回了数据。下面是一个使用 mockResolvedValue 的示例：

test("fetchData() returns data from server", async () => {
  const fetchDataMock = jest.fn().mockResolvedValue({ message: "Hello, world!" });
  const data = await fetchDataMock();
  expect(data).toEqual({ message: "Hello, world!" });
});

在这个示例中，我们使用 jest.fn() 函数创建一个模拟函数，并使用 mockResolvedValue 函数模拟返回值。然后我们调用模拟函数并使用 expect() 函数来断言返回的数据是否符合预期。

结论

在本文中，我们介绍了如何使用 Jest 测试异步 API。我们推荐使用 async/await 来测试异步代码，因为它可以使代码更易于编写和理解。除此之外，Jest 还提供了一些方便的工具来测试异步代码，如 waitFor、mockResolvedValue 和 mockRejectedValue。在编写测试用例时，我们应该确保测试覆盖率足够高，以保证代码的正确性。

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