在测试前端程序时，我们通常会使用 Jest 这样的测试框架，它可以帮助我们编写并执行各种测试用例。在测试用例中，我们可能需要 Mock 一个方法或所有方法，以便模拟数据、模拟网络请求等操作。本文将介绍 Jest 中的 Mock 一个方法和所有方法的具体实现方法和注意事项，并通过示例代码来说明。
Mock 一个方法
Mock 一个方法是指在测试用例中替换某个方法，并定义预期行为。例如，在测试一个组件时，我们可能需要 Mock 组件所依赖的某个方法，以确保测试的独立性和可重复性。Jest 提供了多种方法来 Mock 一个方法，下面是其中常用的两种方法：
1. jest.fn()
jest.fn() 是 Jest 中最常用的 Mock 方法，它可以创建一个空函数并返回。我们可以通过 jest.fn() 的返回值来模拟所 Mock 的函数的行为。例如，下面是一个例子：
-- ------
-------- ------ -- -
------ - - --
-
-- ----
--------- ------ -- -- -
----- ------- - ---------- -- -- ---- --
--------------------------- -- -- ---- ------
----------------- ------------ -- -- ---- --
---在这个例子中，我们定义了一个待测试的方法 add，它接收两个参数并返回它们的和。然后我们使用 jest.fn() 创建了一个 Mock 方法 mockAdd，并使用 mockAdd.mockReturnValue(3) 定义了 mockAdd 的返回值为 3。最后，我们在测试用例中执行了 mockAdd(1, 2) 并断言其返回值为 3。这样就可以达到 Mock 方法的目的了。
2. jest.spyOn()
jest.spyOn() 是一个更加强大的 Mock 方法，它可以在不改变原有逻辑的情况下替换方法的具体实现。例如，下面是一个例子：
-- ------
----- ---- - -
----- -----
------------- -
--------- - -----
--
--
-- ----
------------------ ------ -- -- -
----- ---------- - ---------------- ----------- -- -- ---- --
---------------------------------- -- -
--------- - ----- - - ----- -- -- ---- -----
---
------------------- -- -- ---- --
---------------------------- ----- -- ------
------------------------- -- -----
------------------- -- -------
----------------------------- -- ------
---在这个例子中，我们定义了一个对象 user，它有一个 setName 方法用于修改 user 的 name 属性。然后我们使用 jest.spyOn() 创建了一个 Mock 方法 spySetName，并使用 spySetName.mockImplementation() 修改了 setName 方法的行为，使它在执行时会将 name 前加上 'Mock ' 前缀。最后，我们在测试用例中执行了 user.setName('李四') 并通过 expect(user.name).toBe('Mock 李四') 断言其结果为 'Mock 李四'，从而达到 Mock 方法的目的。需要注意的是，在测试用例结束后，我们使用 spySetName.mockRestore() 恢复原方法，避免对其他测试用例产生影响。
Mock 所有方法
Mock 所有方法是指在测试用例中替换整个模块的所有导出方法，并定义预期行为，以实现对模块的 Mock。例如，在测试一个包含多个组件的模块时，我们可能需要 Mock 整个文件，以便模拟多种场景的测试。Jest 也提供了多种方法来 Mock 所有方法，下面是其中常用的两种方法：
1. jest.mock()
jest.mock() 是 Jest 中最常用的 Mock 方法之一，它可以 Mock 整个模块并定义预期行为。例如，下面是一个例子：
-- ------ ----
-------- ------ -- -
------ - - --
-
-------- ------------ -- -
------ - - --
-
------ - ---- --------- --
-- ----
---------------- -- -- --
---- ----------------------------- -- ---- --- --
---------- ----------------------------- -- ---- --------- --
----
-------- ---- ---- -- -- -
----- - - --------------- -- -- ------- ------- ---- ----
--------------- ------------ -- -- ---- -- --- --
--------------------- ------------ -- -- ---- -- --------- --
---在这个例子中，我们定义了一个待测试的模块 a.js，它有两个方法 add 和 substract。然后我们使用 jest.mock() Mock 了整个模块 a.js，并使用 add: jest.fn().mockReturnValue(3) 和 substract: jest.fn().mockReturnValue(1) 来 Mock add 和 substract 方法。最后，我们在测试用例中重新 require 了 a.js 并执行了 add 和 substract 方法，并通过 expect() 断言其执行结果。
需要注意的是，jest.mock() 的第二个参数是一个“factory”函数，它返回的是一个对象，用于 Mock 所有导出的方法。可以使用 mockReturnValue()、mockImplementation() 等函数来定义 Mock 方法的行为，并使用 jest.requireActual() 来获取真实的模块定义。
2. jest.doMock()
jest.doMock() 是一个更加高级的 Mock 方法，它可以 Mock 外部模块的所有导出方法，以及所有子模块的传递方法，以实现更加精细的 Mock。例如，下面是一个例子：
-- ------ ----
------ - --- - ---- ------
-------- ------ -- -
------ ----- - - - --
-
------ - --- --
-- ----
------ -------- ----- -
------ --
-
-- ----
-------- ---- ---- -- -- -
------------------ -- -- --
---- ----------------------------- -- ---- ---- ----
----
----- - - --------------- -- -- ------- ------- ---- ----
--------------- ------------ -- -- ---- -- --- --
---在这个例子中，我们定义了一个待测试的模块 a.js，它依赖于另一个模块 b.js。然后我们使用 jest.doMock() Mock 了整个模块 b.js，并使用 get: jest.fn().mockReturnValue(2) 定义了get方法的 Mock 行为。最后，我们在测试用例中重新 require 了 a.js 并执行了 add 方法，并通过 expect() 断言其执行结果。在执行过程中，Jest 会自动将外部模块 b.js 中的 get 方法替换为 Mock 方法，从而实现整个模块的 Mock。
需要注意的是，jest.doMock() 的第二个参数也是一个“factory”函数，但它的执行时机更靠后，只有在测试用例运行时才会被执行。因此，使用 jest.doMock() 可能会带来一定的性能开销，需要谨慎使用。同时，Mock 子模块的传递方法需要注意依赖关系，避免出现意外的运行时错误。
总结
Mock 是前端测试中非常重要的一环，它可以帮助我们在测试过程中模拟各种复杂的数据和场景。Jest 提供了多种 Mock 方法，可以满足不同测试场景的需求。在实际使用中，我们需要深入理解 Mock 的原理和实现方法，并合理运用各种 Mock 工具来提高测试的效率和可靠性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652bc9c47d4982a6ebda6334