介绍
Enzyme 是一种流行的 JavaScript 库，用于测试 React 应用程序。它提供了一组工具，使得开发人员可以轻松地编写和运行测试，以确保组件在各种用例下都能正常运行。
Enzyme 可以让开发人员模拟用户与组件的交互，例如点击按钮或输入文本。这样就可以在不必手动测试的情况下，确保组件在各种情况下都能正常工作。
安装
要使用 Enzyme，需要先安装它。可以使用 NPM 或 Yarn 安装 Enzyme。
使用 NPM：
npm install --save-dev enzyme enzyme-adapter-react-16
使用 Yarn：
yarn add --dev enzyme enzyme-adapter-react-16
配置
安装 Enzyme 后，需要配置 Enzyme 以与 React 一起使用。可以在测试文件的顶部添加以下代码：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });使用
在安装和配置 Enzyme 后，现在可以使用它来测试 React 组件了。以下是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---在这个示例中，我们首先导入了所需的依赖项，然后配置了 Enzyme。然后，我们编写了一个测试用例，用于测试 MyComponent 组件是否正确呈现。我们使用 shallow 函数来浅渲染组件，并使用 expect 函数来验证组件的输出是否与我们的预期相匹配。
API
Enzyme 提供了许多有用的 API，用于测试 React 组件。以下是一些常用的 API：
shallow
shallow 函数用于浅渲染组件。它只渲染组件的一层，并不会渲染子组件。这使得测试变得更加容易和快速。
const wrapper = shallow(<MyComponent />);
mount
mount 函数用于完全渲染组件。它渲染组件及其所有子组件，并模拟完整的 DOM 环境。这使得测试更接近实际情况。
const wrapper = mount(<MyComponent />);
render
render 函数用于将组件渲染为静态 HTML。它不需要 DOM 环境，并且可以用于服务器端渲染。
const wrapper = render(<MyComponent />);
find
find 函数用于查找组件中的元素。它接受一个选择器，类似于 jQuery 的选择器。
const wrapper = shallow(<MyComponent />);
const element = wrapper.find('.my-element');simulate
simulate 函数用于模拟用户与组件的交互。它接受一个事件类型和一个可选的事件对象。
const wrapper = shallow(<MyComponent />);
wrapper.find('button').simulate('click');结论
Enzyme 是一种非常有用的测试工具，用于测试 React 应用程序。它提供了一组强大的 API，使得开发人员可以轻松地编写和运行测试。使用 Enzyme 可以确保组件在各种用例下都能正常运行，并提高代码的质量和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67628850856ee0c1d404fc5a