在测试前端应用程序时，一种常见的方法是使用模拟测试（mock testing）。这种方法可以模拟应用程序的不同部分并检查它们之间的交互是否正确。Enzyme 是一个流行的 React 测试工具，它提供了许多有用的工具来简化测试过程。其中一个重要的概念是“间谍模式”。
什么是间谍模式？
间谍模式是 Enzyme 提供的一种测试方法，可以用来检查组件到 React 生命期期间发生的所有行为，如组件渲染、状态更改、事件触发等。在间谍模式下，我们可以拦截组件方法的调用，并检查它们的参数和返回值。
使用间谍模式，我们可以在测试中重复创建和销毁组件，而不必担心状态或事件处理存在副作用的问题。
如何在 Enzyme 中使用间谍模式？
Enzyme 中有两种方法来使用间谍模式：spyOn 和 jest.spyOn。
spyOn
spyOn 是 jasmine 开源库中提供的一个间谍函数。我们可以使用 spyOn 函数来拦截函数的调用并记录它们的调用数量、调用参数和调用结果。
以下是一个示例代码，使用 spyOn 来拦截组件的 onClick 方法调用：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
--------------- --------- -- -- -
----- -------------- - -- -- -
----- ----------- - -- -- -
------------------- ----------
-
------ -
-----
------- --------------------------- ------------
------
--
-
-------- ------- -------- ---- ------ -- --------- -- -- -
----- -------------- - ------------------------------------ ---------------
----- ------- - --------------------- ----
-----------------------------------------
------------------------------------------
-----------------------------
---
---在这个示例中，我们使用 jest.spyOn 来创建一个间谍函数，拦截 DummyComponent 中的 handleClick 方法。我们通过 mount 函数渲染 DummyComponent，并使用 .simulate('click') 模拟按钮点击事件。最后，我们使用 expect 检查 spyHandleClick 是否被调用。
jest.spyOn
如果 jest 对您的 React 应用程序进行测试，则建议使用 jest.spyOn。jest.spyOn 是 Enzyme 提供的另一个间谍模式，它可以更好地与 jest 集成，并通过使用 mockImplementation 方法来模拟函数的返回值。以下是使用 jest.spyOn 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
-------------------- --------- -- -- -
----- -------------- - -- -- -
----- ------- --------- - ------------------
----- ----------- - -- -- -
-------------- - ---
-
------ -
-----
--------- -----------
------- --------------------------- ------------
------
--
-
-------------- ----- ---- ------ -- --------- -- -- -
----- ----------- - ----------------- ------------
------------------------------------------ -- ----------- ------------
----- ------- - --------------------- ----
-----------------------------------------
---------------------------------------- ----
--------------------------
---
---在这个示例中，我们使用 jest.spyOn 来拦截 React.useState 方法。我们使用 mockImplementation 方法来模拟 useState 方法的返回值。我们通过 mount 函数渲染 DummyComponent，并使用 .simulate('click') 模拟按钮点击事件。最后，我们使用 expect 检查组件中的计数是否增加。
总结
间谍模式是测试前端应用程序时的重要工具之一。它可以帮助您检查组件中的所有行为，包括组件渲染、状态更改、事件触发等。在 Enzyme 中，您可以使用 spyOn 或 jest.spyOn 来创建一个间谍函数，并拦截函数的调用。 如果您正在使用 jest 进行测试，建议使用 jest.spyOn，因为它与 jest 更好地集成，并可以模拟函数的返回值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd6b2b95b1f8cacdcd764c