用 Jest 或 Enzyme 测试 React 组件：一些实验-JavaScript中文网-JavaScript教程资源分享门户

React 是一个流行的前端框架，它提供了组件化的开发方式和虚拟 DOM 技术，使得前端开发更加高效和易于维护。然而，随着应用程序变得越来越复杂，测试也变得越来越重要。在本文中，我们将介绍如何使用 Jest 或 Enzyme 测试 React 组件，并提供一些实验和指导意义。

Jest 和 Enzyme 简介

Jest 是 Facebook 开源的一个 JavaScript 测试框架，它可以用于测试 React 应用程序。Jest 旨在提供一种简单而强大的测试体验，它具有零配置、自动 Mock、并行测试、快照测试等功能。Jest 还支持覆盖率报告和 CI/CD 集成，使得测试更加方便和可靠。

Enzyme 是 Airbnb 开源的一个 React 测试工具，它提供了一种简单而灵活的方式来测试 React 组件。Enzyme 支持多种渲染方式、查找和操作 DOM 元素、模拟事件和生命周期等功能。Enzyme 还可以与 Jest 一起使用，提供更加全面的测试能力。

测试 React 组件的基本方法

测试 React 组件的基本方法是通过模拟组件的输入和输出来验证组件的行为。我们可以使用 Jest 或 Enzyme 提供的 API 来模拟组件的 props、状态和事件，并断言组件的输出是否符合预期。

下面是一个简单的示例，演示如何使用 Jest 和 Enzyme 测试一个计数器组件：

// www.javascriptcn.com code example
import React from 'react';
import { shallow } from 'enzyme';
import Counter from './Counter';

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

  it('should increase count when button is clicked', () => {
    const wrapper = shallow(<Counter />);
    const button = wrapper.find('button');
    button.simulate('click');
    expect(wrapper.state('count')).toEqual(1);
    const text = wrapper.find('p').text();
    expect(text).toEqual('Count: 1');
  });
});

在上面的示例中，我们首先使用 shallow 函数创建了一个计数器组件的浅渲染对象，并断言它的快照是否匹配预期。然后，我们模拟了按钮的点击事件，并断言组件的状态和输出是否符合预期。

实验：使用 Jest 和 Enzyme 测试一个 TodoList 组件

为了更好地理解如何使用 Jest 和 Enzyme 测试 React 组件，我们将实现一个简单的 TodoList 组件，并编写相应的测试用例。TodoList 组件包含一个输入框和一个列表，可以添加、删除和标记完成待办事项。

下面是 TodoList 组件的代码：

// www.javascriptcn.com code example
import React, { useState } from 'react';
import PropTypes from 'prop-types';

function TodoList(props) {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState('');

  const handleAddTodo = () => {
    if (text) {
      setTodos([...todos, { text, completed: false }]);
      setText('');
    }
  };

  const handleDeleteTodo = (index) => {
    setTodos(todos.filter((todo, i) => i !== index));
  };

  const handleToggleTodo = (index) => {
    setTodos(
      todos.map((todo, i) =>
        i === index ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {todos.map((todo, i) => (
          <li key={i}>
            <span
              style={{ textDecoration: todo.completed ? 'line-through' : '' }}
              onClick={() => handleToggleTodo(i)}
            >
              {todo.text}
            </span>
            <button onClick={() => handleDeleteTodo(i)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

TodoList.propTypes = {
  todos: PropTypes.arrayOf(
    PropTypes.shape({
      text: PropTypes.string.isRequired,
      completed: PropTypes.bool.isRequired,
    })
  ),
};

export default TodoList;

在上面的代码中，我们使用了 React Hooks 来管理组件的状态和生命周期，实现了添加、删除和标记完成待办事项的功能。为了方便测试，我们还为组件添加了 propTypes 属性，指定了 props 的类型和必需性。

下面是 TodoList 组件的测试用例：

// www.javascriptcn.com code example
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();
  });

  it('should add todo when button is clicked', () => {
    const wrapper = shallow(<TodoList />);
    const input = wrapper.find('input');
    const button = wrapper.find('button').at(0);
    input.simulate('change', { target: { value: 'Buy milk' } });
    button.simulate('click');
    const todos = wrapper.state('todos');
    expect(todos).toHaveLength(1);
    expect(todos[0]).toHaveProperty('text', 'Buy milk');
    expect(todos[0]).toHaveProperty('completed', false);
  });

  it('should delete todo when button is clicked', () => {
    const wrapper = shallow(<TodoList />);
    const input = wrapper.find('input');
    const addButton = wrapper.find('button').at(0);
    input.simulate('change', { target: { value: 'Buy milk' } });
    addButton.simulate('click');
    addButton.simulate('click');
    const deleteButton = wrapper.find('button').at(1);
    deleteButton.simulate('click');
    const todos = wrapper.state('todos');
    expect(todos).toHaveLength(1);
    expect(todos[0]).toHaveProperty('text', 'Buy milk');
    expect(todos[0]).toHaveProperty('completed', false);
  });

  it('should toggle todo when span is clicked', () => {
    const wrapper = shallow(<TodoList />);
    const input = wrapper.find('input');
    const addButton = wrapper.find('button').at(0);
    input.simulate('change', { target: { value: 'Buy milk' } });
    addButton.simulate('click');
    const span = wrapper.find('span');
    span.simulate('click');
    const todos = wrapper.state('todos');
    expect(todos).toHaveLength(1);
    expect(todos[0]).toHaveProperty('text', 'Buy milk');
    expect(todos[0]).toHaveProperty('completed', true);
  });
});

在上面的测试用例中，我们首先使用 shallow 函数创建了一个 TodoList 组件的浅渲染对象，并断言它的快照是否匹配预期。然后，我们模拟了输入框和按钮的事件，并断言组件的状态和输出是否符合预期。

总的来说，使用 Jest 和 Enzyme 测试 React 组件可以帮助我们保证组件的正确性和稳定性，提高开发效率和代码质量。在实践中，我们应该根据具体的需求和场景选择合适的测试工具和方法，并遵循测试驱动开发的原则，将测试作为开发的一部分，不断优化和完善测试用例。

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

用 Jest 或 Enzyme 测试 React 组件：一些实验

Jest 和 Enzyme 简介

测试 React 组件的基本方法

实验：使用 Jest 和 Enzyme 测试一个 TodoList 组件

接着读