在进行前端开发时，我们经常需要引用一些第三方的库或文件。在进行单元测试时，这些依赖项的存在可能会造成一些问题。为了避免这些问题，我们可以使用 Mock（模拟）技术。Jest 是一个流行的 JavaScript 测试框架，它提供了 Mock 功能，可以模拟依赖项，使我们的测试更加精准。本文将介绍在 Jest 测试中 Mock 依赖的最佳实践。
核心概念
在 Mock 功能实现之前，我们需要先理解一些核心概念：
被 Mock 的依赖项
在进行单元测试时，我们可能需要测试某个函数或模块的功能，但是这个函数或模块依赖于其他函数或模块的输出结果。这些依赖项就是我们要 Mock 的对象。
Mock 对象
Mock 对象就是一个模拟的对象，用于替换真正的依赖项。Mock 对象可以是纯粹的对象、函数、类等等。
Jest 提供的 Mock 函数
在 Jest 中，有两种 Mock 函数：
jest.fn()：可以模拟一个函数，并监视其调用情况，返回值等信息。jest.mock()：可以模拟一个模块，并提供不同的输出结果，使被测试的函数或模块不需要实际调用到真正的依赖项。
最佳实践
基于以上核心概念，下面介绍在 Jest 测试中 Mock 依赖的最佳实践。
1. 配置 jest.mock()
在使用 Mock 功能前，我们需要配置 jest.mock() 来替换实际的依赖项。以一个简单的示例函数为例：
-- -------------------- ---- -------
-------- ----------- -
------ --- --------------- -- -
---------------
--
-
-------- --------- -
------ --------------------- -- -
---------------------- -----
--
-
-------------- - -
-------
-getUser 函数依赖于 fetchData 函数的输出结果，现在我们需要对其进行测试。首先需要配置 jest.mock() 以替换掉 fetchData 函数：
jest.mock('./fetchData')还可以进行更详细的配置，例如：
jest.mock('./fetchData', () => {
return () => {
return Promise.resolve('mock data')
}
})这样，当 getUser 函数被测试时，就会自动调用 Mock 函数，并返回 'mock data' 而不是实际的结果。
2. 使用 jest.fn() 监视函数调用
在测试某些函数时，我们需要知道函数是否被正确调用、参数是否正确等等。此时可以使用 jest.fn() 创建一个 Mock 函数并监视其调用情况。
-- -------------------- ---- -------
----- --------- - ---------- -- ------------------------
-------- --------- -
------ --------------------- -- -
---------------------- -----
--
-
--------------- ----- -- -- -
----- ---------
------------------------------------
--jest.fn() 可以使用匿名函数将返回值设置为 Mock 数据，监视函数调用情况后，我们可以使用 toHaveBeenCalled() 进行断言，确保函数被调用。
3. Mock 依赖项输出的数据
当依赖项输出的数据在测试中不稳定时，我们可以使用 jest.fn() 创建 Mock 函数并设置特定返回值，模拟不同的输出情况。
-- -------------------- ---- -------
------------------------ -- -- -
------ ---------- -- --------------------- -------
--
------------- ---- ---- ------ ----- -- -- -
----- ---------
-------------------------------------------
-------------------------------------------------- ------
--通过使用 jest.fn() 和 Promise.resolve()，我们可以模拟一个返回 Mock 数据的函数，确保测试稳定性。
4. Mock 对象的多种返回值
在测试某个函数时，可能需要对该函数的多种调用情况进行测试。对于这种情况，我们可以使用 jest.fn() 在每次被调用时返回不同的结果。
-- -------------------- ---- -------
----- --- - ---------
--------------------------- -- -- ---------------------
--------------------------- -- -- --------------------
--------- ---- --------- -------- ----- -- -- -
------------ ------ -----------
------------ ------ -------------------
------------------------------------
------------------------------------
------------------------------------
------------------------------------
--使用 Mock 函数时，可以使用 mockImplementationOnce() 方法来实现多种（不同）返回值。在上面的示例中，add 函数第一次被调用时返回 Promise.resolve，第二次被调用时返回 Promise.reject。
5. Mock 构造函数
在测试某些模块时，可能需要模拟一个类或函数，以便测试其他依赖对象或模块的正确性。我们可以通过 Mock 构造函数来实现这一点。
-- -------------------- ---- -------
----- ---------- -
------------- -
-------- - -
-
-------- -
-------- -- ---
-
-
---------------- ----- -- -- -
----- ---- - ---------
---------- - ----
----- ---------- - --- ------------
-----------------
-------------------------------------
------------------------------
--在这段代码中，我们将构造函数 Calculator 与 Mock 函数 jest.fn() 关联，并使用 new 运算符创建一个 Mock 对象 calculator。此时可以测试 calculator 的正确性，也可以通过 mock 的属性 toHaveBeenCalledTimes() 来断言函数被正确调用。
结论
通过本文，我们了解了在 Jest 测试中 Mock 依赖的最佳实践，其中主要包括：
- 配置
jest.mock()替换被测试函数的实际依赖项。 - 使用
jest.fn()监视函数调用情况，确保函数被正确调用。 - Mock 依赖项输出的数据，确保测试稳定性。
- Mock 对象的多种返回值，模拟函数不同的调用情况。
- Mock 构造函数，模拟一个类或函数，以便测试其他依赖项或模块的正确性。
这些最佳实践将帮助你更好地进行单元测试，确保你的前端代码的正确和稳定。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67202f9c2e7021665e0112be