Enzyme 之渲染组件的元素 / 类名

阅读时长 5 分钟读完

Enzyme 是一个 React 测试工具库,它提供了一组 API,可以用于测试 React 组件的渲染结果。其中,shallow 函数用于浅渲染组件,并返回包含测试组件的信息的 wrapper 对象,这个 wrapper 对象提供了很多有用的方法,用于检查渲染结果是否符合预期。本文将介绍如何使用 Enzyme 渲染组件的元素和类名,并提供一些示例代码,以帮助新手更好地理解和使用 Enzyme。

渲染组件的元素

要渲染组件的元素,我们可以使用 find 方法。这个方法接受一个 CSS 选择器作为参数,返回一个新的 wrapper 对象,这个对象包含了符合选择器的所有元素。我们可以使用 find 方法查找组件中的元素,并检查元素的属性和文本内容是否符合预期。

-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------

------------------ -------- --- --------- ---

-------- ----------- -
  ------ ------------------------
-

-------- ----- -
  ------ -
    -----
      ------------------
      ------------------
    ------
  --
-

--------------- -- -- -
  ----------- --- ---- ------------ -- -- -
    ----- ------- - ------------ ----
    -------------------------------------------
    -------------------------------------------------------------------
    -------------------------------------------------------------------
  ---
---

在这个例子中,我们定义了两个组件 TextAppApp 组件渲染了两个 Text 组件。然后我们使用 shallow 函数浅渲染 App 组件,并使用 find 方法查找 Text 组件。我们期望找到两个 Text 组件,并检查它们的文本内容是否符合预期。这个测试用例通过了。

渲染组件的类名

要渲染组件的类名,我们可以使用 hasClass 方法。这个方法接受一个字符串作为参数,表示要检查的类名。如果组件渲染了这个类名,那么这个方法会返回 true,否则返回 false

-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------

------------------ -------- --- --------- ---

-------- ------------- -
  ------ -
    ------- --------------------------- ------------------------
      ----------------
    ---------
  --
-

------------------ -- -- -
  ------- --- ------- ----- ---- -- -- ---------- -- -- -
    ----- ------- - --------------- --------------------- -------------- -------------
    ---------------------------------------------------
    --------------------------------------------------
  ---

  -------- --- ---- --- ------- ----- ---- -- -- --------- -- -- -
    ----- ------- - --------------- --------------------------- -------------
    ---------------------------------------------------
    -------------------------------------------------
  ---
---

在这个例子中,我们定义了一个 Button 组件。这个组件接受两个属性:classNamedisabledclassName 表示要渲染的类名,disabled 表示按钮是否被禁用。我们分别测试了 Button 组件处于禁用和非禁用状态时,渲染的类名是否符合预期。测试通过了。

总结

Enzyme 是一个非常好用的 React 测试工具库,它提供了丰富的 API,可以帮助我们测试 React 组件的渲染结果。在本文中,我们介绍了如何使用 Enzyme 渲染组件的元素和类名,并提供了相应的示例代码。当你需要测试 React 组件时,不妨尝试使用 Enzyme,相信你会对它的便利性和灵活性感到印象深刻。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64577a33968c7c53b0a2ad21

纠错
反馈