前言
在使用 React 开发 web 应用时，单元测试是必不可少的一部分。在 React 组件中，可能会包含一些隐藏元素（如用 CSS display: none 或 visibility: hidden 等属性隐藏的元素）或者使用了无障碍技术 <aria-hidden>，这些元素在单元测试中很容易被忽略掉，从而导致测试的不完整性。本文将介绍如何使用 Enzyme 测试 React 组件中包含的隐藏元素。
Enzyme 简介
Enzyme 是一个 React UI 测试工具库，提供了深度渲染 React 组件的方法，可以帮助我们在单元测试中模拟用户操作和行为。Enzyme 支持三种渲染方式：shallow、mount 和 render。其中，shallow 的渲染方式比较轻量，只渲染当前组件层级，不渲染子组件；mount 的渲染方式更加完整，会递归渲染所有子组件，并且可以测试组件的生命周期；render 的渲染方式与 mount 类似，不同之处在于它不会将 DOM 添加到文档中，而是返回一个字符串形式的 HTML，可用于生成静态 HTML。
测试隐藏元素
我们先来看一个包含隐藏元素的 React 组件的例子：
-- -------------------- ---- -------
------ ----- ---- -------
-------- ------------- -
------ -
-----
------------------
---- -------- -------- ------ ---------------
------
-
-
------ ------- -----------在这个组件中，第二个 <div> 元素使用 display: none 属性隐藏了起来。我们需要测试它的存在性和是否包含正确的文本信息。
shallow 测试
我们可以使用 shallow 方法来测试该组件。由于 shallow 只渲染当前组件层级，我们需要使用 find 方法来查找隐藏元素。代码如下：
-- -------------------- ---- -------
------ - ------- - ---- --------
------ ----------- ---- ---------------
----------------------- -- -- -
---------- ------ ------ --------- -- -- -
----- ------- - -------------------- ---
----- ------------- - ----------------------- -------- -------- -----
-----------------------------------------
-------------------------------------------
--
--find 方法接受一个包含属性选择器的字符串，我们可以通过字符串模板来构造属性选择器：[style={{ display: \'none\' }}]。这里需要注意，我们需要使用两层转义，因为属性选择器中的字符串需要包含在 '' 中。
mount 渲染
如果我们使用 mount 方法进行测试，我们会发现通过 find 方法无法找到隐藏元素。这是因为 mount 方法会递归渲染所有子组件，包括隐藏的元素，因此需要通过 querySelector 方法来查找。
-- -------------------- ---- -------
------ - ----- - ---- --------
------ ----------- ---- ---------------
----------------------- -- -- -
---------- ------ ------ --------- -- -- -
----- ------- - ------------------ ---
----- ------------- - ---------------------------------------------------- ---------
----------------------------------
------------------------------------------------
--
--在这个例子中，我们使用 getDOMNode 方法来获取包装器组件的根节点，并使用 querySelector 方法来查找隐藏元素。我们需要使用 CSS 属性选择器来准确地匹配元素，这里使用了 [style="display: none;"]。
当然，如果我们使用了 <aria-hidden> 等无障碍技术，也可以根据具体情况使用相应的属性选择器来查找元素。
总结
本文介绍了如何使用 Enzyme 测试 React 组件中的隐藏元素，通过 shallow 和 mount 方法，我们可以分别针对组件层级和 DOM 结构进行测试。这些方法很实用，可以帮助我们在单元测试中更好地捕获隐藏元素和细节，从而保证代码的质量和正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ea80948841e9894e5bd69