手把手教你使用 Enzyme 进行 React 组件的 TDD 开发-JavaScript中文网-JavaScript教程资源分享门户

前言

在开发复杂的 React 应用时，我们往往需要进行 TDD（Test-driven Development，测试驱动开发）来保证代码质量和稳定性。而 Enzyme 是一个非常优秀的 React 组件测试工具，它可以让我们轻松地编写可靠的单元测试和集成测试。

本文将从零开始，手把手教你使用 Enzyme 进行 React 组件的 TDD 开发。我们会详细讲解 Enzyme 的基本使用方法，并附上实际的代码示例。

准备工作

在开始本文之前，请确保你已经具备以下知识：

React 的基础知识
Jest 的基础知识

如果你对以上知识还不熟悉，可以先学习一下 React 官方文档和 Jest 官方文档。

接下来，我们需要安装 Enzyme 和 Enzyme Adapter：

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

其中， enzyme-adapter-react-16 需要替换成你当前使用的 React 版本的适配器。

Enzyme 基础

浅渲染（Shallow rendering）

首先，我们来了解一下 Enzyme 的浅渲染功能。所谓浅渲染，就是只渲染当前组件，而不会递归渲染子组件。

我们可以使用 shallow 方法来进行浅渲染：

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

test('renders correctly', () => {
  const wrapper = shallow(<MyComponent />);

  expect(wrapper).toMatchSnapshot();
});

上面的代码中，MyComponent 是需要进行测试的组件。我们使用 shallow 方法对其进行浅渲染，并将结果保存在 wrapper 变量中。接着，我们使用 toMatchSnapshot 方法对结果进行快照测试。

完整渲染（Full rendering）

与浅渲染相对应的是完整渲染，它会递归渲染子组件。我们可以使用 mount 方法进行完整渲染：

import { mount } from 'enzyme';
import MyComponent from './MyComponent';

test('renders correctly', () => {
  const wrapper = mount(<MyComponent />);

  expect(wrapper).toMatchSnapshot();
});

与浅渲染的测试用例类似，我们同样使用 toMatchSnapshot 方法进行快照测试。

查找节点（Finding nodes）

在测试过程中，我们需要查找组件中的节点，并对它们进行断言。Enzyme 提供了一系列查找节点的方法，例如：

find(selector)：在当前组件树中查找所有匹配 selector 的节点。
at(index)：选择当前集合中第 index 个元素。
first()：选择当前集合的第一个元素。
last()：选择当前集合的最后一个元素。
closest(selector)：查找当前集合中最接近 selector 的祖先元素。
children([selector])：选择当前集合中所有儿子节点。

我们来看一个例子：

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

test('should render a list of items', () => {
  const items = ['foo', 'bar', 'baz'];
  const wrapper = shallow(<MyComponent items={items} />);

  expect(wrapper.find('.item')).toHaveLength(items.length);
  expect(wrapper.find('.item').at(0).text()).toEqual(items[0]);
});

上面的代码中，我们测试了 MyComponent 组件是否正确渲染了名为 item 的节点。我们使用 find 方法查找了所有的 item 节点，然后使用 toHaveLength 方法断言其数量是否与 items 数组的长度相等。接着，我们使用 at 方法选择了第一个节点，并断言其内容是否与 items[0] 相等。

模拟用户操作（Simulating user events）

在进行 TDD 开发时，我们需要模拟用户操作，例如点击、输入等等。Enzyme 提供了一系列模拟用户操作的方法，例如：

simulate(event[, ...args])：模拟触发 event 事件。
keyDown(key[, options])：模拟按下某个键。
keyUp(key[, options])：模拟松开某个键。
change([event])：模拟输入框值的变化。
click([event])：模拟点击事件。

我们来看一个例子：

// javascriptcn.com 代码示例
import { mount } from 'enzyme';
import MyComponent from './MyComponent';

test('should call onClick when button is clicked', () => {
  const onClick = jest.fn();
  const wrapper = mount(<MyComponent onClick={onClick} />);
  const button = wrapper.find('button');

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

上面的代码中，我们测试了当按钮被点击时，是否会调用 onClick 回调函数。我们使用 simulate 方法模拟点击事件，并使用 toHaveBeenCalled 方法进行断言。

示例代码

最后，让我们来看一个完整的示例代码。我们将测试一个名为 Counter 的计数器组件，它有一个 count 属性和一个 onClick 回调函数。

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

describe('Counter', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<Counter count={0} onClick={jest.fn()} />);
    expect(wrapper).toMatchSnapshot();
  });

  it('should display the correct count', () => {
    const count = 3;
    const wrapper = shallow(<Counter count={count} onClick={jest.fn()} />);
    expect(wrapper.find('.count').text()).toEqual(`Count: ${count}`);
  });

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

上面的代码中，我们使用了 Enzyme 和 Jest 编写了三个测试用例，分别测试了 Counter 组件的渲染、计数器显示和按钮点击事件。如果你不熟悉 Jest 的用法，可以查看 Jest 官方文档。

总结

本文介绍了 Enzyme 的基本使用方法，并给出了实际的代码示例。使用 Enzyme 可以让我们更加方便地编写 React 组件的测试用例，从而提高代码质量和稳定性。希望本文可以对你有所帮助。

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