React 是一种流行的前端框架，可以用于构建可重用的组件。在本文中，我们将介绍如何使用 Enzyme 测试 React 中的多边形图形组件。
Enzyme 是什么？
Enzyme 是一个用于 React 的 JavaScript 测试工具库。它提供了一组 API，可以使测试 React 组件变得更加简单和直观。Enzyme 具有以下功能：
- 渲染 React 组件，并可以检查组件输出。
- 与组件交互，模拟用户输入，并检查组件的行为。
- 对组件进行快照测试，以确保它们始终以相同的方式呈现。
准备工作
在我们开始测试之前，需要安装一些必要的工具。首先，我们需要安装 React 和 Enzyme：
npm install react enzyme enzyme-adapter-react-16 --save-dev
接下来，我们需要设置 Enzyme，以便它适配 React。在 setupTests.js 文件中添加以下代码：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });然后，在测试文件的开头导入所需的文件和组件：
import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Polygon from '../src/Polygon';
Enzyme.configure({ adapter: new Adapter() });最后，我们可以开始编写测试代码。
测试多边形图形组件
我们将使用 Polygon 组件作为示例。此组件渲染一个多边形图形，并在用户点击图形时更改其颜色。开始先来看一下 Polygon 组件的代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
------------------ -
-------------
---------- - -
------ ------
--
---------------- - ----------------------------
-
------------- -
--------------- ------ ------ ---
-
-------- -
----- ------ - ------------------------ ---
----- - ----- - - -----------
------ -
-----
-------- --------------- ------------ -------------------------- --
------
--
-
-
------ ------- --------我们将测试组件的以下方面：
- 组件可以使用传递的参数渲染。
- 点击组件会更改其颜色。
首先，我们将测试组件是否可以正确渲染。为此，我们将使用 Enzyme 的 shallow 函数。它将组件渲染为虚拟 DOM，并返回包含组件的浅层包装器。在测试文件中添加以下代码：
describe('Polygon', () => {
const points = [0, 0, 50, 50, 50, 0];
it('renders correctly', () => {
const wrapper = shallow(<Polygon points={points} />);
expect(wrapper).toMatchSnapshot();
});
});此代码将创建一个包含 Polygon 组件的浅层包装器，并将它与预期的快照进行比较。如果组件正确地渲染，则测试将通过。
接下来，我们将测试组件是否可以在单击时更改其颜色。为此，我们需要模拟单击事件，并检查是否已更改颜色。在测试文件中添加以下代码：
-- -------------------- ---- -------
------------------- -- -- -
----- ------ - --- -- --- --- --- ---
----------- ----------- -- -- -
----- ------- - ---------------- --------------- ----
----------------------------------
---
----------- ----- ---- --------- -- -- -
----- ------- - ---------------- --------------- ----
------------------------------------------------------------
------------------------------------------
-------------------------------------------------------------
---
---此代码将在单击组件后，使用 find 函数找到 polygon 元素，检查其颜色是否在点击之后已更改。
最终，我们将运行测试：
npm test
测试完成后，在您的终端窗口中应看到测试的结果。如果测试通过，则您已成功测试多边形图形组件。
总结
本文介绍了如何使用 Enzyme 测试 React 中的多边形图形组件，并提供了示例代码和详细说明。通过使用 Enzyme，您可以轻松地测试 React 组件，确保它们在整个开发过程中始终正常工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a18c72add4f0e0ff99b161