Jest 是一种流行的 JavaScript 测试框架，经常用于前端项目的单元测试和集成测试中。在前端项目中，经常会使用 Axios 客户端库发送 HTTP 请求，而在 Jest 中进行测试的时候，我们需要模拟 Axios 的行为，以便对接口调用进行测试。但是，有时候我们会遇到如下报错：
TypeError: Cannot read property 'then' of undefined
本文将详细介绍该问题原因及解决方案，并给出相关示例代码，以帮助读者更好地学习 Jest 的使用。
问题原因
在 Jest 中，我们可以使用 jest.mock() 函数模拟 mock 一个函数来进行单元测试。但是，在使用 Jest mock Axios 的时候，我们需要注意一些细节。具体来说，当我们尝试使用 mockResolvedValue 或 mockRejectedValue 时，会出现上述报错。
这是由于 jest.mock() 函数不是真正的函数，它只是一个 JavaScript 对象而已。因此，在使用 jest.mock() 函数创建 mock 实例时，我们需要使用 jest.fn() 函数对其进行包装，以便 Jest 可以正确处理 axios 库中的 then 函数。
解决方案
为了解决上述问题，我们需要对 mock 后的 axios 实例进行正确的包装。具体来说，我们可以使用下面的代码将 mock 后的 axios 实例包装起来：
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;这样，在进行测试时，我们可以使用 mockedAxios 实例来 mock Axios 库中的 then 函数，以便 Jest 能够正确处理。一个有用的示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
-------------------
----- ----------- - ----- -- ------------------ -------
-------------- ------- -- -- -
---------- ------ ---- ---- --------- -- -- -
-----------------------------------
----- -
----- --
-------- -------
--
---
------ ----------------------------- -- -
------------------------------
--------------------------------------
---
---
---------- ----- ----- ---- ------ -- -- -
-----------------------------------
----- ---
-------- -------
---
------ ------------------------------ -- -
--------------------------
---------------------------------
---
---
---在该示例代码中，我们使用了 jest.mock() 函数将 Axios 引用进行了 mock，并将其包装为 mockedAxios 实例。然后，我们使用 mockedAxios 实例来模拟 Axios 通过 get 方法发送请求的场景，用 mockResolvedValue 函数模拟请求成功和 mockRejectedValue 函数模拟请求失败的场景。最后，我们分别使用 then 和 catch 函数来处理请求成功和失败的情况，并在测试中断言返回的数据是否符合预期。
总结
本文介绍了 Jest mock Axios 报错 TypeError: Cannot read property 'then' of undefined 的解决方案及相关示例代码。通过合理的用例设计和正确的使用 Jest mock 命令，可以让我们更高效地进行前端单元测试，提高代码质量和可维护性。我们希望这篇文章对读者在进行前端单元测试方面具有指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650010ee95b1f8cacde45de0