React 组件测试工具:Enzyme 的使用经验分享和技巧掌握

阅读时长 9 分钟读完

React 组件测试是前端开发中非常重要的一部分,它能够确保代码质量和功能稳定性。其中一个重要的测试工具就是 Enzyme,在 React 社区中被广泛应用。Enzyme 提供了一系列 API,能够方便地操作 React 组件,断言它们的行为和状态。

本篇文章将分享 Enzyme 的使用经验和技巧,帮助读者掌握测试 React 组件的能力。

Enzyme 基础概念

Enzyme 是 Airbnb 团队开发的一款用于测试 React 组件的工具。它提供了三个工具类:Shallow, Mount, 和 Render,每个类的职责如下:

  • Shallow:用于单元测试,浅渲染组件,只渲染第一层子组件,并不涉及子组件内的交互;
  • Mount:用于组件集成测试,完全渲染组件及其所有子组件,可以测试交互、事件处理等功能;
  • Render:与 Mount 类似,但是渲染成静态 HTML,并返回一个类似于 jQuery 对象的 CheerioWrapper 对象。

总之,我们使用 Shallow 进行细节测试,使用 Mount 进行集成测试。

安装 Enzyme

使用 Enzyme 很简单,可以通过以下命令来安装:

其中,enzyme 是 Enzyme 的核心库,enzyme-adapter-react-16 是 React 16 适配器,react-test-renderer 是 React 提供的一个测试库,与 Enzyme 配合使用可以渲染并查询 React 组件树。需要注意的是,只有安装了适配器才能使用 Enzyme。目前,Enzyme 支持 React 16 及以上版本。

Enzyme API

shallow

shallow 方法用于浅渲染组件,它只渲染组件的第一层子组件,而不渲染子组件中的交互。使用 shallow 方法可以快速测试组件的渲染和 props,例如:

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

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

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

在上面的例子中,我们测试了一个简单的组件 Hello,并断言它渲染出的文本是否正确。这个例子中,我们使用了 shallow 方法来浅渲染 Hello 组件。我们使用 expect(wrapper.text()).toEqual('Hello, Charlie!'); 断言 hello 组件渲染出的文本是否与预期值相同。

mount

mount 方法会完全地渲染组件,并且能够访问和操作其所有子组件。如果要测试组件的交互和事件处理,需要使用 mount 方法。

比如,我们有一个表单组件 Form,它包含一个输入框和一个提交按钮。我们想测试该组件是否能够对用户的输入做出正确的响应。

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

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

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

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

在上面的例子中,我们测试了表单组件的交互和事件处理。在第一个测试中,我们找到了输入框并模拟输入“Hello, world!”,然后我们断言了该组件的状态是否更新正确。在第二个测试中,我们测试了提交按钮的点击事件,并断言 onSubmit 方法是否被正确调用。这个例子可以帮助我们理解 mount 方法如何使用。需要注意的是,完全渲染组件会比较耗时,因此,我们应该根据需要使用 shallowmount 方法。

render

render 方法将组件渲染成静态 HTML,并返回一个类似于 jQuery 对象的 CheerioWrapper 对象。这个方法主要用于测试组件的渲染输出和 props。

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

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

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

在上面的例子中,我们测试了一个简单的组件 Hello 渲染时产生的文本内容是否符合预期结果。这个例子中,我们使用了 render 方法将 Hello 组件渲染成了静态 HTML,然后使用 find 方法找到 .greeting 对应的元素,查找它的文本内容是否符合预期结果。

Enzyme 经验分享

Enzyme 的初始化

Enzyme 的初始化需要根据 React 对应的版本适配,适配器需要在初始化时候注册。可以在 src/setupTests.js 中进行初始化,确保在所有测试开始前执行。

断言 API

Jest 提供了丰富的断言 API,可以具体到组件,方法,属性等的测试。常用的断言方法包括 toBetoEqualtoBeTruthytoContaintoMatch 等。

取值 API

在 Enzyme 中,我们通常使用 findfirstlastatget 方法来访问元素、查询属性和值。

模拟事件

Enzyme 提供了模拟事件的 API,例如 simulate 方法。

异步 API

Enzyme 支持异步函数,常用方法包括 async/await 和 Promise 等。在异步处理中,我们需要使用 act 方法来强制执行 React 组件状态的更新。

结语

Enzyme 是一个强大的测试工具,它能够测试 React 组件的状态和行为。本文介绍了 Enzyme 的基础概念,以及常用的 API。希望本文能够帮助读者掌握 Enzyme 的使用能力,并在 React 组件测试中发挥作用。

示例代码可见:https://github.com/AI-Gomez/open_knowledge_base/tree/main/React%E7%BB%84%E4%BB%B6%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7-Enzyme

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

纠错
反馈