在前端开发中，我们经常需要通过测试来保证代码的质量和稳定性。而对于异步函数的测试，Jest 是一个非常好用的测试框架，它提供了丰富的异步测试工具和方法，可以让我们轻松地测试 async/await 异步函数。
为什么要测试异步函数？
在前端开发中，异步函数是必不可少的。我们通常需要通过异步请求来获取数据、更新 UI 状态等。而异步操作可能会带来很多问题，比如：
- 稳定性问题：异步操作的结果可能会因为网络异常、服务器错误等原因而出错。
- 性能问题：异步操作可能会导致页面卡顿、请求变慢等问题，影响用户体验。
- 数据一致性问题：异步操作可能会在多个地方同时执行，如果没有正确处理好异步返回结果的顺序和状态，可能会导致数据不一致的问题。
因此，为了保证应用的稳定性和性能，测试异步函数是非常重要的。
如何测试异步函数？
Jest 提供了丰富的测试异步函数的工具和方法，下面我们就来介绍一些常用的方法。
1. 使用 async/await
在测试异步函数时，我们通常会使用 async/await，这可以使异步代码看起来像同步代码，更加易于理解和维护。
test('异步测试示例', async () => {
const result = await asyncFunc()
expect(result).toBe('hello')
})在这个示例中，我们使用了 async/await 来等待异步函数 asyncFunc() 的结果，并使用 expect 断言来判断结果是否符合预期。
2. 使用 done 回调函数
Jest 中还可以通过 done 回调函数来测试异步函数。在测试函数中，我们简单地调用 done() 函数来告诉 Jest 异步任务已经完成。
test('异步测试示例', (done) => {
asyncFunc().then((result) => {
expect(result).toBe('hello')
done()
})
})在这个示例中，我们使用 then 方法来获取异步函数 asyncFunc() 的返回结果，并使用 expect 断言来判断结果是否符合预期。最后我们调用了 done() 函数来告诉 Jest 异步任务已经完成。
3. 使用 async/await 和 toMatchObject
在测试异步函数时，我们可能需要判断返回结果的某些属性是否符合预期。这时可以使用 Jest 提供的 toMatchObject 方法。
test('异步测试示例', async () => {
const result = await asyncFunc()
expect(result).toMatchObject({ name: '张三', age: 18 })
})在这个示例中，我们使用 toMatchObject 方法来判断返回结果是否包含了 name 和 age 两个属性，并且属性值分别为 张三 和 18。
4. 使用 async/await 和 rejects
当异步函数抛出错误时，我们可以使用 Jest 提供的 rejects 方法来判断函数是否抛出错误。
test('异步测试示例', async () => {
await expect(asyncFunc()).rejects.toThrow('error message')
})在这个示例中，我们使用 rejects 方法来判断异步函数是否抛出了错误，并使用 toThrow 方法来判断错误信息是否为 error message。
总结
在 Jest 中测试 async/await 异步函数非常简单，我们可以使用 async/await、done 回调函数、toMatchObject 和 rejects 等方法来判断函数的返回结果、错误信息等情况。测试异步函数的目的是为了保证代码的稳定性和性能，从而提升用户体验和开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654e5e5a7d4982a6eb790ddb