frontendtesting-guide

# 前端测试编写指南 ## 测试要求（强制） > **职责边界**：Frontend Agent 是测试的**编写者**，QA Agent 是测试的**验证者**。 ### 测试金字塔 | 测试类型 | 占比 | 要求 | |----------|------|------| | **单元测试** | ~70% | 每个组件/Hook 必须有测试 | | **集成测试** | ~20% | 组件交互、状态管理测试 | | **E2E 测试** | ~10% | **必须编写**，覆盖用户流程 | ## 单元测试编写 ### 组件渲染测试 ```typescript // Button.test.tsx import { render, screen } from '@testing-library/react'; import { Button } from './Button'; describe('Button', () => { it('renders with text', () => { render(<Button>Click me</Button>); expect(screen.getByText('Click me')).toBeInTheDocument(); }); it('calls onClick when clicked', () => { const handleClick = jest.fn(); render(<Button onClick={handleClick}>Click</Button>); screen.getByText('Click').click(); expect(handleClick).toHaveBeenCalledTimes(1); }); it('is disabled when disabled prop is true', () => { render(<Button disabled>Click</Button>); expect(screen.getByText('Click')).toBeDisabled(); }); }); ``` ### Hook 测试 ```typescript // useCounter.test.ts import { renderHook, act } from '@testing-library/react'; import { useCounter } from './useCounter'; describe('useCounter', () => { it('initializes with default value', () => { const { result } = renderHook(() => useCounter()); expect(result.current.count).toBe(0); }); it('increments count', () => { const { result } = renderHook(() => useCounter()); act(() => { result.current.increment(); }); expect(result.current.count).toBe(1); })...