React 组件测试必备工具 Enzyme，使用方法详解-JavaScript中文网-JavaScript教程资源分享门户

React 是一款非常流行的 JavaScript 框架，提供了一种声明式的、组件化的开发模式，让我们更容易地构建出高效、可维护的 web 应用程序。而在 React 的组件化开发中，我们不可避免地需要进行各种测试工作，以保证代码的健壮和可靠性。在 React 的测试中，有一个非常强大的工具叫做 Enzyme，它提供了一系列灵活的 API 和函数，让我们可以非常方便地测试组件的各种状态和行为。

为什么需要 Enzyme？

如果没有 Enzyme，我们就只能使用 React 自带的测试工具 ReactTestUtils 来进行组件测试。虽然 ReactTestUtils 也提供了一些基本的测试工具，但是它的 API 有点过于繁琐，而且不够灵活，对于一些复杂的测试场景来说可能并不好用。而 Enzyme 则提供了更方便、更完整的测试 API，使得我们可以用更少的代码，更容易地编写出清晰、简洁、可读性高的测试用例。

Enzyme 的作者是 AirBnB，它在开源社区内非常受欢迎。虽然 Enzyme 本身并没有成为 React 的官方测试工具，但是它已经成为了 React 社区内的事实标准，并且被广泛使用。

如何使用 Enzyme？

要使用 Enzyme，我们首先需要通过 npm 安装它：

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

Enzyme 有三个主要的 API，分别是：Shallow、Mount 和 Render。它们的作用分别是：

Shallow：渲染当前组件，但是不渲染其子组件。这个 API 是最快速的，也是最推荐的。
Mount：渲染当前组件，并且渲染其子组件。这个 API 比较慢，但是测试的覆盖率更全面，适合测试比较复杂的组件。
Render：渲染当前组件，但是不渲染其子组件，也不直接操作 DOM。这个 API 的作用是将虚拟 DOM 转换成静态的 HTML，适用于测试组件的快照。

下面我们来看一个简单的例子，演示如何使用 Enzyme 来测试一个 React 组件：

// www.javascriptcn.com code example
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('My Component', () => {
  test('renders without crashing', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.exists()).toBe(true);
  });
});

这段代码的作用是测试 MyComponent 是否能够正常渲染。我们使用了 shallow API，也就是只渲染了组件本身，不渲染其子组件。然后使用 wrapper.exists() 来判断组件是否存在。

除了基本的渲染测试以外，Enzyme 还提供了一系列其他的测试工具，比如查找组件、模拟事件等等。下面我们分别介绍一下这些 API。

查找组件

在测试组件时，我们常常需要查找组件的子元素，获取组件的状态、属性、样式等等信息。Enzyme 提供了一系列查找组件的 API，包括：

find(selector)：查找符合条件的子组件
at(index)：查找指定位置的子组件
first() 和 last()：分别查找第一个和最后一个子组件
filter(predicate)：按照条件过滤组件
closest(selector)：查找第一个符合条件的祖先组件

下面是一个查找组件的例子：

// www.javascriptcn.com code example
import { shallow } from 'enzyme';
import MyList from './MyList';

describe('My List', () => {
  test('renders 3 child items', () => {
    const wrapper = shallow(<MyList />);
    const items = wrapper.find('.item');
    expect(items.length).toBe(3);
  });
});

这段代码的作用是测试 MyList 组件下是否有 3 个名为 .item 的子元素。

模拟事件

在测试组件交互的时候，我们需要模拟一些事件，比如 click、change 等等，以测试组件的处理逻辑是否正确。Enzyme 提供了模拟事件的 API，比如：

simulate(eventType, [mockedEvent])：模拟一个事件，第一个参数是事件类型，第二个参数是模拟事件时传递给事件处理器的参数对象。

下面是一个模拟点击事件的例子：

// www.javascriptcn.com code example
import { shallow } from 'enzyme';
import MyButton from './MyButton';

describe('My Button', () => {
  test('triggers onClick handler', () => {
    const onClick = jest.fn();
    const wrapper = shallow(<MyButton onClick={onClick} />);

    wrapper.find('button').simulate('click');
    expect(onClick).toHaveBeenCalled();
  });
});

这段代码的作用是测试 MyButton 点击后是否正确触发了 onClick 事件。

Enzyme 的常见用法

除了以上介绍的 API 以外，Enzyme 还提供了一些常见的用法，这里简单介绍一下。

对比快照

Enzyme 提供了对比快照的功能，可以将组件的渲染结果和之前的快照进行对比，以确保组件的变化是有意义的。

// www.javascriptcn.com code example
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('My Component', () => {
  test('matches snapshot', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper).toMatchSnapshot();
  });
});

这段代码的作用是将 MyComponent 渲染的结果与之前的快照进行对比。如果组件的渲染结果和之前的快照一样，则测试通过；否则测试失败，需要手动检查组件是否有不正确的变化。

调试调用链

Enzyme 还提供了一个调试工具，可以帮助我们追踪调用链，查看组件调用的过程。

// www.javascriptcn.com code example
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('My Component', () => {
  test('debug function', () => {
    const wrapper = shallow(<MyComponent />);
    console.log(wrapper.debug());
  });
});

这段代码的作用是在控制台输出组件的调用链，方便调试分析。

结语

Enzyme 是 React 组件测试中非常重要的一个工具，它提供了非常多的 API，方便我们编写简洁、可读性高的测试用例。在实际的开发中，我们可以根据实际的需要，选择合适的 API，进行定向的测试。同时，我们也需要注意测试代码的可维护性和可扩展性，在团队协作时保持代码的一致性和规范性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d6621aa941bf7134c1e3dc

React 组件测试必备工具 Enzyme，使用方法详解