前端单元测试实战：从零开始构建可靠的测试体系

news2025/1/6 6:44:19

"又出线上问题了！"周一早会上,我们的技术总监语气严肃。一个简单的代码改动,却引发了一连串的问题。作为前端负责人,我深感愧疚。这已经是本月第三次类似的事故了。

回顾这些问题,我们发现一个共同点：都是因为代码改动引发了意想不到的副作用。如果有完善的单元测试,这些问题本可以在开发阶段就被发现。于是,我们决定系统性地构建前端测试体系。

现状分析

首先我们统计了一下现有的测试情况：

测试覆盖率不到 20%
大多是集成测试,运行时间长
测试代码质量参差不齐
团队缺乏测试习惯

就像一座没有安全检查的大楼,随时可能出现问题。我们需要从基础开始,建立起完整的测试防护网。

测试策略

经过团队讨论,我们制定了分层测试策略。就像建筑的地基、框架、装修一样,每一层都有其特定的职责：

// 工具函数测试示例
describe('formatDate', () => {
  it('should format date correctly', () => {
    const date = new Date('2024-12-03')
    expect(formatDate(date)).toBe('2024-12-03')
    expect(formatDate(date, 'YYYY/MM/DD')).toBe('2024/12/03')
  })

  it('should handle invalid date', () => {
    expect(formatDate(null)).toBe('-')
    expect(formatDate(undefined)).toBe('-')
    expect(formatDate('invalid')).toBe('-')
  })
})

// React 组件测试示例
describe('Button', () => {
  it('should render children correctly', () => {
    const { getByText } = render(<Button>Click me</Button>)
    expect(getByText('Click me')).toBeInTheDocument()
  })

  it('should handle click events', () => {
    const handleClick = jest.fn()
    const { getByRole } = render(<Button onClick={handleClick}>Click me</Button>)

    fireEvent.click(getByRole('button'))
    expect(handleClick).toHaveBeenCalledTimes(1)
  })

  it('should show loading state', () => {
    const { getByRole, getByTestId } = render(<Button loading>Loading</Button>)

    expect(getByRole('button')).toBeDisabled()
    expect(getByTestId('loading-spinner')).toBeInTheDocument()
  })
})

测试工具链

我们精心挑选了一套测试工具链：

// jest.config.ts
export default {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '\\.(css|less|scss)$': 'identity-obj-proxy'
  },
  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts', '!src/**/*.stories.{ts,tsx}'],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80
    }
  }
}

// jest.setup.ts
import '@testing-library/jest-dom'
import 'jest-canvas-mock'
import { server } from './src/mocks/server'

beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

测试规范

为了保证测试的质量和一致性,我们制定了测试规范：

// 测试文件结构示例
describe('UserProfile', () => {
  // 准备测试数据
  const mockUser = {
    id: 1,
    name: 'John Doe',
    email: 'john@example.com'
  }

  // 分组测试用例
  describe('rendering', () => {
    it('should render user info correctly', () => {
      const { getByText } = render(<UserProfile user={mockUser} />)

      expect(getByText(mockUser.name)).toBeInTheDocument()
      expect(getByText(mockUser.email)).toBeInTheDocument()
    })

    it('should show loading state', () => {
      const { getByTestId } = render(<UserProfile loading />)
      expect(getByTestId('loading-spinner')).toBeInTheDocument()
    })
  })

  describe('interactions', () => {
    it('should handle edit button click', () => {
      const onEdit = jest.fn()
      const { getByRole } = render(<UserProfile user={mockUser} onEdit={onEdit} />)

      fireEvent.click(getByRole('button', { name: /edit/i }))
      expect(onEdit).toHaveBeenCalledWith(mockUser.id)
    })
  })

  describe('error handling', () => {
    it('should show error message', () => {
      const error = 'Failed to load user'
      const { getByText } = render(<UserProfile error={error} />)
      expect(getByText(error)).toBeInTheDocument()
    })
  })
})

测试自动化

我们将测试集成到了开发流程中：

// 自动化测试脚本
const runTests = async changedFiles => {
  // 根据变更文件确定测试范围
  const testPatterns = getTestPatterns(changedFiles)

  // 运行测试
  const results = await jest.runCLI({
    selectProjects: testPatterns,
    onlyChanged: true,
    coverage: true
  })

  // 生成测试报告
  await generateReport(results)

  // 更新测试覆盖率徽章
  await updateCoverageBadge(results.coverage)
}

// Git hooks 配置
module.exports = {
  hooks: {
    'pre-commit': 'lint-staged && npm test',
    'pre-push': 'npm run test:coverage'
  }
}