前言
React 组件的测试是不可或缺的一部分，这不仅可以帮助我们快速发现组件的问题，还可以提高组件的可维护性和可扩展性。而 Enzyme 就是 React 的一个强大的测试工具，本文将介绍如何使用 Enzyme 来测试 React 组件的无状态组件。
Enzyme 是什么？
Enzyme 是一个针对 React 的 JavaScript 测试工具库，由 Airbnb 团队开发维护。它提供了一组简单的 API，可以轻松地操作 React 组件，进行快速高效的单元测试和集成测试。
Enzyme 主要提供了三种渲染方式：shallow、mount 和 render。
- shallow：只渲染组件本身，不会渲染子组件；
- mount：完整渲染组件树，可以模拟完整的生命周期和交互特性；
- render：使用 cheerio 将组件渲染成静态 HTML，可以用于测试 SSR（服务器端渲染）或纯组件。
本文重点介绍 shallow 的使用。
为什么要测试无状态组件？
在 React 中，组件可以分为有状态组件和无状态组件。
有状态组件（Stateful Component）是指拥有自己的状态（state）的组件，其状态的改变会导致组件的重新渲染，例如 Class Component。而无状态组件（Stateless Component）则是指不拥有自己的状态，所有的状态都由外部传入。无状态组件通常是一个纯函数，只有 props 和 context 作为参数，返回组件的结构（JSX）。
但是，即使无状态组件没有内部状态，我们也需要对它们进行测试。这是因为有时我们会在无状态组件中进行逻辑判断、计算等操作，这些操作也需要进行测试。另外，无状态组件的可测试性和可维护性要远高于有状态组件。
如何测试无状态组件？
下面我们以一个简单的无状态组件为例，来介绍如何使用 Enzyme 测试无状态组件。假设我们有一个组件，用于展示一个名字和一张图片：
------ ----- ---- --------
----- ------ - -- ----- --- -- -- -
---- -------------------
---- --------- --
----- ------------------------------
------
--
------ ------- -------接下来我们编写相应的测试代码。
安装 Enzyme
首先我们需要安装 Enzyme，以及一些必要的依赖：
--- ------- ---------- ------ ----------------------- -------------------
因为 Enzyme 会与不同版本的 react-dom 和 react-router-dom 兼容性问题，我们建议版本号固定：
--------- ---------- -------------------------- ---------- -------- ----------- ------------ ----------- ------------------- --------
在引入 Enzyme 时需要先进行适配，这里我们使用 enzyme-adapter-react-16：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
测试组件的结构
我们可以通过 shallow() 方法来进行组件的测试。shallow() 方法将我们创建的组件浅渲染一遍，这意味着它只会渲染组件本身，而不会渲染子组件。
首先，我们需要编写一个测试文件（avatar.test.js）：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
----------------- ---- -- -- -
------------- -- -- -
----- ------- - --------------- ----------- -------------- ----
---------------------------------------------------------
--------------------------------------------------
---
---其中，describe() 方法用于表示对组件的整体描述，it() 方法用于表示具体的测试用例。
在这里，我们用 shallow() 方法来渲染组件，然后可以通过 find() 方法找到相应的元素，进而进行断言。
在这个测试用例中，我们测试了组件渲染后，是否正确地展示了图片和名字。
测试组件的事件
在测试组件的事件时，我们需要通过 simulate() 方法来触发相应的事件。
下面是一个与按钮相关的组件，它的功能是在点击按钮时，在 console 中输出一条信息：
------ ----- ---- -------- ----- ------ - -- ----- -- -- - ------- ----------- -- -------------------- ---------------------------- -- ------ ------- -------
我们可以编写一个测试用例，模拟点击事件，确保它能够正常地输出信息。
------------ -- -- - ----- ---------- - ------------------- ------- ----- ------- - --------------- ------------ --- ---- ----------------------------------------- ------------------------------------------------ ----- ----- ---
其中，jest.spyOn(console, 'log') 的作用是监听 console.log 的输出，以判断其是否被调用过。
通过 find() 方法找到按钮元素，然后使用 simulate() 方法模拟点击事件，在测试用例中进行相应的断言。
总结
本文介绍了如何使用 Enzyme 测试 React 组件的无状态组件。通过 shallow() 方法渲染组件，然后使用 find() 方法进行查找元素，使用 simulate() 方法模拟事件，可以有效地测试组件的结构和功能。相信这些技巧会对你的组件测试有所帮助。
示例代码
完整的示例代码可以在我的 github 中找到：Avatar.js 和 avatar.test.js。
参考资料
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653630127d4982a6ebe184e1