React 组件是前端开发中非常重要的一部分，而测试是确保组件可靠运行的关键。其中，React 组件测试工具 Enzyme 是前端开发者常用的一个测试工具，它方便了测试工作并大大提高了测试效率。本文将介绍 Enzyme 的使用方法和相关技巧。
Enzyme 是什么
Enzyme 是 Airbnb 开源的 React 组件测试工具，它提供了一套 API，可以方便地模拟组件的渲染、交互和测试。Enzyme 提供了三种渲染方式，分别是浅渲染（Shallow Rendering）、完整渲染（Full Rendering）和静态渲染（Static Rendering），它们可以完成不同级别的测试需求。
Enzyme 的优势
- 快速和有效率的测试。
- 测试范围广，包括组件渲染和交互。
- 支持多种渲染方式，可以根据需要选择相应的方式。
- 提供 API，方便测试使用。
- 完全兼容 React 的生命周期和事件系统。
Enzyme 的基本用法
Shallow Rendering
使用浅渲染方式，组件将只会被渲染一层，而它的子组件只会被表示为虚拟对象形式。这种方式比完整渲染快很多，只检查目标组件的输出内容，但是不能正确执行子组件的生命周期方法。
// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
it('应该渲染正确的文本', () => {
const wrapper = shallow(<MyComponent />);
const welcome = <h1>Hello, world!</h1>;
expect(wrapper.contains(welcome)).toEqual(true);
});Full Rendering
完整渲染是最常见的测试方式。它将渲染所有嵌套子组件，并在底层使用 DOM 环境测试组件，因此速度较慢，但是可以正确执行生命周期方法。
// javascriptcn.com 代码示例
import React from 'react';
import { mount } from 'enzyme';
import MyComponent from './MyComponent';
it('应该更新 state', () => {
const wrapper = mount(<MyComponent />);
const button = wrapper.find('button');
button.simulate('click');
expect(wrapper.state('count')).toEqual(1);
});Static Rendering
静态渲染渲染的结果是一个字符串，不依赖于任何环境，输出 HTML 的方式与 React 自带的 renderToString() 方法类似。它非常适合于快速测试组件渲染后的 HTML。
import React from 'react';
import { render } from 'enzyme';
import MyComponent from './MyComponent';
it('应该包括 HTML 元素', () => {
const wrapper = render(<MyComponent />);
expect(wrapper.find('span').length).toEqual(1);
});Enzyme 的 API
在上面的示例中，我们已经使用了 Enzyme 的一些 API，下面是 Enzyme 中最常用的一些 API。
shallow(component[, options])
使用浅渲染方式，渲染组件并返回一个 ShallowWrapper 对象实例。
// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
it('应该根据 state 显示不同的文本', () => {
const wrapper = shallow(<MyComponent />);
wrapper.setState({ count: 1 });
expect(wrapper.find('span').text()).toMatch('Count: 1');
});mount(component[, options])
完整渲染方式，渲染组件并返回一个 ReactWrapper 对象实例。ReactWrapper 对象是独立的 React 元素的包装器。你可以通过 ReactWrapper#get(index) 访问特定元素，也可以通过 ReactWrapper#at(index) 访问链式对象。
// javascriptcn.com 代码示例
import React from 'react';
import { mount } from 'enzyme';
import MyComponent from './MyComponent';
it('应该呈现正确的样式', () => {
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-class').hasClass('active')).toEqual(false);
wrapper.find('button').simulate('click');
expect(wrapper.find('.my-class').hasClass('active')).toEqual(true);
});render(component[, options])
静态渲染方式，将 React 元素渲染为静态 HTML，并返回一个 CheerioWrapper 对象实例。Cheerio 是一个类 jQuery 的库，用于解析 HTML/XML 代码。
import React from 'react';
import { render } from 'enzyme';
import MyComponent from './MyComponent';
it('应该包括一组列表项', () => {
const wrapper = render(<MyComponent />);
expect(wrapper.find('ul li').length).toEqual(3);
});setState(nextState[, callback])
用于在 shallow 和 mount 方式操纵组件的状态，更新 state 并返回更新状态的 ShallowWrapper 或 ReactWrapper 对象。
// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
it('应该根据 state 显示不同的文本', () => {
const wrapper = shallow(<MyComponent />);
wrapper.setState({ count: 1 });
expect(wrapper.find('span').text()).toMatch('Count: 1');
wrapper.setState({ count: 2 });
expect(wrapper.find('span').text()).toMatch('Count: 2');
});simulate(event[, ...args])
用于模拟一个 React 组件事件，例如 onClick、onChange 或 onSubmit。simulate() 方法返回当前 ReactWrapper 或 ShallowWrapper 对象实例，因此可以进行链式操作。
// javascriptcn.com 代码示例
import React from 'react';
import { mount } from 'enzyme';
import MyComponent from './MyComponent';
it('应该更新 state', () => {
const wrapper = mount(<MyComponent />);
const button = wrapper.find('button');
button.simulate('click');
expect(wrapper.state('count')).toEqual(1);
button.simulate('click');
expect(wrapper.state('count')).toEqual(2);
});总结
使用 Enzyme 进行 React 组件测试是一种常用方法，因为它为组件测试提供了方便和高效的工具。本文介绍了 Enzyme 的基本原理和常用 API，希望能够帮助初学者更好地理解和使用 Enzyme 进行测试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653e428b7d4982a6eb7cdd79