React 是一个功能强大的前端框架，它让我们可以使用类似于声明式的语法来构建 UI 组件。在实际开发中，React 常常需要使用一些辅助工具，比如测试工具，其中最常用的一个就是 Enzyme。
Enzyme 是一个由 Airbnb 开源的 React 组件测试工具。它提供了简洁的 API，让我们可以轻松地测试 React 组件的渲染和行为。在 Enzyme 中，我们需要使用一个适配器来适配当前 React 版本。本文将介绍如何使用 npm 包 @codingarchitect/enzyme-adapter-react-16 来适配 React 16.x 版本。
1. 安装
使用 npm 进行安装：
npm install --save-dev @codingarchitect/enzyme-adapter-react-16
2. 配置
在项目的 src/setupTests.js 文件中添加以下代码：
import { configure } from 'enzyme';
import Adapter from '@codingarchitect/enzyme-adapter-react-16';
configure({ adapter: new Adapter() });这样就完成了 Enzyme 的适配器配置。
3. 使用
在测试文件中可以使用 Enzyme 的 API 来测试 React 组件了，我们来写一个简单的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
--------------- -- -- -
----------- ------- ---------- -- -- -
------------ ----
---
------------ --- ------- ------ -- -- -
----- ------- - ------------ ----
----- ------- - --- ----------------------------- -- -----------
------------------------------------------------
---
---上面这个例子是测试 App 组件的渲染和显示。在第一个测试用例中，我们使用 shallow 方法来渲染 App 组件，测试能否正常渲染。在第二个测试用例中，我们使用 contains 方法来测试 App 组件是否正确显示了 "Welcome to React" 这个文本。
4. 总结
在本文中，我们介绍了如何使用 npm 包 @codingarchitect/enzyme-adapter-react-16 来适配 React 16.x 版本，并且给出了一个简单的 Enzyme 测试示例。希望本文对初学者能够有些指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005644881e8991b448e1647