在前端开发中，异步操作非常常见，而 Promise 是个很好的异步编程解决方案。但是，在编写异步测试时，我们需要考虑到 Promise 的异步性。这篇文章将介绍如何使用 Jest 测试 Promise 返回的异步操作。
Jest 简介
Jest 是 Facebook 开源的一个测试框架，可以轻松地编写、运行和管理测试用例。其易于配置且支持多种测试类型，包括单元测试和集成测试。同时，Jest 支持异步测试，可以测试异步和同步代码。
Promise 简介
Promise 是一个 JavaScript 对象，表示异步操作的最终结果。它可以被看做是官方的异步转换器。Promise 既是一种设计模式，又是一种语法结构，允许我们执行异步操作并在操作完成时获取结果。
Promise 一般有三种状态：
- Pending（进行中）：Promise 实例创建后立即进入 Pending 状态。
- Fulfilled（已完成）：表示异步操作已经完成，此时 Promise 的值可用。
- Rejected（已拒绝）：表示异步操作失败，此时 Promise 的值是一个错误对象。
测试 Promise 的异步操作时，需要通过 Jest 提供的 expect()、resolve() 和 reject() 方法来解决 Promise 的异步性。
expect()
expect() 方法是 Jest 中最常用的一种测试方法，它的作用是比较预期值和实际值。该方法接收一个参数，即需要比较的实际值。例如：
test('1 + 2 should equal 3', () => {
expect(1 + 2).toBe(3);
});resolve()
resolve() 方法会把传入的值封装成一个 Promise 对象并立即解决，返回包裹在 Promise 中的值。例如：
test('resolves to lemon if promise succeeds', () => {
return expect(Promise.resolve('lemon')).resolves.toBe('lemon');
});在这个测试中，expect() 方法接收 Promise.resolve() 返回的 Promise 对象，其中包裹的值是 'lemon'。.resolves.toBe() 则是检测这个 Promise 对象的值是否为 'lemon'。
reject()
与 resolve() 类似，reject() 方法会把传入的值封装成一个 Promise 对象并立即拒绝，返回包裹在 Promise 中的值。例如：
test('rejects with an error message if promise fails', () => {
return expect(Promise.reject('no data')).rejects.toBe('no data');
});在这个测试中，expect() 方法接收 Promise.reject() 返回的 Promise 对象，其中包裹的值是 'no data'。.rejects.toBe() 则是检测这个 Promise 对象的值是否为 'no data'。
示例代码
test('async testing with Promise', () => {
return fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => response.json())
.then(user => expect(user.name).toEqual('Leanne Graham'))
.catch(error => console.error(error));
});在这个测试中，我们使用 fetch() 方法异步获取数据。接着使用 .then() 方法来获取返回的用户数据，并需要检测其 name 属性是否等于 'Leanne Graham' 。如果没有拿到数据，就会调用 .catch() 方法打印错误信息。
总结
Promise 是异步操作的解决方案之一，而 Jest 是一个支持异步测试的测试框架。在测试 Promise 的异步操作时，我们需要使用 Jest 提供的 expect()、resolve() 和 reject() 方法，以解决 Promise 的异步性。使用 Jest 来测试异步代码，可以有效地提高我们的代码质量，并减少出错机会。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652ddfb77d4982a6ebefb0a9