如何在 Jest 中测试 React 组件？常用的测试工具和查询方法有哪些？

在 Jest 中测试 React 组件需要结合测试工具和渲染方法：

常用测试工具：

• @testing-library/react：官方推荐的 React 测试库
• react-test-renderer：用于快照测试
• enzyme：传统的 React 组件测试工具（较少使用）

基本测试示例：

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

test('renders button with text', () => {
  render(<Button>Click me</Button>);
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

test('calls onClick when clicked', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click me</Button>);
  
  fireEvent.click(screen.getByText('Click me'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

常用查询方法：

• getByText()：通过文本查找元素
• getByRole()：通过角色查找元素
• getByTestId()：通过 data-testid 属性查找
• queryByText()：查找元素，不存在时返回 null
• findByText()：异步查找元素

测试异步组件：

javascript
test('loads and displays data', async () => {
  render(<UserList />);
  
  expect(screen.getByText('Loading...')).toBeInTheDocument();
  
  await waitFor(() => {
    expect(screen.getByText('John')).toBeInTheDocument();
  });
});

最佳实践：

• 测试用户行为，而不是实现细节
• 使用 @testing-library/react 而不是 enzyme
• 使用 data-testid 作为最后的选择
• 避免测试内部状态，测试可见输出
• 保持测试简单和可读