使用 Jest + React Testing Library 编写测试

Jest 和 React Testing Library 是当前 React 开发中最常用的测试工具。Jest 是一个 JavaScript 测试框架，适用于单元测试、集成测试和端到端测试。而 React Testing Library 提供了一些工具和方法，使得编写 React 组件的测试变得更加简单和直观。结合使用这两者，可以有效地测试 React 应用的各个方面。

安装和配置

首先，您需要在项目中安装 Jest 和 React Testing Library。

安装 Jest

如果您的 React 应用是通过 Create React App 创建的，Jest 已经内置在其中。否则，您可以手动安装 Jest。

npm install --save-dev jest

安装 React Testing Library

React Testing Library 可以通过 npm 安装。

npm install --save-dev @testing-library/react @testing-library/jest-dom

编写测试

创建组件

假设我们有一个简单的 Button 组件，接收一个 label 属性并渲染一个按钮。

// Button.js
import React from 'react';

const Button = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

export default Button;

编写测试

接下来，我们为该组件编写一个测试。使用 React Testing Library，我们可以通过查询 DOM 元素，模拟用户操作和断言结果。

// Button.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

test('renders Button with label', () => {
  render(<Button label="Click me" />);

  // 查找按钮并断言其文本内容
  const buttonElement = screen.getByText(/click me/i);
  expect(buttonElement).toBeInTheDocument();
});

test('calls onClick when clicked', () => {
  const mockOnClick = jest.fn();

  render(<Button label="Click me" onClick={mockOnClick} />);

  // 查找按钮并模拟点击
  const buttonElement = screen.getByText(/click me/i);
  fireEvent.click(buttonElement);

  // 断言 onClick 被调用
  expect(mockOnClick).toHaveBeenCalledTimes(1);
});

测试解释

1. render: 这个方法会将组件渲染到虚拟 DOM 中，为测试提供所需的元素。
2. screen: React Testing Library 提供的全局对象，用于查询渲染后的 DOM 元素。screen.getByText() 用于查找包含特定文本的元素。
3. fireEvent: 模拟用户事件，例如点击按钮。fireEvent.click() 用于模拟点击事件。
4. jest.fn(): 创建一个模拟函数，用来监听组件的回调函数（如 onClick）是否被正确调用。

运行测试

在项目根目录下运行以下命令来执行测试：

npm test

Jest 会自动搜索所有的测试文件并执行。

常见的测试方法

查询元素

• screen.getByText()：根据文本查找元素。
• screen.getByRole()：根据角色查找元素（例如按钮、链接等）。
• screen.getByLabelText()：根据元素的标签文本查找。
• screen.getByPlaceholderText()：根据输入框的占位符文本查找。
• screen.getByTestId()：根据 data-testid 属性查找元素。

模拟用户事件

• fireEvent.click()：模拟点击事件。
• fireEvent.change()：模拟输入框值的变化。
• fireEvent.submit()：模拟表单提交。

断言

• expect(element).toBeInTheDocument()：断言元素在文档中存在。
• expect(element).toHaveTextContent(text)：断言元素的文本内容。
• expect(mockFunction).toHaveBeenCalledTimes(count)：断言模拟函数被调用的次数。

总结

Jest 和 React Testing Library 是 React 测试中不可或缺的工具。Jest 提供了强大的测试框架，而 React Testing Library 使得测试组件的渲染和用户交互变得简单直观。通过合理使用这两个工具，您可以确保 React 应用在开发过程中保持高质量和高稳定性。