Reactjs：如何使用 Enzyme？-JavaScript中文网-JavaScript教程资源分享门户

Reactjs 是一个基于组件的前端框架，性能优异，易于维护。Enzyme 是 Reactjs 的一个测试工具，用于在组件层次结构中进行交互和断言测试。

在这篇文章中，我们将介绍 Enzyme 的使用方法并配以示例代码，帮助您更好地掌握此技术。

安装 Enzyme

安装 Enzyme 就像安装其它 npm 包一样简单：

npm install --save-dev enzyme

配置 Enzyme

要开始使用 Enzyme，您需要在文件开头导入 Enzyme：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

然后，您需要为您的测试框架选择适当的适配器。这个适配器将决定 Enzyme 应该如何与测试框架集成。假设您正在使用 Jest 测试框架，那么您需要在 setupTests.js 文件中设置适配器：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

如果您使用的是其它测试框架，请查阅相关文档了解更多细节。

测试组件渲染

一个最基本的测试就是检查组件是否能够被渲染。在 Enzyme 中提供了不同方法验证组件的渲染，包括 shallow() 和 mount()。这两个方法都对组件进行渲染，但 shallow() 只渲染组件本身，而 mount() 渲染整个组件树。

让我们以 shallow() 方法为例进行说明。假设有一个简单的 <Button> 组件可以接收 onClick 和 text 属性：

import React from 'react';
export const Button = ({ onClick, text }) => (
  <button onClick={onClick}>
    {text}
  </button>
);

要测试该组件是否可以被渲染，我们可以使用以下代码：

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

describe('<Button />', () => {
  it('should render', () => {
    const wrapper = shallow(<Button />);
    expect(wrapper.exists()).toBe(true);
  });
});

在这里，我们首先导入 shallow() 方法和 <Button> 组件。然后在 it() 块中，我们编写一个简单的测试，使用 shallow() 方法渲染 <Button> 组件。最后我们使用 exists() 方法验证组件是否已经成功渲染。

测试组件行为

在测试行为方面，Enzyme 提供了多种方法来模拟用户交互。其中，最常用的方法是 simulate()。这个方法可以模拟在组件上触发的事件，如点击、键盘按下等。让我们使用 simulate() 方法模拟 <Button> 组件的点击事件：

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

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

在这里，我们首先定义了一个 Jest 测试框架的 mock 函数 jest.fn()。这个函数可以记录函数是否被触发。在测试开始时，我们用 shallow() 方法渲染出 <Button> 组件，并将 onClick 属性设置为我们的 mock 函数。然后我们使用 simulate() 方法模拟点击事件，并通过 expect() 断言验证 mock 函数是否被触发。

测试组件状态

测试组件状态也很重要。在 Reactjs 中，组件状态通常存储于 state 属性中。Enzyme 提供了一种方法用于直接查看组件的状态。该方法是 state()。

假设有一个包含输入框和按钮的组件，可以将输入框中的文本添加到列表中。组件的状态包括 text 和 list。当用户点击按钮时，组件会将文本添加到列表中。让我们使用 state() 方法来验证此功能：

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

describe('<Form />', () => {
  it('should add new item to list when button is clicked', () => {
    const wrapper = shallow(<Form />);
    wrapper.setState({ text: 'Item 1' });
    wrapper.find('button').simulate('click');
    expect(wrapper.state('list')).toEqual(['Item 1']);
  });
});

在这里，我们使用 shallow() 方法渲染 <Form> 组件。然后我们手动调用 setState() 方法，将 text 属性设置为 "Item 1"。接下来，我们使用 find() 方法找到按钮元素，并使用 simulate() 方法模拟按钮的点击事件。最后通过 state() 方法取得 list 属性，验证组件是否正确添加了新的元素到列表中。

总结

在本篇文章中，我们介绍了 Enzyme 的基本概念，以及如何在 Reactjs 中使用 Enzyme 进行测试。测试是开发的重要一环，良好的测试策略可以为整个项目的开发提供帮助。希望文章对您理解和使用 Enzyme 有所帮助！

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