在前端开发中，测试框架是不可或缺的工具之一。Jest 是一个被广泛使用的测试框架，它提供了很多方便的功能来测试代码的正确性。其中，Mock 和 Spy 是 Jest 中经常使用的两个概念。它们可以帮助我们轻松地模拟和监控函数的行为，以提高测试的质量和效率。但是 Mock 和 Spy 的用法和功能有所不同，下面我们来详细了解一下它们的差别和用法。
什么是 Mock 和 Spy？
Mock 和 Spy 都是 Jest 中的两个重要概念，它们可以对函数进行模拟和监控，并且可以设置函数的返回值、输出日志、抛出异常等。下面我们分别介绍一下它们的定义和用途。
Mock
Mock 是模拟函数的行为，可以替换原函数的实现，修改函数的返回值或输出等。在 Jest 中，我们可以使用 jest.fn() 来创建一个 Mock 函数。Mock 函数可以帮助我们模拟函数的行为，以提高测试的可靠性和复现性。例如，我们可以使用 Mock 函数来模拟对后端 API 的调用，以保证测试能够稳定运行，并且不会受到外部环境的影响。
// 创建一个 Mock 函数 const mockFunc = jest.fn(); // 设置 Mock 函数的返回值 mockFunc.mockReturnValue(42); // 调用 Mock 函数 console.log(mockFunc()); // 输出 42
在上面的例子中，我们使用 jest.fn() 创建了一个 Mock 函数 mockFunc，然后使用 mockReturnValue() 设置了它的返回值为 42。最后，我们调用了 Mock 函数，并输出了它的返回值 42。
Spy
Spy 是监控函数的调用，记录函数的调用和参数等，并可以设置函数的输出和返回值。在 Jest 中，我们可以使用 jest.spyOn() 来创建一个 Spy。Spy 函数可以帮助我们监控函数的调用，以了解函数的行为和使用情况。例如，我们可以使用 Spy 函数来监控函数调用次数、参数和返回值等，以评估函数的质量和性能。
-- -------------------- ---- ------- -- -------- -------- ------------- -- - ------ - - -- - -- ---- --- -- ----- ------- - -------------------------- ------- -- -- --- -------- ------------------------- ---- -- -- --- ------- -------------------------------- -- -- ---- --- ---------------------------------- -- -- -- ----- --------- ------ --------- --
在上面的例子中，我们定义了一个普通函数 normalFunc，然后使用 jest.spyOn() 创建了一个 Spy 函数 spyFunc，监控了全局对象 console.log 的调用。接着，我们使用 Spy 函数来调用普通函数，并输出了 Spy 函数的调用信息。其中，mock.calls 记录了 Spy 函数的调用次数和参数，mock.results 记录了 Spy 函数的返回值和类型。
Mock 和 Spy 的用法和差别
Mock 和 Spy 都是 Jest 中重要的测试工具，它们的用途和差别如下：
用途
- Mock：用于模拟函数的行为，替换函数的实现，修改函数的返回值或输出等。
- Spy：用于监控函数的调用，记录函数的调用和参数等，并可以设置函数的输出和返回值。
差别
- Mock：通常用于替换函数的实现，返回预置的值或数据，而不是真正的结果。Mock 函数可以不调用原函数，但是也可以用于测试原函数的调用情况。
- Spy：通常用于记录函数的调用和参数，输出和返回值通常与原函数保持一致。Spy 函数必须调用原函数，以记录准确的调用情况和返回值。
总的来说，Mock 和 Spy 在测试中都有着非常重要的作用，具体的使用方式和场景，需要根据具体的开发需求和测试需求来确定。下面我们将结合示例代码，进一步说明 Mock 和 Spy 的使用方法和注意事项。
示例代码
下面是一个使用 Mock 和 Spy 测试的示例代码，它模拟了一个三方登录的功能，包括调用后端 API 和处理用户数据等。我们将分别使用 Mock 和 Spy 函数来测试该功能，看它们的表现和效果。
Mock 示例代码
-- -------------------- ---- -------
-- ---------
----- -------- ------------------------- --------- -
--- -
----- --- - ----- -------------------------------------------------------------
----- ---- - ----- -----------
------ -
--- --------
--------- --------------
------ ----------
--
- ----- --- -
-----------------
------ -----
-
-
-- ------
------------------------- ---------- -- -- -
------------- ---- ---- ---- ----- ------------- ----- -- -- -
-- -- ---- --
----- --------- - ----------
----- -------- - ----------
------------ - ----------
-- -- ---- -------
----- -------- - - --- -- --------- ------- ------ ------------------ --
-------------------------------------
-- -- ---- ----
--------------------------------- ----- -------- ---
----- ------ - ----- ----------------------- ------------
-- -- ---- -----
------------------------------------------------------------------------------------
------------------------------------
-- ------
---------------------------------
---
------------- ---- ---- ------- ------------- ----- -- -- -
-- -- ---- --
----- --------- - ----------
------------ - ----------
-- -- ---- ----
----------------------------------- -------------- ---------------
----- ------ - ----- ----------------------- -----------
-- -- ---- -----
-----------------------------------------------------------------------------------
-- ------
--------------------------
---
---在上面的代码中，我们使用 jest.fn() 来创建了两个 Mock 函数 mockFetch 和 mockJson，它们分别模拟了对后端 API 的调用和返回的 JSON 数据。接着，我们使用 mockResolvedValue() 和 mockRejectedValue() 分别设置了 Mock 函数的返回值，以模拟不同的结果。最后，我们分别调用了 getMock() 和 mockRejectedValue() 来测试了输入正确和错误的情况，在测试中使用 expect() 校验了 Mock 函数的调用和返回值，以及待测函数的正确性。
Spy 示例代码
-- -------------------- ---- -------
-- -------
-------- --------------- ----- -
------------------ -------- -------- ---- ---- --------------------------
-
-- ------
------------------ ---------- -- -- -
---------- ----- ---- ------- ------ -- -- -
-- -- --- --
----- ------ - -------------------------- -------
-- -- --- ----
----------------- - -- --- -- -- ---
-- -- --- -----
------------------------------------------ ----- -------- ---- ---- ------------------
---
---在上面的代码中，我们使用 jest.spyOn() 创建了一个 Spy 函数 spyLog，监控了全局对象 console.log() 的调用。接着，我们调用了 logEvent() 函数，并输出了其中的参数。最后，我们使用 expect() 校验了 Spy 函数的调用和参数，并断言它与原函数的调用和参数相同。
总结
Mock 和 Spy 都是 Jest 中非常重要的测试工具，它们可以帮助我们轻松地模拟和监控函数的行为，以提高测试的质量和效率。使用 Mock 和 Spy 可以避免对实际函数的依赖，减少测试的复杂度和耦合性。在编写测试用例时，可以选择 Mock 函数进行模拟测试，也可以选择 Spy 函数进行监控测试，具体的选择方式需要根据具体的开发需求和测试需求来确定。最后，我们需要注意使用 Mock 和 Spy 的正确方法和注意事项，以避免测试的误差和错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651bd70495b1f8cacd373273