React 中的测试策略：单元测试、集成测试与端到端测试的分工

引子：React单元、集成和端到端测试的协作法则

测试就像软件开发中的"体检"，不同层级的检测手段可以帮我们定位不同问题。作为一名 React 开发者，我有次在重构项目时发现：当测试策略选择失当时，要么会在简单改动后引发未知错误，要么会被维护测试用例拖累进度。本文将基于 Jest + React Testing Library + Cypress 技术栈，带你看懂如何建立科学的测试分层体系。

一、测试金字塔的三种武器

1. 单元测试：显微镜下的观察 像用显微镜观察细胞一样，单元测试聚焦单个模块的内部逻辑。在 React 中，最适合测试纯函数、工具类方法或独立呈现的组件。

// 技术栈：Jest + React Testing Library
// 示例：检测按钮点击后的状态变化
test('toggle按钮应该切换显示状态', () => {
  const ToggleButton = () => {
    const [isOn, setIsOn] = useState(false)
    return <button onClick={() => setIsOn(!isOn)}>{isOn ? 'ON' : 'OFF'}</button>
  }

  const { getByText } = render(<ToggleButton />)
  const button = getByText('OFF')

  // 模拟用户点击
  fireEvent.click(button)
  expect(button.textContent).toBe('ON')

  fireEvent.click(button)
  expect(button.textContent).toBe('OFF')
})

2. 集成测试：组装车间的质检 当多个组件协同工作时，就像汽车厂的总装车间，需要检测零部件之间的配合。

// 测试搜索表单与结果列表的联动
test('搜索表单提交后应更新结果列表', async () => {
  // 模拟API返回数据
  jest.spyOn(window, 'fetch').mockResolvedValue({
    json: () => Promise.resolve([{ id: 1, title: 'React指南' }])
  })

  const { getByLabelText, findByText } = render(<SearchPage />)
  
  // 填写搜索关键词
  const input = getByLabelText('关键词')
  fireEvent.change(input, { target: { value: 'React' } })
  
  // 提交表单
  fireEvent.submit(input.closest('form'))
  
  // 验证结果展示
  await findByText('React指南')
})

3. 端到端测试：整车路试验证 使用 Cypress 模拟真实用户旅程，覆盖从登录到数据提交的完整流程。

// 技术栈：Cypress
describe('用户注册流程', () => {
  it('完成邮箱验证的全流程', () => {
    cy.visit('/register')
    
    // 填写注册表单
    cy.get('input[name=email]').type('test@example.com')
    cy.get('button[type=submit]').click()
    
    // 验证提示信息
    cy.contains('验证邮件已发送').should('be.visible')
    
    // 模拟邮件验证
    cy.task('getLastEmail').then(email => {
      const verifyLink = extractLink(email.body)
      cy.visit(verifyLink)
      cy.url().should('include', '/welcome')
    })
  })
})

二、策略选择的决策树

三、各层测试的技术攻防战

单元测试的优势与局限

// 优点示例：快速验证工具函数
const sum = (a, b) => a + b
test('数值求和应当返回正确结果', () => {
  expect(sum(2, 3)).toBe(5)  // 0.5ms执行
})

// 缺点体现：无法检测样式问题
test('警告图标应显示红色', () => {
  const { container } = render(<AlertIcon />)
  expect(container.firstChild).toHaveStyle('color: #ff0000') // 实际DOM可能未应用样式
})

集成测试的陷阱规避

// 错误示范：过度依赖实现细节
test('表单应有提交按钮', () => {
  const { getByRole } = render(<ContactForm />)
  expect(getByRole('button', { name: '提交' })) // 需求可能改为"发送"
})

// 正确实践：基于用户视角
test('用户应能提交联系方式', () => {
  const mockSubmit = jest.fn()
  const { getByLabelText, getByRole } = render(
    <ContactForm onSubmit={mockSubmit} />
  )
  
  fireEvent.change(getByLabelText('邮箱'), { target: { value: 'test@example.com' } })
  fireEvent.click(getByRole('button', { name: /提交|发送/i }))
  
  expect(mockSubmit).toHaveBeenCalled()
})

端到端测试的省力秘籍

// 网络请求拦截技巧
beforeEach(() => {
  cy.intercept('POST', '/api/login', {
    statusCode: 200,
    body: { token: 'fake-jwt' }
  }).as('loginRequest')
})

// 元素定位策略优化
cy.get('[data-testid="product-list"]')  // 使用专用测试标识
  .find('.product-card:first-child')
  .should('contain', 'iPhone 13')

四、混合策略实战指南

电商项目测试配比建议：

1. 商品卡片组件：10个单元测试
2. 购物车模块：3个集成测试套件
3. 结算流程：2个E2E测试用例

跨层级依赖处理：

// 单元测试Mock外部依赖
jest.mock('../api', () => ({
  fetchUser: jest.fn().mockResolvedValue({ name: '测试用户' })
}))

// 集成测试部分Mock
jest.spyOn(window, 'fetch').mockImplementation(req => {
  if (req.url.includes('/products')) {
    return Promise.resolve(mockProducts)
  }
  return actualFetch(req)
})

五、分层测试的黄金法则

1. 编写守则：

• 单元测试覆盖所有工具函数
• 集成测试保护核心业务链路
• E2E测试确保关键流程畅通

2. 维护心法：

• 定期清理过时用例（每年更新率应达80%）
• 测试失败优先处理（修复时效不超过2天）
• 避免实现细节耦合（使用语义化查询）

3. 持续集成配置：

stages:
  - test

unit-test:
  stage: test
  script:
    - npm run test:unit -- --ci --coverage

integration-test:
  stage: test
  script:
    - npm run test:integration -- --runInBand

e2e-test:
  stage: test
  script:
    - npm run test:e2e -- --headless