react.js怎样做单元测试

在 React.js 中做单元测试，通常会结合 测试运行器（Test Runner）、测试框架（Testing Framework） 和 React 测试工具。下面我按「主流方案 + 实战示例」给你一个清晰、可落地的指南。

一、常用技术栈（2024 主流）

✅ 最推荐组合：

• Jest：测试运行器 + 断言库
• React Testing Library（RTL）：专注“用户行为”的测试
• jsdom：模拟 DOM 环境

不推荐再用 Enzyme（已停止维护）

二、基础环境搭建

1️⃣ 安装依赖

npm install -D jest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom

如果是 Vite 项目：

npm install -D vitest @testing-library/react jsdom

2️⃣ Jest 基础配置（jest.config.js）

export default {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom'],
}

三、写一个最简单的组件测试

组件：Button.jsx

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

测试：Button.test.jsx

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import Button from './Button'

test('按钮能正确渲染并触发点击', async () => {
  const handleClick = jest.fn()

  render(<Button onClick={handleClick}>点击我</Button>)

  const btn = screen.getByText('点击我')
  expect(btn).toBeInTheDocument()

  await userEvent.click(btn)
  expect(handleClick).toHaveBeenCalledTimes(1)
})

四、常见测试场景

✅ 1. 测试 Props

test('显示传入文本', () => {
  render(<Button>提交</Button>)
  expect(screen.getByText('提交')).toBeInTheDocument()
})

✅ 2. 测试状态（useState）

function Counter() {
  const [count, setCount] = React.useState(0)
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

test('计数器加一', async () => {
  render(<Counter />)
  await userEvent.click(screen.getByText('0'))
  expect(screen.getByText('1')).toBeInTheDocument()
})

✅ 3. 测试异步请求

test('加载后显示数据', async () => {
  render(<UserProfile />)
  expect(screen.getByText('加载中...')).toBeInTheDocument()
  expect(await screen.findByText('用户名')).toBeInTheDocument()
})

✅ 4. Mock API

jest.mock('./api', () => ({
  fetchUser: jest.fn(() => Promise.resolve({ name: 'Tom' }))
}))

五、测试原则（很重要）

✅ 测试行为，不测试实现

• ❌ 不要测 state 内部值
• ✅ 测“用户能看到 / 能操作的结果”

✅ 像用户一样测试

• 点击
• 输入
• 等待结果

六、覆盖率 & 运行

npm test
npm test -- --coverage

七、如果你用的是 Next.js / Vite

• Next.js → 官方支持 Jest
• Vite → 用 Vitest（API 和 Jest 几乎一致）

八、学习路径建议

1. 先学 RTL 官方文档
2. 再学 Jest Mock
3. 最后学集成测试（MSW + RTL）

如果你愿意，可以告诉我：

• 你用的是 CRA / Vite / Next.js
• 想测 组件 / Hook / 页面

我可以直接给你匹配你项目的测试模板。