在前端开发中，测试是一个必不可少的步骤。而 Jest 是一个非常流行的 JavaScript 测试工具。它提供了很多强大的功能，其中之一就是 Mock。Mock 可以帮助我们在测试时创建虚拟的对象或函数，以便我们可以轻松地测试代码逻辑。然而，当我们滥用 Mock 时，它可能会对我们的测试产生不良影响。因此，在本文中，我将分享一些避免过度 Mock 的方法，帮助您编写更好的 Jest 测试。
什么是过度 Mock？
在编写 Jest 测试时，Mock 经常用于模拟代码的依赖项。比如，我们可以使用 Mock 来模拟 API 请求、浏览器 API、第三方库等。然而，当我们使用过多的 Mock 时，它会使我们的测试变得脆弱且难以维护。以下是一些可能导致过度 Mock 的情况：
- Mock 太多的模块，使测试代码不自然且难以理解。
- 在测试对象本身的方法时，Mock 它所依赖的对象。
- Mock 太多的浏览器 API/Node.js 模块，使测试变得不可靠。
在这些情况下，过度 Mock 可能会导致我们的测试变得不稳定，并且难以跟踪错误。因此，我们应该尽量避免过度 Mock。
避免过度 Mock 的方法
1. 测试真实依赖
当我们测试一个方法或组件时，应该尽可能使用真实的依赖。这可以帮助我们避免 Mock 太多的模块，使测试代码更自然且易于理解。如果我们必须 Mock 一个模块，应该尽可能 Mock 最少的功能，并只 Mock 它必需的部分。
以下是一个使用真实依赖的示例：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- ----------- -
----- -------- - ----- -----------------------
------ --------------
-
--------------- ------ ------ ------ ----- -- -- -
----- ---- - ----- ------------
---------------------- -------- ------ ------ ---
---在此示例中，我们使用真实的 axios 模块，而不是 Mock 它。我们只 Mock 了 API 请求的结果，因为我们无法控制 API 的响应。通过这种方式，我们可以避免 Mock 太多的模块，使测试代码更自然。
2. 使用 Jest 提供的 Mock 功能
Jest 提供了丰富的 Mock 功能，可以帮助我们模拟模块和对象。使用 Jest 提供的 Mock 功能可以使我们的测试代码更简洁且易于维护。以下是一些使用 Jest Mock 功能的示例：
-- -------------------- ---- -------
------ - ---------- ---------- - ---- ----------------
------ - --------- - ---- -----------------
----------------------------
--------------- ------ ---- ----------- ----- -- -- -
----- ------------
-------------------------------------------- ----------
---
---------------- ------ --- ---- ----------- ----- -- -- -
----- -------------
-----------------------------------
---在此示例中，我们使用了 Jest 的 Mock 功能来模拟 emailService 模块。在第一个测试用例中，我们断言了 fetchUser() 方法是否调用了 sendEmail() 方法，并传递了正确的参数。在第二个测试用例中，我们断言 updateUser() 方法未调用 sendEmail()。
3. 尽可能避免 Mock 浏览器 API/Node.js 模块
Mock 浏览器 API/Node.js 模块可以帮助我们测试 code 在不同环境下的行为。然而，我们应该尽可能避免过多地 Mock 浏览器 API/Node.js 模块。因为这可能会导致我们的测试变得不可靠，因为我们无法测试真正的环境中的行为。
以下是一个示例，演示了如何 Mock 浏览器 API：
-- -------------------- ---- -------
------ - ------------ ------------- - ---- --------------------
----- ---------------------- - ------------ --
---- ------- - --------- ----- ---------- ---- - --
--
------------- -- -
-- ---- --- ------------ ----------- - ------------- ----
--------------------- - -
------------------- -----------------------
-------------- ------------ -- -
----- -- - -------------- -- ---- ------- - --------- ----- ---------- ---- - --- ------
------ ---
---
----------- ------------ -- -------------------
--
---
----------------- ------ ------ ------- ---------- ----- -- -- -
----- -------- - ----- --------------
-------------------------- --------- ----- ---------- ---- ---
---在此示例中，我们使用了 Jest 的 Mock 功能来模拟浏览器 navigator 对象的 geolocation 属性。在此示例中，我们使用了 Mock 来模拟 getCurrentPosition() 和 watchPosition() 方法，以便 getLocation() 方法和 watchPosition() 方法正常工作。虽然使用 Mock 来模拟浏览器 API 很有用，但我们应该尝试限制其使用，以避免测试变得不可靠。
总结
在 Jest 测试中，我们需要使用 Mock 来模拟代码的依赖项，以便更轻松地测试代码逻辑。然而，过度 Mock 可能会影响我们的测试，使其变得不稳定且难以维护。因此，我们应该尽量避免过度 Mock。我们应该尽可能使用真实的依赖，并尽可能使用 Jest 提供的 Mock 功能。我们还应该尽可能避免 Mock 浏览器 API/Node.js 模块，因为这可能会导致我们的测试变得不可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b0d30f48841e9894d01cf0