在前端开发中，测试是非常重要的一个环节。而在测试中，Mock 技术更是不可或缺的成分。Jest 是一个流行的 JavaScript 测试框架，而 Jest 中的 Mock 技术则是其功能十分强大的部分，允许我们模拟函数和类的行为，从而进行充分的测试。
什么是 Mock
Mock（模拟）指的是在测试过程中，用一个虚拟对象来代替真实的对象，从而实现对测试过程的控制和管理。在 Jest 中，Mock 技术可以帮助开发者创建虚拟对象，用于对真实对象的行为和状态进行模拟和控制。Mock 技术可以用于测试开发中的各种场景，包括函数、组件、API 调用等等。
Jest 中常用的 Mock 技术
模拟函数
在 Jest 中，我们可以使用 jest.fn() 创建一个虚拟函数，从而对函数的返回值和调用方式进行模拟和控制。下面是一个示例代码：
-------- ------ -- - ------ - - -- - --------- -------- ------ -- -- - ----- ------- - ------------- ----------------- ------------ ----------------------------------- ---
在上面的示例代码中，我们使用 jest.fn() 创建了一个 Mock 函数 mockAdd，并将真实函数 add 作为参数传入。在测试中，我们调用 mockAdd，从而模拟了真实函数，并可以通过 toBeCalledTimes 来检查它是否被正确地调用了。
模拟类
在 Jest 中，我们也可以使用 jest.fn() 来模拟一个类，其中包括对类的构造函数调用、方法调用等等。下面是一个示例代码：
----- ------ -
----------------- -
--------- - -----
-
---------- -
------ ------- - -- --------------
-
-
------------ ----- ------ -- -- -
----- ---------- - ----------------------------------- -- -
------ -
-----
--------- --------------------------------- - -- - ---- ---------
--
---
----- -------- - --- ------------------
---------------------------------------- - -- - ---- ---------
--------------------------------------
-----------------------------------------
---在上面的示例代码中，我们使用了 jest.fn() 来模拟了一个类 Animal，并通过 mockImplementation 提供了一个实现，用于替代原本的返回值和行为。在测试中，我们创建了一个 MockAnimal 实例并对其方法进行调用，并使用 toBeCalledTimes 和 toBeCalledWith 来检查 MockAnimal 是否被正确地调用了。
模拟 API
在测试前端应用时，我们通常需要模拟 API 调用，以便进行测试。在 Jest 中，我们可以使用 jest.mock() 来模拟 API 调用，并使用 mockResolvedValue 和 mockRejectedValue 来模拟 API 的返回值，以便进行测试。下面是一个示例代码：
------ ----- ---- -------- ------------------- ---------- --- ------ ----- -- -- - ----------------------------- ----- - -------- --------- ----------- - --- ----- -------- - ----- ------------------ -------------------------------------------- ------------- ---
在上面的示例代码中，我们使用了 jest.mock() 来模拟了 axios 这个库，并通过 mockResolvedValue 来模拟一个成功的 API 调用。在测试中，我们调用 axios.get() 并确保返回值符合我们的预期。
结论
Mock 技术是 Jest 中非常重要的测试工具，可以帮助我们更容易地进行测试，提高测试覆盖率。在本文中，我们介绍了 Jest 中 Mock 技术的常用方法，并提供了一些示例代码，希望能够帮助读者更好地理解和掌握 Jest 中 Mock 技术的使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/670cd6d85f551281025bd19e