Enzyme 中如何测试 React 组件中的 Ref
React 中的 Ref （也称引用）提供了对组件的直接引用，使得开发人员可以访问组件内部的 DOM 堆栈。这个特性在开发 React 组件时是非常有用的，但是在测试过程中，使用 Ref 会导致许多问题。Enzyme是React生态系统中广泛使用的一个测试工具，本文将详细介绍Enzyme中如何测试Ref。
什么是 Enzyme？
Enzyme 是一个 React 组件测试工具，它由 Airbnb 开发并维护，并基于 React TestUtils 构建而来。Enzyme 提供了一套用于生成仿 DOM 结构、渲染组件、查找节点以及模拟事件的 API，它的作用是让 React 组件测试更容易、更高效、更准确。
为什么使用 Enzyme 测试 Ref？
React 组件的 Ref 在测试中是很特殊的，这是因为 Ref 通常是使用实例变量定义的，在测试中，我们需要手动引用实例变量，这可能会导致反人类的测试用例，因此我们需要 Enzyme 来解决这个问题。
步骤一：安装 Enzyme
为了使用 Enzyme，你需要首先在项目中安装它。可以在终端中使用下面的命令。
npm install --save-dev enzyme
步骤二：在测试文件中导入 Enzyme
在测试文件中，你需要导入 Enzyme，并将 ReactAdapter 注入。下面是一个示例代码：
-- -- ---------- ----- --- ------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
步骤三：编写测试
Ref 是用于访问组件的实例变量的一种方式，让我们先看一个 Ref 示例的组件：
------ ------ - --------- - ---- --------
----- ---------- ------- --------- -
------------------ -
-------------
------------- - ------------------
-
------------ -
------------------------------
-
-------- -
------ -
-----
------ ----------- ------------------- --
------- ----------- -- ------------------------ --------------
------
--
-
-
------ ------- -----------在这个例子中，我们定义了一个名为 inputRef 的 Ref，它是通过 React.createRef() 方法来创建的。用于聚焦输入框的 focusInput 方法，在点击按钮时将聚焦已经绑定到 Ref 上的输入框。
我们现在想要测试这个组件，但是 Ref 在测试中是不可见的。我们可以通过以下代码在 Enzyme 中测试 Ref：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---------- ---- ---------------
-------------------- ----------- -- -- -
---------- ----- -- ------ ------- -- -- -
----- ---- - ------------------- ----
----- --- - --------------------------- --------------
------------------------------
--------------------------------------
-------------------------------
------------------
---
---这个测试案例检查是否调用了 focusInput() 方法，在这里我们使用 spy 来监视方法调用次数，以确保方法被调用。如果组件的 Ref 是被调用的，测试用例应该是通过的。
这里的 trick 是 Enzyme 的 shallow() 方法。默认情况下，我们使用 shallow() 方法来渲染组件并绕过其所有子组件，这使我们可以在没有实际渲染组件的情况下，只检查组件实例。然后我们强制扰动组件并使用 find() 方法来查找按钮，并调用simulate('click')方法来模拟按钮单击，以测试按钮是否可以激活 Ref。
需要注意的是，不要在测试中使用 Ref，这是因为它们通常是在组件的实例变量中定义的。如果这样做，您的测试用例和组件实例之间可能存在了依赖性。为确保组件的正确性和可测试性，请使用一个像Enzyme这样的测试工具。
结论
使用 Enzyme 来测试 Ref 使我们能够更好地开发和测试 React 组件。如果你的 React 应用程序中使用了 Ref，那么你应该考虑使用 Enzyme 进行测试。
测试 Ref 存在一些挑战，这是因为 Ref 不是通常使用的组件 props。在这篇文章中，我们介绍了如何使用 Enzyme 来测试组件中的 Ref。我们必须强调的是，不要在测试中使用 Ref，因为它们通常是在组件的实例变量中定义的。如果你在开发 React 组件，并使用 Ref，Enzyme 是一款非常不错的测试工具。
代码示例：https://codesandbox.io/s/optimistic-rain-rlbp8
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66fce5284471362601745c42