Enzyme 组件测试工具的使用介绍和示例：优秀的 React 测试工具-JavaScript中文网-JavaScript教程资源分享门户

前言

随着 React 在前端开发中的广泛应用，React 组件的测试已经变得越来越重要。在测试 React 组件时，我们通常使用 Enzyme 这一工具。

在本文中，我们将介绍 Enzyme 的基本概念、使用方法和示例，帮助读者更好地掌握 Enzyme 的使用，提高前端组件测试的效率和质量。

Enzyme 概述

Enzyme 是一个由 Airbnb 开发的用来测试 React 组件的 JavaScript 库。它提供了一套简单易用、直观的 API，用来操作 React 组件的内部状态和输出。

Enzyme 的主要特点包括：

提供了三种渲染方式，分别为：shallow、mount 和 render，可以针对不同的测试需求进行选择；
方便地与 Jest 等测试框架集成，使测试环境的搭建变得更加容易；
支持多种方式获取组件并遍历它们的所有子节点，方便进行断言和测试；
支持针对组件的生命周期进行测试，对于一些复杂的场景提供了更好的测试支持。

在接下来的章节中，我们将详细介绍 Enzyme 的这些特点和使用方法。

Enzyme API

shallow、mount 和 render

在 Enzyme 中，有三种渲染方式可供选择，分别为：shallow、mount 和 render。

**shallow**：只渲染当前组件，对于它包含的子组件，只进行虚拟渲染，不进行实际渲染。可以看作是 mount 的轻量级替代方案，适合于测试较为简单的组件。
**mount**：对组件及其子组件进行完全的浏览器渲染，并返回最终的 HTML。这是一个真正的渲染，因此能够检测到任何事件、状态和子组件的更新。但是由于需要进行多次渲染，因此速度比 shallow 更慢。
**render**：在 Node.js 环境下进行虚拟渲染，生成最终的 HTML，但不进行实际的 DOM 操作。这种方法比 mount 快，但无法测试事件和交互。

我们可以根据测试场景的不同选取不同的渲染方式。

查找和发现元素

Enzyme 提供了多个 API 来查找和发现组件元素，这些 API 可以与 jQuery 的选择器语法类比。

调用这些 API 将返回一个新的 Enzyme 对象，该对象可以继续调用其他 API 来查找和操作组件元素。

**find**：查找组件的子元素。可以传递一个选择器字符串或组件名称来查找子代元素。

  // 查找 className 为 navbar 的子元素中，class 为 active 的 li 元素
  const wrapper = shallow(<Navbar><li className="active"></li></Navbar>);
  const activeItem = wrapper.find('.navbar').find('.active');

**filter**：返回一个新的 Enzyme 对象，该对象包含当前 Enzyme 对象匹配给定函数的所有元素。

  // 过滤掉 className 不是 toc-item 的子元素
  const wrapper = shallow(<TableOfContents><li className="toc-item"></li><span></span></TableOfContents>);
  const filteredItems = wrapper.children().filter('.toc-item');

**contains**：检查是否包含给定的文本。

  // 检查是否包含了 Search 组件
  const wrapper = shallow(<Header><Search /></Header>);
  expect(wrapper.contains(<Search />)).toEqual(true);

**simulate**：触发事件，以便测试组件在特定条件下的行为。

  // 模拟点击事件
  const wrapper = mount(<Button />);
  wrapper.simulate('click');
  expect(wrapper.state().clicked).toEqual(true);

针对生命周期的测试

在 React 组件的生命周期函数中，我们可以通过 Enzyme 的 API 来检查组件的渲染、更新和卸载行为。

**setProps**：设置组件的 props 并重新渲染。

  // 设置 props 并重新渲染
  const wrapper = shallow(<Counter />);
  wrapper.setProps({ value: 2 });
  expect(wrapper.state().value).toEqual(2);

**setState**：直接设置组件的状态。这种方法使得我们可以直接测试组件在不同状态下的行为，而无需触发相应的事件。
```
  // 直接设置组件状态
  const wrapper = shallow(<Counter />);
  wrapper.setState({ value: 2 });
  expect(wrapper.state().value).toEqual(2);
```

**instance**：获取当前 Enzyme 对象引用组件实例。

  // 引用组件实例
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.instance().state.value).toEqual(1);

与 Jest 等测试框架的集成

Enzyme 能够轻松集成 Jest 等测试框架，让测试的搭建变得更加简单。

以下是在 Jest 中进行基本的 Enzyme 测试的代码示例：

// 导入 Enzyme 和 ReactTestRenderer
import Enzyme, { shallow, render, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import ReactTestRenderer from 'react-test-renderer';

// 配置 Enzyme 适配器
Enzyme.configure({ adapter: new Adapter() });

describe('A suite', () => {
  it('should render without throwing an error', () => {
    // 测试组件是否能够正常渲染
    expect(shallow(<TableOfContents />).contains(<ul className="toc"></ul>)).toBe(true);
  });

  it('should be selectable by class "toc"', () => {
    // 检查是否能够正常选择 className 为 "toc" 的组件
    expect(shallow(<TableOfContents />).is('.toc')).toBe(true);
  });

  it('should render to static HTML', () => {
    // 检查是否能够正确渲染出 HTML
    expect(render(<TableOfContents />).text()).toEqual('Contents');
  });

  it('should render to static HTML', () => {
    // 检查是否能够正确渲染出 HTML
    expect(render(<TableOfContents />).text()).toEqual('Contents');
  });
});

总结

本文介绍了 Enzyme 的基本概念、API 和使用方法，希望能够帮助读者更加深入地了解 Enzyme 并在前端组件测试中使用它。

通过使用 Enzyme，我们可以轻松地测试 React 组件，提高测试的效率和质量。同时，我们还可以使用 Enzyme 的 API 检查组件的生命周期、描述组件的 UI 和元素间的关系，以及从组件输出中选择特定的元素。

在日常的前端开发中，Enzyme 是一款非常优秀的 React 组件测试工具。我们希望本文能够为读者提供更好地使用 Enzyme 进行测试的工具和思路。

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

Enzyme 组件测试工具的使用介绍和示例：优秀的 React 测试工具

前言