frontend-testing

前端测试

目录

• 概述
• 适用场景
• 快速开始
• 参考指南
• 最佳实践

概述

为前端应用构建全面的测试套件，包括单元测试、集成测试和端到端测试，并确保覆盖率和断言得当。

适用场景

• 组件测试
• 集成测试
• 端到端测试
• 防止回归
• 质量保证
• 测试驱动开发

快速开始

最简可运行示例：

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

describe('Button Component', () => {
  it('renders button with text', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole('button')).toHaveTextContent('Click me');
  });

  it('calls onClick handler when clicked', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click</Button>);

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

  it('disables button when disabled prop is true', () => {
    render(<Button disabled>Click me</Button>);
    expect(screen.getByRole('button')).toBeDisabled();
  });

  it('applies variant styles correctly', () => {
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南	内容
Jest Unit Testing (React)	Jest Unit Testing (React)
React Testing Library Integration Tests	React Testing Library Integration Tests
Vitest for Vue Testing	Vitest for Vue Testing
Cypress E2E Testing	Cypress E2E Testing
Test Coverage Configuration	Test Coverage Configuration

最佳实践

✅ 应该做

• 遵循既定模式和规范
• 编写清晰、易于维护的代码
• 添加适当的文档
• 部署前进行全面测试

❌ 不应该做

• 跳过测试或验证
• 忽视错误处理
• 将配置值硬编码