React 测试入门

使用 React Testing Library 和 Jest 编写单元测试和集成测试。 · 难度：入门 · +15XP

为什么测试 React 组件？

测试可以确保组件按预期工作，防止回归错误。React 生态中最流行的测试工具是 Jest 和 React Testing Library，后者鼓励测试用户行为而非实现细节。

设置测试环境

使用 Create React App 创建的项目已经内置了 Jest 和 Testing Library。你可以直接创建 .test.js 文件。

// App.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});
test('button click changes text', () => {
  render(<App />);
  const button = screen.getByRole('button', { name: /click me/i });
  fireEvent.click(button);
  expect(screen.getByText(/clicked/i)).toBeInTheDocument();
});

常用查询方法

练习提示

在下方代码中，编写一个测试用例，验证点击按钮后计数器从 0 变为 1。使用 screen.getByText 和 fireEvent.click。