当我们在编写前端应用程序时,我们经常需要与异步操作打交道,比如在异步请求响应后更新页面内容。而 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