在 React 应用中，组件是组成我们应用的主要模块，因此测试 React 组件的重要性不言而喻。Enzyme 是 React 中最受欢迎的测试实用程序之一，它允许您针对不同的组件进行测试，并使测试组件变得高效和精确。在本文中，我们将学习如何使用 Enzyme 来测试 React 应用程序中的分页器组件。
第一步：安装和配置 Enzyme
首先，我们需要安装 Enzyme 和与之兼容的 adapter。适配器是 Enzyme 工作的必要组件，它提供了用于将 Enzyme 中的抽象与底层库之间桥接的接口。为了测试 React 组件，我们将使用 Enzyme 的 React 适配器。
使用以下命令安装 Enzyme：
npm install --save-dev enzyme
再安装一个适用于 React 的适配器：
npm install --save-dev enzyme-adapter-react-16
其中，适配器的版本应该与你使用的 React 版本相兼容。
在安装 Enzyme 适配器之后，您需要配置 Enzyme 以将其与 React 应用程序一起使用。为了完成配置，请在测试文件的开头中添加以下代码。
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });第二步：编写分页器组件
让我们考虑一个简单的分页器组件，它将显示一页内容并允许用户浏览不同的页面。首先，我们需要定义一个包含页面数字的状态，并使用 onClick 处理程序将选定的页面存储在状态中。然后，我们将使用此状态来渲染分页器组件。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --------- ------- --------- -
----- - -
------------ -- -----------
--
--------------- - ------------ -- -
--------------- ------------ ---------- --- ---------
--
-------- -
----- - ----------- - - -----------
------ -
-----
-------- ------------------
-----
------- ----------- -- -----------------------------------
------- ----------- -- -----------------------------------
------- ----------- -- -----------------------------------
------
------
--
-
-
------ ------- ----------在上面的代码中，我们创建了一个名为 Paginator 的组件。该组件包含一个 currentPage 状态属性，用于跟踪当前选定的页面，并且具有一个名为 handlePageClick 的方法，该方法将利用 onClick 处理程序来更新选定的页面。最后，我们在组件的 render 函数中使用 currentPage 渲染当前页面的编号，并使用三个页面按钮来实现页面跳转。
第三步：使用 Enzyme 测试分页器组件
现在我们已经编写了分页器组件，我们可以使用 Enzyme 来编写测试。在编写测试之前，让我们先来看一下我们要测试的组件的结构。
在我们的分页器组件中，我们有一个 <h2> 元素，它包含了当前页面编号，以及三个按钮元素，用于切换页面。为了将测试分解为更小的任务，我们首先测试 <h2> 元素是否呈现了正确的数据。
下面的测试用例执行以下三个任务：
- 生成
Paginator组件的快照，以便将来可以捕获任何更新或更改。 - 找到
<h2>元素并查看其内容是否正确。 - 确保
Paginator组件正确呈现。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --------- ---- --------------
--------------------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - ------------------ ----
------------------------------------ ------
----- -- - ---------------------
------------------------------- ---- --------------
---------------------------------- ---------------------- ----------
---
---接下来，我们需要测试 Paginator 组件是否能正确处理页面切换。以第二个测试用例为例，我们将通过执行以下操作来验证组件是否能正确更新其状态：
- 点击第二个页面按钮。
- 找到
<h2>元素并验证其内容是否已正确更新。
it('should handle page change', () => {
const component = shallow(<Paginator />);
const button = component.find('button').at(1);
button.simulate('click'); //切换到第二个页面
const h2 = component.find('h2');
expect(h2.text()).toEqual('Page 2'); //查找h2元素并验证其内容
});现在，我们已经学习了如何使用 Enzyme 测试 React 分页器组件。使用 Enzyme，我们可以轻松地对 React 组件进行测试，并准确地确保它们是正确的。测试的好处是可以让我们在开发中更快地发现问题并防止将来的问题产生。希望这篇文章对您有所帮助！
总结
- 安装 Enzyme 和与你所使用的 React 版本相兼容的适配器。
- 创建你的组件，并使用
shallow函数生成组件的快照以进行测试。 - 在测试用例中使用
simulate功能来模拟用户事件（如点击操作），然后使用find函数查找预期元素并验证其内容是否正确。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d204548841e98949d820b