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 注入。下面是一个示例代码:
// 引入 Enzyme,并配置 React 适配器 import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; Enzyme.configure({ adapter: new Adapter() });
步骤三:编写测试
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