前言
在前端领域中，单元测试是非常重要的环节，它可以帮助我们尽早发现代码中的问题，减少后期维护成本。Jest 是一款非常流行的 JavaScript 单元测试框架，它可以帮助我们快速、简便地编写单元测试用例。
在编写单元测试用例时，我们经常会遇到需要模拟依赖项的情况，例如 API 请求、组件间通信等。为了验证被测试代码在不同情况下的行为，我们需要控制这些依赖项的行为，这时候，就需要使用 Jest Mock 进行依赖模拟。
本文将深入介绍 Jest Mock 的使用方法，为你在编写单元测试用例时提供指导。
Jest Mock 的概念和分类
Jest Mock 是 Jest 框架提供的一个特殊的 API，它可以帮助我们模拟依赖项的行为。使用 Jest Mock 能够很好的隔离依赖项的影响，使得我们能够更加方便地测试被测代码的行为。
Jest Mock 的概念比较抽象，它可以分为两类：
- 手工模拟：
手工模拟是我们手动模拟对象的属性和行为，并使用手动模拟的对象来代替真实的依赖项，以达到模拟依赖项的效果。
- 自动生成模拟：
自动生成模拟是使用 Jest 框架自动生成的模拟对象，它能够自动实现被模拟对象的全部属性和方法，并支持自定义行为。
接下来，我们将详细介绍 Jest Mock 的使用方法以及手工模拟和自动生成模拟的区别。
手工模拟
手工模拟是我们手动编写一个对象的属性和方法，并将其传入被测代码，以达到模拟依赖项的效果。手工模拟的好处是更加灵活，但是需要手动编写大量的代码。
示例代码
下面是一个手工模拟的示例代码。我们将手工模拟一个 fetchData 方法，用于模拟 API 请求的结果。
-- -------------------- ---- -------
-------- ----------- -
------ -
----- -
------- ----------
--
--
-
--------------------- -- -- -
------------- -- -
--------------------
---
---------- ------ --------- -- -- -
----------------------- -- -- --
------ ---------- -- -------------
----
----- ------- - ----------------------
--------------------------------- ----- - ------- --------- - ---
---
---在上述代码中，我们手动编写了一个 fetchData 方法，用于模拟 API 请求的结果。在测试用例中，我们使用 jest.mock 方法来手动模拟 request 模块的 fetch 方法，返回我们预期的结果。然后，我们使用 require 方法加载模拟后的 request 模块，并调用 fetch 方法来获取数据，并断言结果是否符合我们的预期。
手工模拟的优缺点
手工模拟的好处是更加灵活，能够更好的控制依赖项的行为，但是需要手动编写大量的代码，特别是在模拟复杂对象时，代码量会非常庞大，维护起来也会非常复杂。另外，还需要手动实现对象的所有方法和属性，如果对象修改了，则需要手动修改模拟对象。
自动生成模拟
除了手工模拟外，Jest 框架还提供了另一种模拟依赖项的方式，就是自动生成模拟。
自动生成模拟是使用 Jest 框架自动生成的模拟对象，它能够自动实现被模拟对象的全部属性和方法，并支持自定义行为。使用自动生成模拟能够方便快捷地模拟依赖项，减少编写代码的工作量。
示例代码
下面是一个自动生成模拟的示例代码。我们将自动生成模拟 request 模块的 fetch 方法，用于模拟 API 请求的结果。
-- -------------------- ---- -------
--------------------- -- -- -
------------- -- -
--------------------
---
---------- ------ --------- -- -- -
----- ------- - -
------ ---------- -- --
----- -
------- ----------
--
----
--
----------------------- -- -- ---------
----- ------------- - ----------------------
--------------------------------------- ----- - ------- --------- - ---
---
---在上述代码中，我们使用 jest.fn 方法来自动生成模拟的 fetch 方法，使用简单明了，不需要手动编写大量的代码。
自动生成模拟的优缺点
自动生成模拟的好处是能够方便快捷地模拟依赖项，减少编写代码的工作量，同时自动生成的模拟对象也非常方便修改，修改后也能够自动生效。但是自动生成的模拟对象有时候可能会过于简单，无法满足复杂对象的需求，此时需要使用手工模拟。
Jest Mock 参数控制和返回值控制
在使用 Jest Mock 时，可以使用 jest.fn 方法来控制函数的参数和返回值。具体来说，可以使用 mockImplementation 方法来控制函数的返回值，使用 mockReturnValueOnce 方法来控制函数多次调用时的返回值。
控制函数的返回值
const mockFn = jest.fn(() => 42); console.log(mockFn()); // 42
在上述代码中，我们使用 jest.fn 方法来模拟一个返回值为 42 的函数。在函数调用时，直接使用模拟函数，将返回值设置为 42。
如果想要对模拟函数进行更改，可以使用 mockImplementation 方法。
const mockFn = jest.fn(); mockFn.mockImplementation(() => 42); console.log(mockFn()); // 42
在上述代码中，我们先定义了一个空的模拟函数，然后使用 mockImplementation 方法，将模拟函数的返回值设置为 42。
控制函数调用返回值
-- -------------------- ---- ------- ----- ------ - ---------- ------ ----------------------------- ----------------------------- -------------------------- ---------------------- -- ----- ---------------------- -- ----- ---------------------- -- - ---------------------- -- ---------
在上述代码中，我们首先定义了一个空的模拟函数，然后使用 mockReturnValueOnce 方法来设置多次调用时的返回值，最后调用模拟函数时，它将返回“hello”、“world”、“！”三个字符串，调用完三次之后，再次调用，返回值为 undefined。
Jest Mock 的作用与意义
Jest Mock 能够非常方便地模拟依赖项，使得我们能够更加方便地测试被测代码的行为。Jest Mock 能够很好的隔离依赖项的影响，使得我们能够更加方便地测试被测代码的行为。
使用 Jest Mock 能够帮助我们尽早发现代码中的问题，减少后期维护成本。
总结
本文介绍了 Jest Mock 的使用方法和手工模拟和自动生成模拟的区别，详细介绍了手工模拟能够更加灵活地控制依赖项的行为，但是需要手动编写大量的代码；自动模拟能够方便快捷地模拟依赖项，减少编写代码的工作量，但是无法满足复杂对象的需求。此外，我们还介绍了使用 mockImplementation 和 mockReturnValueOnce 方法来控制模拟函数的返回值和多次调用时的返回值。
使用 Jest Mock 能够帮助我们编写更加健壮的单元测试用例，使得我们的代码更加质量和可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ae4d1448841e9894a4d22c