React 单元测试（三）— 使用 Enzyme 来做 React 组件测试-JavaScript中文网-JavaScript教程资源分享门户

在前面的两篇文章中，我们介绍了 React 单元测试的基础知识和使用 Jest 来进行测试的方法。在这篇文章中，我们将介绍另一个常用的 React 测试工具——Enzyme，并讲解如何使用 Enzyme 来进行 React 组件测试。

Enzyme 简介

Enzyme 是由 Airbnb 开发的 React 测试工具，它提供了一系列 API 来帮助我们方便地进行 React 组件测试。Enzyme 支持三种渲染方式：shallow、mount 和 render。

shallow：浅渲染，只渲染当前组件，不渲染子组件，适用于单元测试。
mount：完整渲染，渲染当前组件及其子组件，适用于集成测试。
render：静态渲染，将 React 组件渲染成静态 HTML，适用于快照测试。

在本文中，我们将主要介绍 shallow 渲染的使用方法。

安装 Enzyme

在使用之前，我们需要先安装 Enzyme。Enzyme 的安装非常简单，只需要执行以下命令即可：

npm install --save-dev enzyme enzyme-adapter-react-16

其中，enzyme 是 Enzyme 的核心库，enzyme-adapter-react-16 是 Enzyme 适配 React 16 的适配器。如果你使用的是其他版本的 React，需要安装相应版本的适配器。

使用 Enzyme 进行组件测试

下面，我们将通过一个示例来演示如何使用 Enzyme 进行组件测试。假设我们有以下一个简单的组件：

// javascriptcn.com 代码示例
import React from 'react';

function Button(props) {
  const { onClick, children } = props;
  return (
    <button onClick={onClick}>{children}</button>
  );
}

export default Button;

我们的测试目标是测试这个 Button 组件的 onClick 事件是否能够正常触发。首先，我们需要编写一个测试用例：

// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';

describe('Button', () => {
  it('should call onClick when button is clicked', () => {
    const onClick = jest.fn();
    const wrapper = shallow(<Button onClick={onClick}>Click me</Button>);
    wrapper.find('button').simulate('click');
    expect(onClick).toHaveBeenCalled();
  });
});

上面的测试用例中，我们首先定义了一个 onClick 函数，并使用 jest.fn() 来模拟。然后，我们使用 shallow 渲染来渲染 Button 组件，并将 onClick 传递给组件。最后，我们通过 wrapper.find('button').simulate('click') 来模拟点击事件，并使用 expect(onClick).toHaveBeenCalled() 来验证 onClick 是否被调用。

Enzyme API

除了上面介绍的 find() 和 simulate() 方法以外，Enzyme 还提供了许多其他的 API，用于方便地进行组件测试。下面是一些常用的 API：

shallow：浅渲染，返回一个 ShallowWrapper 对象。
mount：完整渲染，返回一个 ReactWrapper 对象。
render：静态渲染，返回一个 CheerioWrapper 对象。
find(selector)：查找指定选择器的子元素。
filter(selector)：过滤出符合指定选择器的元素。
contains(node)：判断是否包含指定的节点。
text()：获取元素的文本内容。
props()：获取元素的 props。
setState(state)：设置组件的状态。
setProps(props)：设置组件的 props。
simulate(event[, ...args])：模拟触发指定事件。
unmount()：卸载组件。

总结

Enzyme 是一个非常好用的 React 测试工具，它提供了丰富的 API，能够帮助我们方便地进行组件测试。在使用 Enzyme 进行测试时，我们应该注意选择合适的渲染方式，并根据需要选择合适的 API 进行测试。通过不断地学习和实践，我们可以更好地掌握 Enzyme 的使用方法，提高我们的测试效率和质量。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6562d111d2f5e1655dc986d3