在前端开发中，我们需要对函数的执行情况进行测试，以确保代码的正确性和稳定性。这个过程需要对函数进行监听，在执行函数的过程中捕获其参数、返回值等信息，以便进行后续的分析和判断。在 React 中，我们可以使用 Enzyme 和 Jest Spy 来实现对函数的监听。
Enzyme 简介
Enzyme 是一个用于 React 测试的 JavaScript 工具库。它提供了一组用于在开发中测试 React 组件的 API，包括渲染、模拟用户事件、查找组件等功能。Enzyme 提供了适合不同 React 版本的 API，可以用于测试基于 React 16、React 17 和 React Native 的应用程序。
Jest Spy 简介
Jest Spy 是 Jest 中的一个模块，它提供了一种方便的方法来对函数进行监听。使用 Jest Spy 可以监控函数的调用情况，捕获参数和返回值等信息，并在测试过程中进行验证和比较。Jest Spy 非常易于使用，只需要调用相应函数的 .mock 方法即可。
监听函数的参数
下面介绍在 Enzyme 中使用 Jest Spy 监听函数的参数的方法。我们假定有一个组件 MyButton，其中包含一个点击事件 handleClick：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- - ------- -- -
----- ----------- - ------- -- -
------------------- ---------- --------------
--
------ -
------- --------------------------- ------------
--
--
------ ------- ---------我们希望能够监听 handleClick 函数的参数，以便在测试中进行比较和验证。为此，我们可以使用 Enzyme 的 simulate 方法模拟用户点击事件，并使用 Jest Spy 监听 handleClick 函数。代码如下：
-- -------------------- ---- ------- ------ --------- ---- --------- ------ -------- ---- ------------- ----------------- ------ -- ------ ---- ------- -- -- - ----- --------------- - ---------- ----- ------- - ----------------- ------------------------- ---- ----- ------ - ----------------------- ----- ----- - -------- ------ --------- ------------------------ ------- ---------------------------------------------------- ---
在这段代码中，我们首先使用 jest.fn() 创建一个 Mock 函数 mockHandleClick，它将被用于监听 handleClick 函数的执行情况。然后，我们使用 shallow 方法创建一个 Enzyme 的渲染器，渲染 MyButton 组件，并从中查找到包含在其中的按钮。之后，我们使用 simulate 方法模拟用户点击，并将 event 对象作为参数传入其中。最后，我们使用 toHaveBeenCalledWith 方法验证 mockHandleClick 函数是否被正确调用，且参数与 event 对象一致。
监听函数的返回值
除了监听函数的参数之外，有时候我们也需要监听函数的返回值，以便进行进一步的验证和比较。在 Enzyme 中使用 Jest Spy 监听函数的返回值非常简单，只需要在创建 Mock 函数时指定返回值即可。代码如下：
-- -------------------- ---- ------- ------ --------- ---- --------- ------ -------- ---- ------------- ----------------- ------ ------ ------ -- -- - ----- --------------- - -------------------------------- ----- ------- - ----------------- ------------------------- ---- ----- ------ - ----------------------- ----- ----- - -------- ------ --------- ----- ------ - ------------------------ ------- ------------------------------------------- -------------------------- ---
在这段代码中，我们指定 mockHandleClick 函数的返回值为 true，并使用 toHaveBeenCalled 方法验证函数是否被正确调用。之后，我们将模拟点击的结果存储在变量 result 中，并使用 toBe 方法判断其是否等于 true。
总结
如上所述，在 Enzyme 中使用 Jest Spy 对函数进行监听非常简单，只需要创建一个 Mock 函数并调用其 .mock 方法即可。使用 Jest Spy 可以非常方便地捕获函数的参数、返回值等信息，以便进行后续的分析和判断。在实际的开发中，我们可以使用这种方法来测试 React 组件中的各种函数，确保代码的正确性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6655a51bd3423812e4a64c9d