React 测试问题：组件测试与快照测试

在开发 React 应用时，确保组件行为正确、界面稳定是关键。最常用的两种测试方式是组件测试（也叫渲染测试）和快照测试。前者验证组件在特定输入下是否按预期工作，后者则记录组件输出的“照片”，用于检测意外变更。下面手把手教你如何正确使用这两种方法。

准备测试环境

1. 安装必要依赖。在项目根目录执行以下命令：

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

2. 配置 Jest。如果项目由 Create React App 创建，通常已内置配置；否则需在 package.json 中添加：

   {
     "scripts": {
       "test": "jest"
     },
     "jest": {
       "testEnvironment": "jsdom",
       "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"]
     }
   }

3. 创建测试入口文件。在 src 目录下新建 setupTests.js，内容为：

   import '@testing-library/jest-dom';

完成以上步骤后，即可开始编写测试。

编写组件测试

组件测试的核心是：给组件传入 props，检查它是否渲染出正确的结构或响应用户操作。

假设有一个简单按钮组件 Button.js：

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

export default function Button({ onClick, children, disabled = false }) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {children}
    </button>
  );
}

为其编写测试：

1. 创建测试文件。在 src/components 下新建 Button.test.js。

2. 导入所需模块：

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

3. 编写第一个测试：验证默认渲染。

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

4. 测试点击事件。

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

5. 测试禁用状态。

   test('is disabled when disabled prop is true', () => {
     render(<Button disabled>Click me</Button>);
     const buttonElement = screen.getByText('Click me');
     expect(buttonElement).toBeDisabled();
   });

运行 npm test，所有测试应通过。这些测试确保组件在各种 props 下表现正常。

使用快照测试

快照测试不关心逻辑，只记录组件输出的完整 DOM 结构，并在后续运行中比对是否变化。

1. 在已有测试文件中添加快照测试：

   test('matches snapshot', () => {
     const { container } = render(<Button>Click me</Button>);
     **expect(container).toMatchSnapshot()**;
   });

2. 首次运行。执行 npm test，Jest 会在 __snapshots__ 目录下生成 Button.test.js.snap 文件，内容类似：

   // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
   
   exports[`matches snapshot 1`] = `
   <div>
     <button>
       Click me
     </button>
   </div>
   `;

3. 后续运行。只要组件输出不变，测试通过；若你修改了按钮标签（如改成 <span>），测试会失败，并提示差异。

4. 更新快照。如果变更是有意的（比如 UI 重构），按 u 键（在交互模式下）或运行 npm test -u 来更新快照。

组件测试 vs 快照测试：何时用哪种？

虽然两者常一起使用，但用途不同。下表明确区分适用场景：

例如，一个登录表单应重点写组件测试：验证输入框存在、错误提示显示、提交调用 API。而一个纯展示的商品卡片，可辅以快照测试防止样式错乱。

常见陷阱与最佳实践

1. 不要过度依赖快照。快照太容易通过，即使组件逻辑错误，只要结构没变就“通过”。始终优先写明确断言的组件测试。

2. 避免快照包含非确定性内容。比如组件内有 Date.now() 或随机 ID，会导致每次快照不同。解决方法：

   // 在测试前 mock 时间
   beforeAll(() => {
     jest.spyOn(global.Date, 'now').mockImplementation(() => new Date('2023-01-01').getTime());
   });

3. 命名测试要具体。不要写 test('works')，而应写 test('shows error when email is invalid')。

4. 每个测试只验证一件事。拆分大测试为多个小测试，便于定位失败原因。

5. 使用 screen.debug() 调试。在测试中插入 screen.debug() 可打印当前 DOM，帮助排查找不到元素的问题。

扩展示例：带状态的组件测试

考虑一个计数器组件：

// src/components/Counter.js
import React, { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

测试它：

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

test('displays initial count as 0', () => {
  render(<Counter />);
  expect(screen.getByText('Count: 0')).toBeInTheDocument();
});

test('increments count when button is clicked', () => {
  render(<Counter />);
  const button = screen.getByText('Increment');
  **fireEvent.click**(button);
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

此例中，组件测试直接验证状态变化结果，无需快照——因为核心是“行为”而非“结构”。

运行测试并确认覆盖。执行 npm test -- --coverage 可查看测试覆盖率报告，确保关键路径被覆盖。