Enzyme 是 React 中常用的 UI 测试工具，可以快速、简单地对 React 组件进行测试和验证。Enzyme 提供了一组强大的 API，使测试 React 组件的过程更加容易。在本文中，我们将介绍如何使用 Enzyme 作为我们的测试工具，并测试 React 中的前后端集成模式。

什么是 Enzyme？

Enzyme 是 Airbnb 公司开发的 React UI 测试工具库，支持 React 的所有版本。它提供了一组 API，可以用于测试 React 组件的渲染结果，在组件的一些状态下进行测试。Enzyme 还支持断言和行为测试，并提取组件的属性和事件，使测试和验证更加轻松和直观。

如何使用 Enzyme？

安装

首先，我们需要在项目中安装 Enzyme：

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

其中，enzyme-adapter-react-16 是一个与 React 版本对应的适配器，如果你的 React 版本不是 16.x，你需要使用相应版本的适配器。

测试

接下来，我们将使用 Enzyme 测试一个简单的组件。请考虑下面的 React 简单组件：

import React from 'react';

export default function Button(props) {
  return (
    <button onClick={props.onClick}>
      {props.label}
    </button>
  );
}

这是一个简单的按钮组件，包含一个 onClick 处理程序和一个 label 属性。现在，我们将使用 Enzyme 来测试这个组件的渲染结果和事件行为。请考虑下面的测试代码：

import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';

describe('<Button />', () => {
  let wrapper;
  const onClick = jest.fn();
  beforeEach(() => {
    wrapper = shallow(<Button label="Click me!" onClick={onClick} />);
  });

  it('matches snapshot', () => {
    expect(wrapper).toMatchSnapshot();
  });

  it('renders the label', () => {
    expect(wrapper.text()).toBe('Click me!');
  });

  it('calls onClick when clicked', () => {
    wrapper.find('button').simulate('click');
    expect(onClick).toHaveBeenCalled();
  });
});

首先，我们使用 shallow 方法创建了一个名为 wrapper 的组件实例对象。接下来，我们定义了一个名为 onClick 的 mock 函数，并将其传递给组件实例。接下来，我们使用 beforeEach 钩子在每个测试之前重新创建了 wrapper 对象，以确保它处于初始状态。

在我们的测试套件中，我们有三个测试用例：

• 第一个测试用例使用测试快照（snapshot）来验证组件的初始渲染是否与预期一致。
• 第二个测试用例验证组件的 label 属性是否被正确地渲染到了按钮内。
• 第三个测试用例模拟按钮点击事件，并验证 onClick 函数是否被调用了。

这些测试用例涵盖了我们对组件实例的测试，可以检查组件在各种条件下的行为，并确保组件的功能符合预期。

Enzyme 除了可以简化 React 组件的测试外，也可以测试 React 前后端集成模式。React 前后端集成模式在构建现代 Web 应用程序时非常常见，因为它可以提供更好的性能和更好的用户体验。在这个模式下，React 组件在服务器上首先渲染，然后将 HTML 页面与前端 JavaScript bundle 一起发送给浏览器。

为了测试这种模式，我们可以使用 Enzyme 的 mount 方法，该方法支持已经渲染的 React 组件并返回一个完整的组件实例。考虑以下 React 组件示例：

import React, { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

这个组件是一个简单的计数器，可以通过单击两个不同的按钮（增加或减少）来增加或减少计数器值。现在，我们将使用 Enzyme 的 mount 方法在服务器端渲染该组件，然后使用 Jest 等测试驱动工具验证它在不同条件下的行为。请参考以下代码：

import React from 'react';
import { mount } from 'enzyme';
import Counter from './Counter';

describe('<Counter />', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = mount(<Counter />);
  });
  
  it('matches snapshot', () => {
    expect(wrapper).toMatchSnapshot();
  });

  it('increments and decrements when button clicked', () => {
    const h1 = wrapper.find('h1');
    expect(h1.text()).toBe('0');

    wrapper.find('button').at(0).simulate('click');
    expect(h1.text()).toBe('1');

    wrapper.find('button').at(1).simulate('click');
    expect(h1.text()).toBe('0');
  });
});

这个测试用例在 beforeEach 钩子中使用 mount 方法来渲染 Counter 组件。接下来，在我们的测试套件中有两个测试用例：

• 第一个测试用例比较了渲染结果的快照（snapshot），以确保它符合预期。
• 第二个测试用例验证了点击按钮后计数器是否可以正确地增加或减少。

正如我们所看到的，Enzyme 的 mount 方法和 Jest 等测试驱动工具可以轻松测试 React 中的前后端集成模式。

总结

在这篇文章中，我们探讨了 Enzyme，这是一个非常有用的 React UI 测试工具。我们学习了如何使用它来测试 React 组件，以及如何在 React 中测试前后端集成模式。我们深入了解了 Enzyme 的 API，并通过实际案例对其使用进行了演示。如果你是一个 React 开发人员，Enzyme 是一个必备工具，可以大大提高你的测试速度和测试质量。

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