正确使用 Jest 进行异步测试-JavaScript中文网-JavaScript教程资源分享门户

异步测试的重要性

在前端开发中，异步操作已经成为了必不可少的一部分。例如，从 API 中获取数据或者在浏览器中进行用户交互等等。这些异步操作会带来一些挑战，特别是在测试方面。

如果开发人员不正确的测试异步代码，那么就有可能导致测试失败，即使代码没问题。为了避免这种情况，我们需要使用 Jest 的异步测试功能。这将帮助我们更好地测试异步代码，并且确保它能够正确地运行。

Jest 的异步测试功能

Jest 是一个流行的 JavaScript 测试框架，它具有强大的异步测试功能。在 Jest 中，您可以使用以下三种方式测试异步代码：

回调函数（Callback）
Promises
Async / Await 函数

使用 Jest 进行异步测试时，您需要确保 Jest 在代码完成之前设置超时时间。在 Jest 中，默认的超时时间是 5 秒。但是，您可以通过在测试文件中使用 jest.setTimeout() 来自定义超时时间。

以下是使用 Jest 测试异步代码的示例。

回调函数测试

假设我们有一个 API，它返回一个对象，并使用回调函数进行异步回调。我们想要确保这个 API 的行为是正确的。以下是我们如何在 Jest 中测试该 API：

// javascriptcn.com code example
function fetchData(callback) {
  setTimeout(() => {
    callback({ data: "Hello World" });
  }, 1000);
}

test("Test fetchData function", (done) => {
  function callback(data) {
    expect(data.data).toBe("Hello World");
    done();
  }

  fetchData(callback);
});

在这个例子中，我们使用 done() 来通知 Jest 测试已经完成。如果我们不使用 done() 告诉 Jest 测试已经完成，Jest 将会在测试完成之前结束测试。

Promises 测试

假设我们有一个返回 Promise 的异步函数。我们想要确保 Promise 成功，我们可以使用 resolve 函数来测试成功情况，使用 reject 函数来测试失败情况。以下是一个使用 Promise 测试的示例：

// javascriptcn.com code example
function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ data: "Hello World" });
    }, 1000);
  });
}

test("Test fetchDataPromise function", () => {
  return fetchDataPromise().then((data) => {
    expect(data.data).toBe("Hello World");
  });
});

在这个例子中，我们可以使用 Jest 提供的默认的超时时间（5 秒），因为我们没有在函数调用中设置超时时间。

Async / Await 函数测试

最后，我们来看看如何使用 Async / Await 函数测试异步代码。我们将使用上一个示例中的相同的 Promise，并使用 Async / Await 函数进行测试。以下是代码示例：

// javascriptcn.com code example
function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ data: "Hello World" });
    }, 1000);
  });
}

test("Test fetchDataPromise function with async/await", async () => {
  const data = await fetchDataPromise();
  expect(data.data).toBe("Hello World");
});

在这个例子中，我们使用 async 关键字标记测试函数，然后使用 await 关键字来等待 Promise 执行完成。这样做可以在测试中更快地捕获和处理异步代码。

合理设置超时时间

在 Jest 中进行异步测试，一个非常重要的点是必须设置超时时间。否则，如果测试长时间运行，Jest 将默认约 5 秒后超时并退出测试。因此，合理的超时时间设置是至关重要的。

您可以使用 jest.setTimeout() 函数在测试文件中自定义超时时间。例如，如果您想将超时时间设置为 10 秒，可以在您的测试文件中添加以下代码：

jest.setTimeout(10000);

这将告诉 Jest 在测试执行之前等待 10 秒，然后在测试超时之前停止测试。

结论

在本文中，我们已经学习了如何使用 Jest 进行异步测试。使用 Jest 进行异步测试的核心是确保 Jest 在代码完成之前设置了正确的超时时间。我们介绍了使用回调函数、Promises 和 Async / Await 函数三种主要方式测试异步代码，并且展示了如何在测试文件中自定义超时时间。当您开始编写异步代码时，请牢记在测试中使用这些技术，以确保您的代码正确无误，而且能够正确地运行。

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