在前端开发中，Jest 是一个非常流行的测试框架。它可以帮助我们编写和运行测试用例，从而保证代码的质量和稳定性。但是，在使用 Jest 进行异步测试时，有时会遇到测试一直处于 Pending 状态的情况，这让人很困惑。本文将介绍 Jest 遇到异步测试一直处于 Pending 状态的解决方案，并提供示例代码和指导意义。
问题描述
在 Jest 中，我们通常使用 test 函数来编写测试用例。如果测试用例中包含异步操作，我们可以使用 async/await 或者 Promise 来处理异步操作。例如：
test('fetch data', async () => {
const data = await fetchData()
expect(data).toBe('hello world')
})在上面的测试用例中，我们使用 async/await 来处理 fetchData 函数返回的 Promise 对象。这样，当 Promise 对象 resolve 时，data 变量就会被赋值为返回值。然后，我们使用 expect 函数来判断 data 是否等于 'hello world'。如果测试通过，就会输出一条绿色的信息。
但是，有时候我们会遇到测试一直处于 Pending 状态的情况，如下图所示：
这种情况下，测试用例会一直等待 Promise 对象 resolve，但是 Promise 对象却没有 resolve，导致测试一直处于 Pending 状态，无法结束。这让我们无法得知测试用例是否通过，也无法进行下一步操作。
问题分析
为什么会出现测试一直处于 Pending 状态的情况呢？通常有以下几种情况：
1. 忘记调用 resolve/reject 函数
在编写异步测试用例时，我们通常会返回一个 Promise 对象。如果我们忘记调用 resolve/reject 函数，Promise 对象就不会 resolve/reject，从而导致测试一直处于 Pending 状态。例如：
test('fetch data', async () => {
const promise = fetchData()
// 忘记调用 resolve/reject 函数
})在上面的测试用例中，我们返回了一个 Promise 对象，但是没有调用 resolve/reject 函数。这样，Promise 对象就不会 resolve/reject，导致测试一直处于 Pending 状态。
2. 异步操作没有正确处理
在异步测试用例中，我们通常会使用 async/await 或者 Promise 来处理异步操作。如果我们没有正确处理异步操作，就会导致测试一直处于 Pending 状态。例如：
test('fetch data', async () => {
fetchData().then(data => {
expect(data).toBe('hello world')
})
})在上面的测试用例中，我们使用了 Promise 来处理异步操作。但是，我们没有将测试用例标记为异步操作，也没有使用 await 等待 Promise 对象 resolve。这样，测试用例就会一直处于 Pending 状态。
3. Jest 默认的超时时间过短
Jest 默认的超时时间是 5 秒，如果我们的异步操作需要更长的时间才能完成，就会导致测试一直处于 Pending 状态。例如：
test('fetch data', async () => {
const data = await fetchData()
// 需要 10 秒才能完成的操作
await new Promise(resolve => setTimeout(resolve, 10000))
expect(data).toBe('hello world')
})在上面的测试用例中，我们使用了 setTimeout 函数模拟了一个需要 10 秒才能完成的操作。但是，Jest 默认的超时时间是 5 秒，所以测试用例会在 5 秒钟后超时，从而一直处于 Pending 状态。
解决方案
针对上述问题，我们可以采取以下解决方案：
1. 调用 resolve/reject 函数
在编写异步测试用例时，一定要记得调用 Promise 对象的 resolve/reject 函数，否则 Promise 对象就不会 resolve/reject，导致测试一直处于 Pending 状态。例如：
test('fetch data', async () => {
const promise = fetchData()
promise.then(data => {
expect(data).toBe('hello world')
})
await promise
})在上面的测试用例中，我们调用了 Promise 对象的 then 方法，并在回调函数中编写了断言。然后，我们使用 await 等待 Promise 对象 resolve，并保证测试用例异步操作的正确性。
2. 标记测试用例为异步操作
在使用 Promise 处理异步操作时，一定要将测试用例标记为异步操作，否则测试用例就会一直处于 Pending 状态。例如：
test('fetch data', async () => {
const data = await fetchData()
// 将测试用例标记为异步操作
return expect(data).toBe('hello world')
})在上面的测试用例中，我们使用了 Promise 处理异步操作，并将测试用例标记为异步操作。然后，我们直接在测试用例中编写了断言，不需要使用 then 方法。
3. 增加超时时间
如果我们的异步操作需要更长的时间才能完成，就可以增加 Jest 的超时时间，从而避免测试一直处于 Pending 状态。例如：
test('fetch data', async () => {
const data = await fetchData()
// 需要 10 秒才能完成的操作
await new Promise(resolve => setTimeout(resolve, 10000))
expect(data).toBe('hello world')
}, 15000) // 增加超时时间为 15 秒在上面的测试用例中，我们使用了 setTimeout 函数模拟了一个需要 10 秒才能完成的操作，并增加了超时时间为 15 秒。这样，即使异步操作需要更长的时间才能完成，测试用例也不会一直处于 Pending 状态。
总结
在使用 Jest 进行异步测试时，遇到测试一直处于 Pending 状态的情况是很常见的。如果我们能够正确处理异步操作，并增加超时时间，就可以避免测试一直处于 Pending 状态，从而提高测试效率和准确性。同时，我们也需要注意调用 Promise 对象的 resolve/reject 函数，以确保 Promise 对象能够正常 resolve/reject。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6576e44ad2f5e1655d064e81