React 单元测试的利器：实战 Enzyme + Jest-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，React 已经成为了非常流行的框架，它的组件化开发方式让我们能够更好地管理代码、提高代码复用率，但是在开发过程中如何保证组件的质量呢？这时候单元测试就变得非常重要了。本文将介绍 React 单元测试的利器：实战 Enzyme + Jest。

Enzyme 简介

Enzyme 是一个由 Airbnb 开源的 React 组件测试工具，主要用于模拟 React 组件的渲染和交互。它提供了一些 API，可以方便地对组件进行测试。

Enzyme 的 API 分为三种类型：

shallow：浅渲染，只渲染当前组件，不渲染子组件。
mount：完整渲染，渲染当前组件及其子组件。
render：静态渲染，将组件渲染成静态 HTML，并返回一个 Cheerio 对象。

Enzyme 还提供了一些针对组件的 API，比如 find、simulate 等，可以方便地进行组件交互测试。

Jest 简介

Jest 是 Facebook 开源的一款 JavaScript 测试框架，它可以用于测试 React 组件、Redux 等前端开发中常用的库。Jest 的特点是简单易用，集成度高，可以方便地进行单元测试和集成测试。

Jest 支持以下特性：

快照测试：记录组件渲染后的快照，可以用于比较组件是否发生变化。
Mock：可以方便地模拟函数、模块等，用于测试组件的交互。
异步测试：支持 Promise、async/await 等异步操作的测试。

实战 Enzyme + Jest

下面我们将结合一个示例代码，介绍如何使用 Enzyme 和 Jest 进行 React 组件的单元测试。

示例代码

我们将使用一个简单的 TodoList 组件进行测试，代码如下：

// javascriptcn.com 代码示例
import React from 'react';

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todoList: [],
      inputValue: '',
    };
  }

  handleInputChange = (event) => {
    this.setState({
      inputValue: event.target.value,
    });
  };

  handleAddTodo = () => {
    const { todoList, inputValue } = this.state;
    if (inputValue) {
      this.setState({
        todoList: [...todoList, inputValue],
        inputValue: '',
      });
    }
  };

  handleDeleteTodo = (index) => {
    const { todoList } = this.state;
    this.setState({
      todoList: todoList.filter((item, i) => i !== index),
    });
  };

  render() {
    const { todoList, inputValue } = this.state;
    return (
      <div>
        <input value={inputValue} onChange={this.handleInputChange} />
        <button onClick={this.handleAddTodo}>Add</button>
        <ul>
          {todoList.map((item, index) => (
            <li key={index}>
              {item}
              <button onClick={() => this.handleDeleteTodo(index)}>Delete</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default TodoList;

这个组件实现了一个简单的 TodoList，可以添加、删除待办事项。

测试用例

我们将编写以下测试用例：

测试组件渲染是否正确。
测试添加待办事项功能是否正确。
测试删除待办事项功能是否正确。

组件渲染测试

我们可以使用 Enzyme 的 shallow 函数对组件进行浅渲染，并使用 Jest 的 toMatchSnapshot 函数记录组件渲染后的快照。测试代码如下：

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

describe('TodoList component', () => {
  it('should render correctly', () => {
    const wrapper = shallow(<TodoList />);
    expect(wrapper).toMatchSnapshot();
  });
});

这个测试用例会自动生成一个 .snap 文件，记录组件渲染后的快照。如果组件渲染发生变化，将会提示测试失败。

添加待办事项测试

我们可以使用 Enzyme 的 mount 函数对组件进行完整渲染，并模拟用户输入、点击等操作，测试添加待办事项功能是否正确。测试代码如下：

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

describe('TodoList component', () => {
  it('should add todo correctly', () => {
    const wrapper = mount(<TodoList />);
    const input = wrapper.find('input');
    const button = wrapper.find('button').at(0);

    input.simulate('change', { target: { value: 'test' } });
    button.simulate('click');

    expect(wrapper.state().todoList).toEqual(['test']);
  });
});

这个测试用例会模拟用户输入 test，点击添加按钮，然后断言组件状态是否正确。

删除待办事项测试

我们可以使用 Enzyme 的 mount 函数对组件进行完整渲染，并模拟用户点击删除按钮的操作，测试删除待办事项功能是否正确。测试代码如下：

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

describe('TodoList component', () => {
  it('should delete todo correctly', () => {
    const wrapper = mount(<TodoList />);
    const input = wrapper.find('input');
    const addButton = wrapper.find('button').at(0);

    input.simulate('change', { target: { value: 'test' } });
    addButton.simulate('click');

    const deleteButton = wrapper.find('button').at(1);
    deleteButton.simulate('click');

    expect(wrapper.state().todoList).toEqual([]);
  });
});

这个测试用例会模拟用户输入 test，点击添加按钮，然后点击删除按钮，然后断言组件状态是否正确。

运行测试

我们可以使用 Jest 运行测试，命令如下：

npm test

执行完毕后，如果所有测试用例都通过，将会输出以下信息：

// javascriptcn.com 代码示例
 PASS  src/TodoList.test.js
  TodoList component
    ✓ should render correctly (3ms)
    ✓ should add todo correctly (7ms)
    ✓ should delete todo correctly (4ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   1 passed, 1 total
Time:        1.764s, estimated 2s
Ran all test suites.

如果有测试用例失败，将会提示具体的错误信息。

总结

本文介绍了 React 单元测试的利器：实战 Enzyme + Jest。Enzyme 提供了方便的 API，可以对 React 组件进行渲染和交互测试，Jest 是一个简单易用的 JavaScript 测试框架，可以方便地进行单元测试和集成测试。我们通过一个简单的 TodoList 组件的测试示例，介绍了如何使用 Enzyme 和 Jest 进行 React 组件的单元测试。希望本文能够帮助大家更好地进行前端开发。

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