Enzyme #

什么是 Enzyme？ #

Enzyme 是由 Airbnb 开发的 React 测试工具，它提供了一套简洁的 API 来操作、遍历和断言 React 组件的输出。Enzyme 让 React 组件测试变得简单直观。

核心定位 #

text

┌─────────────────────────────────────────────────────────────┐
│                        Enzyme                                │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  浅层渲染    │  │  完整渲染    │  │  静态渲染   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  jQuery 风格 │  │  事件模拟    │  │  状态操作   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

为什么选择 Enzyme？ #

优势 #

text

✅ 多种渲染方式
   - shallow 浅层渲染
   - mount 完整渲染
   - render 静态渲染

✅ jQuery 风格 API
   - 熟悉的选择器
   - 链式调用
   - 易于上手

✅ 完整的交互测试
   - 事件模拟
   - 状态操作
   - Props 传递

✅ 良好的生态
   - Jest 集成
   - Mocha 集成
   - 丰富的工具库

快速开始 #

安装 #

bash

npm install --save-dev enzyme @wojtekmaj/enzyme-adapter-react-17

配置 #

javascript

// setupTests.js
import { configure } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

configure({ adapter: new Adapter() });

基本测试 #

javascript

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.title').text()).toBe('Hello');
  });
});

文档结构 #

text

Enzyme 文档
├── 入门基础
│   ├── Enzyme 简介
│   ├── 安装与配置
│   └── 基础测试
│
├── 核心功能
│   ├── 浅层渲染
│   ├── 完整渲染
│   └── 选择器
│
└── 进阶内容
    ├── 事件模拟
    ├── 状态操作
    └── Hooks 测试

三种渲染方式 #

方法	用途	特点
shallow	单元测试	不渲染子组件
mount	集成测试	完整 DOM 渲染
render	静态分析	只渲染 HTML

Enzyme vs React Testing Library #

特性	Enzyme	RTL
测试风格	实现细节	用户行为
API 风格	jQuery	DOM 查询
学习曲线	低	低
官方推荐	❌	✅
维护状态	维护模式	活跃

学习路径 #

text

入门阶段
├── Enzyme 简介
├── 安装与配置
└── 基础测试

进阶阶段
├── 浅层渲染
├── 完整渲染
├── 选择器
└── 事件模拟

高级阶段
├── 状态操作
├── Hooks 测试
└── 最佳实践

下一步 #

现在你已经了解了 Enzyme 的基本概念，接下来学习 Enzyme 简介，开始测试你的 React 组件！