在前端开发中，我们通常会用到 Jest 来进行单元测试，然而在测试过程中，你可能会遇到 Jest 超时报错的问题。本文将会介绍这个问题的出现原因，并提供一些解决方案。
出现原因
Jest 超时报错通常是由于某个测试用例在规定的时间内没有完成执行而导致的。Jest 默认的超时时间为 5000 毫秒，如果某个测试用例在这个时间内没有完成执行，Jest 就会报出超时的错误。
超时错误的出现通常有两种情况：
- 测试用例执行了一个非常耗时的操作（例如网络请求、读取文件等）。
- 测试代码出现了死循环或其他无限等待的问题。
解决方案
调整超时时间
最简单的解决方案就是修改超时时间。在 Jest 的配置文件（通常为 jest.config.js）中，可以通过 testTimeout 选项来调整超时时间：
module.exports = {
testTimeout: 10000 // 10 秒超时
}这样就可以将默认的超时时间改为 10 秒钟，让测试用例有更多的时间来完成执行。
需要注意的是，在调整超时时间时一定要慎重，不要将超时时间设置得过长，否则可能会导致测试用例出现一些隐藏的问题。
使用 async/await
如果测试用例中存在网络请求等耗时操作，可以使用 async/await 来解决这个问题。举个例子，假设我们需要测试一个需要从服务器获取数据的组件：
-- -------------------- ---- -------
-- --------------
------ ------- -
------ -
------ -
------ --
-
--
----- --------- -
----- -------- - ----- -------------------
---------- - ----- ---------------
-
-测试代码：
-- -------------------- ---- ------- -- ------------------- ------ - ----- - ---- ----------------- ------ ----------- ---- --------------- ------------------- ----- -- -- - ----- ------- - ------------------ -- -------- ----- ---------------------- -- -- ----- -------- ----------------------------------- ----- ----- -- - ----- ----- --- --
在测试代码中，使用了 async/await 来等待组件加载完成后再进行断言。这样就可以保证测试用例在有限的时间内完成执行，避免了超时错误的出现。
避免死循环和无限等待
如果测试代码中存在死循环或无限等待的问题，那么就需要通过修改测试代码来避免这样的问题。举个例子，我们尝试测试一个计算连续自然数之和的函数：
-- -------------------- ---- -------
-- ------
-------- ------ -
--- ------ - -
----- -- - -- -
------ -- -
-
------ ------
-
-------------- - ---测试代码：
// sum.test.js
const sum = require('./sum')
test('sum', () => {
expect(sum(10)).toBe(55)
})在上面的测试代码中，由于死循环的存在，测试用例会在默认的超时时间 5000 毫秒后抛出超时错误。正确的写法应该是这样的：
-- -------------------- ---- -------
-- ------
-------- ------ -
--- ------ - -
----- -- - -- -
------ -- -
---
-
------ ------
-
-------------- - ---在这个例子中，将死循环修改为了正常的循环，解决了超时错误的问题。
总结
Jest 超时报错问题无法避免，但我们可以通过调整超时时间、使用 async/await 和避免死循环等方式来解决这个问题。在实际开发中，我们应该注意测试代码的编写，尽量避免出现超时错误的情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648018f348841e9894f98098