在前端测试中，Mock 数据是非常重要的一部分，因为它能够模拟真实数据给测试带来更加真实的场景，同时也可以减少测试对后端的依赖。在 Jest 中，我们可以非常简单地实现 Mock 数据的使用，并且还可以通过一些高级用法打造更加完善、准确的 Mock 数据，让我们来一起看看吧。
基本使用
在 Jest 中，我们可以通过 jest.mock() 方法快速实现 Mock 数据的使用，这个方法可以接受两个参数，第一个参数是需要 Mock 的模块路径，第二个参数是一个 Mock 对象。例如我们有一个 utils.js 模块，它里面包含了一个 getName() 方法，我们想要测试一个依赖 getName() 方法的模块 getUserInfo.js ，我们可以这样来进行 Mock：
-- -------- ------ ----- ------- - -- -- ----- -- -------------- ------ - ------- - ---- ---------- ------ ----- ----------- - -- -- - ----- ---- - ---------- ------ - ---- -- - -- ------------------- ------ - ----------- - ---- ---------------- -------------------- -- -- -- -------- ---------- -- ------ ---- ------------------- -- -- - ------------------------------- ----- ---- --- ---
可以看到，我们在测试 getUserInfo.js 模块时，通过 jest.mock() 方法将 getName() 方法 Mock 掉了，它在测试时返回 '李四' 而不是实际的 '张三'，因此我们在测试中可以轻松地测试 getUserInfo() 方法的正确性。
这是基本的 Mock 数据使用方法，接下来，我们可以通过一些高级用法打造更加完善的 Mock 数据，优化测试效果。
Mock 实现
在 Jest 中，我们可以通过 Mock 实现来对 Mock 数据的行为进行更加灵活的控制，它可以让我们实现一些定制的逻辑，从而更符合我们测试的需求。
Mock 实现可以通过 jest.fn()、jest.mockImplementation() 和 jest.fn().mockImplementation() 等方法来实现，它们分别适用于函数 Mock 和模块 Mock，这里我们以函数 Mock 为例进行讲解：
-- -------- ----- --- - --- -- -- - - -- -- -- --------- - ---- --- -- ----- ------- - ----------- -- -- - - --- -- -- ------- -- ---------- --- -- ------- ----------------------------------------- -- -------- ----------------- ------------ -- ------------- --------------------------------------------------- - --------------- ----
可以看到，在上面的例子中，我们使用 jest.fn() 来 Mock 了一个加法函数 add ，并且在调用 mockAdd() 函数时，可以通过 mockAdd.mock.calls 来获取它的调用历史，通过这些属性和方法，可以使我们的 Mock 实现更加灵活，打造出更多样化、符合测试需求的 Mock 数据。
Mock 类
在某些情况下，我们需要 Mock 的不仅仅是一个函数或一个模块，而是一个类，这时我们就需要使用 jest.createMockFromModule() 或者 jest.mock() 来创建一个模块 Mock。
-- ----------
------ ------- ----- ------- -
------------- -
----------- - --
-
---------- -
----------------- - -----
----------- -- --
-
-
-- ---------------
------ ------- ---- ------------
------ ------- ----- ------------ ------- ------- -
------------- -
--------
-
----- --------------- -
------ --- ----------------- -- -
------------- -- -
-----------------
---------------------
-- ------
---
-
-
-- --------------------
------ ------------ ---- -----------------
---------------------- -- -- -
------ ------------------------------- -- -
------ -
----- ----------
------- --
--
---
---
----------------- ----- -- -- -
----- ------------ - --- ---------------
----- --- - ------------------------ --------
-------------------------------------
----- ------ - ----- -------------------------------
-----------------------
-------------------------------------
---在上面的例子中，我们 Mock 了一个 MyArray 类，它的实例将在调用时返回一个拥有 push 方法和 length 属性的对象，然后我们测试了一个继承自 MyArray 类的 MyAsyncArray 类，还使用了它的 pushAsync 方法进行测试。
可以看到，使用 jest.mock() 来 Mock MyArray 时，我们返回的是一个对象，mockImplementation 中返回的就是这个对象，只是其中的 push 方法被 Mock 了，这样就可以让测试更加专注于隔离的测试，而不是依赖于外部的环境，确保测试的正确性。
总结
在 Jest 中，Mock 数据是非常重要的一部分，在测试中起到了至关重要的作用，而打造更加完善、准确的 Mock 数据则需要我们对 Jest 中的 Mock 机制有一定的理解和把握，通过不断实践和经验积累，我们可以更加优秀地编写测试，从而保障项目的质量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c354cb83d39b4881754e28