在 React 中，被称为 Hooks 的新特性使得我们能够更好地组织组件逻辑。在使用 React Hooks 时，有一种函数型 Hook 叫做 useCallback()，它用于性能优化，常常用来为需要重复执行的函数创建一个 memoized 版本。但是，与 React 的其他特性一样，使用 useCallback() 是需要测试的，这就是本文要讨论的问题。
关于 Enzyme 自动化测试工具
要使用 useCallback() 创建组件，对于测试组件的嵌套模型以及动态事件的验证，建议使用 Enzyme 自动化测试工具。Enzyme 是由 Airbnb 开发的一种 React 组件渲染和测试工具，它能够使得 React 组件的测试变得更加简单有力。
主题分析
在本文中，我们将提供一个示例，该示例涵盖了：用 useCallback() 创建一个渲染一个页面，并在页面上触发点击事件，通过检查该事件产生的 React 组件是否正确来测试该页面完整性。
创建 ReactDOM
首先，在我们开始进行测试之前，需要创建一个 ReactDOM。通过在项目中的单元测试文件中创建一个 ReactDOM 结构，并将其添加到项目文件夹下的测试文件中，就可以创建该结构，具体方式如下所示：
------ ----- ---- -------- ------ -------- ---- ------------ ----- --- - ------------------------------ ------------- -- - -------------------- --- ----- --- ------------ -- - ------------------------------------- ---
编写测试
现在，我们可以使用 Enzyme 编写具体的测试。我们将使用 mount() 方法来渲染我们的组件，以便能够访问该组件上的事件产生的 DOM 元素。然后我们将在所需的元素上触发一个事件（在我们的示例中是 onClick() 事件），并预期渲染的 DOM 元素与应该渲染的状态相同。下面是示例代码：
------ ------- ---- ---------
------ ------------- ---- --------
------ ----- ---- --------
----------------- --- ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ---------- ----
----- ------ - -----------------------
-------------------------
----- ---- - ---------------------
---------------------------- -------------------------
---
---实现 useState 和 useCallback
最后，我们需要在我们的 App 组件中实现 useState() 和 useCallback() Hook，以确保测试在预期情况下通过。下面是示例代码：
------ ------ ---------- ------------ ---- --------
------ ----- --- - -- -- -
----- --------- ----------- - ----------------
----- ----------------- - ------------
-- -- -
-----------------
--
------------
--
------ -
-----
------- --------------------------------- ------------
-------- -- ------------ ----------------
------
--
--在上述代码中，我们首先使用 useState() Hook 创建了一个 clicked 状态变量，并在 handleButtonClick() 中使用 useCallback() Hook 来创建一个 memoized 版本的处理函数。handleButtonClick() 中，当我们点击该按钮时，会更新状态并将其设置为 True。
结论
在 React 应用程序中使用 useCallback() 是一种性能优化的方式，但您必须进行适当的测试以确保它们按预期工作。在通过 Enzyme 编写应用程序组件测试时，可以使用 mount() 方法和 simulate() 实现 DOM 事件模拟。本文提供了一个示例代码，使用 useCallback() Hook 实现了一个基本的 React 应用程序，并使用 Enzyme 和 Jest 对其进行测试，以此作为参考，帮助你理解如何同时使用 useCallback() 和 Enzyme。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66f79d53c5c563ced5a4cdd2