借助 Enzyme 优秀的 React 测试工具，学习组件测试

前言

为了保证 React 应用的稳定性和可维护性，我们需要编写测试代码对组件进行测试。而 Enzyme 是一款优秀的 React 测试工具，可以帮助我们轻松地测试组件的渲染结果、事件触发等。

在本文中，我们将学习如何使用 Enzyme 编写符合规范的测试代码。

Enzyme 简介

Enzyme 是 Airbnb 出品的 React 测试工具，它可以模拟组件的渲染结果，也可以模拟事件的触发。它提供了三种测试方式：

• shallow rendering：浅渲染，只渲染组件的一层子组件，可以快速地依赖组件，而不用考虑子组件的实现方式。
• mounting：完整渲染，渲染组件及其子组件，可以测试组件在 DOM 树中的表现。
• rendering：静态渲染，将组件渲染成静态 HTML，结合 Jest Snapshot Testing 可以帮助我们轻松判断组件是否变化。

前端测试之组件测试

组件测试是前后端测试中必不可少的一环，它可以保证组件的功能、渲染效果是否正确，进而保证整个应用的功能正确。

在组件测试中，我们需要测试以下几个方面：

• 组件的渲染结果是否正确。
• 组件监听事件是否正确。
• 组件的状态是否正确。
• 组件的生命周期是否正确。

下面我们通过一个简单的例子来介绍如何使用 Enzyme 测试一个组件。

示例代码

我们假设现在有一个最简单的 Counter 组件，它可以实现加一和减一的操作，组件的代码如下：

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    count: 0
  };

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  handleDecrement = () => {
    this.setState({ count: this.state.count - 1 });
  };

  render() {
    return (
      <div>
        <span data-test="counter-display">Count: {this.state.count}</span>
        <button data-test="increment-button" onClick={this.handleIncrement}>
          Increment
        </button>
        <button data-test="decrement-button" onClick={this.handleDecrement}>
          Decrement
        </button>
      </div>
    );
  }
}

export default Counter;

这个组件很简单，它包含了一个状态 count 和两个按钮，分别可以实现加一和减一的操作。

接下来，我们通过 Enzyme 来测试这个组件。

使用 Enzyme 测试组件

首先，我们需要安装 Enzyme 和 react-test-renderer：

npm i enzyme react-test-renderer -D

然后，在测试文件中引入需要的模块：

import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import Counter from './Counter';

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

这里我们使用了 shallow rendering 模式来测试组件，通过 import { shallow } from 'enzyme' 来引入。

接下来我们编写测试代码：

const setup = (props = {}, state = null) => {
  const wrapper = shallow(<Counter {...props} />);
  if (state) {
    wrapper.setState(state);
  }

  return wrapper;
};

const findTestAttr = (wrapper, value) => {
  return wrapper.find(`[data-test="${value}"]`);
};

test('renders without error', () => {
  const wrapper = setup();
  const appComponent = findTestAttr(wrapper, 'counter-display');
  expect(appComponent.length).toBe(1);
});

test('renders increment button', () => {
  const wrapper = setup();
  const appComponent = findTestAttr(wrapper, 'increment-button');
  expect(appComponent.length).toBe(1);
});

test('renders decrement button', () => {
  const wrapper = setup();
  const appComponent = findTestAttr(wrapper, 'decrement-button');
  expect(appComponent.length).toBe(1);
});

test('counter starts at 0', () => {
  const wrapper = setup();
  const initialState = wrapper.state('count');
  expect(initialState).toBe(0);
});

test('clicking button increments counter display', () => {
  const count = 7;
  const wrapper = setup(null, { count });
  const button = findTestAttr(wrapper, 'increment-button');

  button.simulate('click');

  const appComponent = findTestAttr(wrapper, 'counter-display');
  expect(appComponent.text()).toContain(count + 1);
});

test('clicking button decrements counter display', () => {
  const count = 5;
  const wrapper = setup(null, { count });
  const button = findTestAttr(wrapper, 'decrement-button');

  button.simulate('click');

  const appComponent = findTestAttr(wrapper, 'counter-display');
  expect(appComponent.text()).toContain(count - 1);
});

这里我们编写了 6 个测试用例，分别测试了组件的渲染结果、状态、事件监听等。

我们可以通过 npm test 命令运行测试，查看测试结果是否正确。

总结

在实际的项目中，组件测试是必不可少的一环，而 Enzyme 这款测试工具可以帮助我们轻松地测试组件。本文介绍了如何使用 Enzyme 编写符合规范的测试代码，希望可以对大家在实际开发中有所帮助。

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