Jest 测试如何使用 Promise

当我们在编写前端应用程序时,我们经常需要与异步操作打交道,比如在异步请求响应后更新页面内容。而 Promise 是处理异步操作的一种常见方式。在 Jest 测试中,我们也需要处理 Promise。

在本篇文章中,我们将介绍如何在 Jest 测试中使用 Promise,让你的测试更加全面、准确。

Promise 基础

在介绍 Jest 中 Promise 的使用方法之前,先简要介绍一下 Promise 基础。

Promise 是 ECMAScript 2015(ES6)规范中新增的一种用于处理异步操作的对象。它可以将异步操作以同步的方式进行处理,让代码更加易于编写和维护。

Promise 有三个状态:

  • pending:Promise 对象初始状态,即未完成的状态。
  • fulfilled:Promise 对象已经成功完成异步操作,即已执行 resolve
  • rejected:Promise 对象已经发生错误,即已执行 reject

Promise 对象通过调用 then 方法设置成功和失败的回调函数。

const myPromise = new Promise((resolve, reject) => {
  const randomNum = Math.random();
  if (randomNum > 0.5) {
    resolve('success');
  } else {
    reject('error');
  }
});

myPromise.then((value) => {
  console.log(value);
}, (error) => {
  console.log(error);
});

Jest 中 Promise 的使用方法

在 Jest 测试中,我们用 async/await 关键字来处理 Promise。async 用于声明异步函数,await 用于暂停异步函数的执行,直到 Promise 完成。这使得异步代码的测试更加方便。

下面是一个简单的例子。我们将测试使用 Promise 获取一个用户信息的 API 是否正常工作。

test('get user info', async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const userData = await res.json();
  expect(userData.name).toEqual("Leanne Graham");
});

首先声明一个异步测试函数。在测试函数内使用 await fetch() 异步请求数据并等待请求返回,使用 await res.json() 将请求结果转换为 JSON 对象。最后使用 Jest 的 expect 断言,验证返回的数据是否与期望相符。

Promise 超时测试

有些异步操作需要一定时间才能完成。在 Jest 中,我们可以通过设置超时时间,确保异步操作在规定时间内执行完毕。如果异步操作在超时时间内未完成,测试将会失败。

test('get user info timeout', async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const userData = await res.json();
  expect(userData.name).toEqual("Leanne Graham");
}, 5000);

在测试函数的最后一个参数中,使用毫秒表示超时时间。如果超时,将会抛出 TimeoutError

Promise 错误捕获

最后,我们来看如何在 Jest 中捕获 Promise 的错误。

在前面的例子中,如果发生了错误,比如 URL 地址不存在或者请求超时,我们并没有处理它们。为了正确处理错误,我们可以使用 try-catch 语句,来捕获 Promise 中的错误。

test('get user info error', async () => {
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/users/invalid-url');
    const userData = await res.json();
    expect(userData.name).toEqual("Leanne Graham");
  } catch (error) {
    expect(error.toString()).toEqual("TypeError: Failed to fetch");
  }
});

在测试函数内使用 try-catch 语句,来捕获错误,用 Jest 断言验证错误是否符合预期。

总结

在 Jest 测试中使用 Promise,可以使你的测试更加准确、全面、易于维护。本文介绍了 Promise 基础、Jest 中 Promise 的使用方法,以及超时测试和错误捕获。如果你还没有使用 Jest 进行测试,建议去尝试一下。这将帮助你写出更加健壮的前端应用程序,并减少 bug 出现的概率。

示例代码:https://github.com/jasminejia/jest-promise-demo

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/65af7959add4f0e0ff8ea7fb