名称： senior-qa
描述： 当用户提出“生成测试”、“编写单元测试”、“分析测试覆盖率”、“搭建端到端测试脚手架”、“设置 Playwright”、“配置 Jest”、“实现测试模式”或“提升测试质量”等需求时，应使用此技能。适用于使用 Jest、React Testing Library 和 Playwright 进行 React/Next.js 测试。
面向 React 和 Next.js 应用的测试自动化、覆盖率分析与质量保证模式。
# 为 React 组件生成 Jest 测试桩
python scripts/test_suite_generator.py src/components/ --output __tests__/
# 分析 Jest/Istanbul 报告的测试覆盖率
python scripts/coverage_analyzer.py coverage/coverage-final.json --threshold 80
# 为 Next.js 路由搭建 Playwright 端到端测试脚手架
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/
扫描 React/TypeScript 组件，并使用适当的结构生成 Jest + React Testing Library 测试桩。
输入： 包含 React 组件的源代码目录
输出： 包含 describe 块、渲染测试、交互测试的测试文件
用法：
# 基础用法 - 扫描组件并生成测试
python scripts/test_suite_generator.py src/components/ --output __tests__/
# 输出示例：
# 扫描：src/components/
# 发现 24 个 React 组件
#
# 生成的测试：
# __tests__/Button.test.tsx (渲染、点击处理器、禁用状态)
# __tests__/Modal.test.tsx (渲染、打开/关闭、键盘事件)
# __tests__/Form.test.tsx (渲染、验证、提交)
# ...
#
# 摘要：24 个测试文件，87 个测试用例
# 包含可访问性测试
python scripts/test_suite_generator.py src/ --output __tests__/ --include-a11y
# 使用自定义模板生成
python scripts/test_suite_generator.py src/ --template custom-template.tsx
支持的模式：
- 使用 Hook 的函数组件
- 使用 Context 提供器的组件
- 包含数据获取的组件
- 包含验证的表单组件
解析 Jest/Istanbul 覆盖率报告，识别缺口、未覆盖的分支，并提供可操作的建议。
输入： 覆盖率报告（JSON 或 LCOV 格式）
输出： 包含建议的覆盖率分析报告
用法：
# 分析覆盖率报告
python scripts/coverage_analyzer.py coverage/coverage-final.json
# 输出示例：
# === 覆盖率分析报告 ===
# 总体：72.4% (目标：80%)
#
# 按类型：
# 语句：74.2%
# 分支：68.1%
# 函数：71.8%
# 行：73.5%
#
# 关键缺口（未覆盖的业务逻辑）：
# src/services/payment.ts:45-67 - 支付处理
# src/hooks/useAuth.ts:23-41 - 认证流程
#
# 建议：
# 1. 为支付服务错误处理添加测试
# 2. 覆盖认证边界情况
# 3. 测试表单验证分支
#
# 低于阈值（80%）的文件：
# src/components/Checkout.tsx: 45%
# src/services/api.ts: 62%
# 强制执行阈值（若低于阈值则退出码为 1）
python scripts/coverage_analyzer.py coverage/ --threshold 80 --strict
# 生成 HTML 报告
python scripts/coverage_analyzer.py coverage/ --format html --output report.html
扫描 Next.js 页面或 app 目录，并为常见交互生成 Playwright 测试文件。
输入： Next.js 页面或 app 目录
输出： 按路由组织的 Playwright 测试文件
用法：
# 为 Next.js App Router 搭建端到端测试脚手架
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/
# 输出示例：
# 扫描：src/app/
# 发现 12 个路由
#
# 生成的端到端测试：
# e2e/home.spec.ts (导航、主图区域)
# e2e/auth/login.spec.ts (表单提交、验证)
# e2e/auth/register.spec.ts (注册流程)
# e2e/dashboard.spec.ts (认证路由)
# e2e/products/[id].spec.ts (动态路由)
# ...
#
# 生成：playwright.config.ts
# 生成：e2e/fixtures/auth.ts
# 包含页面对象模型类
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/ --include-pom
# 为特定路由生成
python scripts/e2e_test_scaffolder.py src/app/ --routes "/login,/dashboard,/checkout"
适用于为新组件或现有 React 组件设置测试。
步骤 1：扫描项目以查找未测试的组件
python scripts/test_suite_generator.py src/components/ --scan-only
步骤 2：生成测试桩
python scripts/test_suite_generator.py src/components/ --output __tests__/
步骤 3：审查并自定义生成的测试
// __tests__/Button.test.tsx (已生成)
import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from '../src/components/Button';
describe('Button', () => {
it('渲染时显示标签', () => {
render(<Button>点击我</Button>);
expect(screen.getByRole('button', { name: /点击我/i })).toBeInTheDocument();
});
it('点击时调用 onClick', () => {
const handleClick = jest.fn();
render(<Button onClick={handleClick}>点击</Button>);
fireEvent.click(screen.getByRole('button'));
expect(handleClick).toHaveBeenCalledTimes(1);
});
// TODO: 添加你的特定测试用例
});
步骤 4：运行测试并检查覆盖率
npm test -- --coverage
python scripts/coverage_analyzer.py coverage/coverage-final.json
适用于提升测试覆盖率或准备发布时。
步骤 1：生成覆盖率报告
npm test -- --coverage --coverageReporters=json
步骤 2：分析覆盖率缺口
python scripts/coverage_analyzer.py coverage/coverage-final.json --threshold 80
步骤 3：识别关键路径
python scripts/coverage_analyzer.py coverage/ --critical-paths
步骤 4：为未覆盖的代码生成测试桩
python scripts/test_suite_generator.py src/ --uncovered-only --output __tests__/
步骤 5：验证改进
npm test -- --coverage
python scripts/coverage_analyzer.py coverage/ --compare previous-coverage.json
适用于为 Next.js 项目设置 Playwright。
步骤 1：初始化 Playwright（如果未安装）
npm init playwright@latest
步骤 2：根据路由搭建端到端测试脚手架
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/
步骤 3：配置认证夹具
// e2e/fixtures/auth.ts (已生成)
import { test as base } from '@playwright/test';
export const test = base.extend({
authenticatedPage: async ({ page }, use) => {
await page.goto('/login');
await page.fill('[name="email"]', 'test@example.com');
await page.fill('[name="password"]', 'password');
await page.click('button[type="submit"]');
await page.waitForURL('/dashboard');
await use(page);
},
});
步骤 4：运行端到端测试
npx playwright test
npx playwright show-report
步骤 5：添加到 CI 流水线
# .github/workflows/e2e.yml
- name: 运行端到端测试
run: npx playwright test
- name: 上传报告
uses: actions/upload-artifact@v3
with:
name: playwright-report
path: playwright-report/
| 文件 | 内容 | 使用场景 |
|---|---|---|
references/testing_strategies.md |
测试金字塔、测试类型、覆盖率目标、CI/CD 集成 | 设计测试策略 |
references/test_automation_patterns.md |
页面对象模型、模拟（MSW）、夹具、异步模式 | 编写测试代码 |
references/qa_best_practices.md |
可测试代码、不稳定测试、调试、质量指标 | 提升测试质量 |
// 首选（可访问性）
screen.getByRole('button', { name: /提交/i })
screen.getByLabelText(/邮箱/i)
screen.getByPlaceholderText(/搜索/i)
// 备选方案
screen.getByTestId('custom-element')
// 等待元素出现
await screen.findByText(/已加载/i);
// 等待元素移除
await waitForElementToBeRemoved(() => screen.queryByText(/加载中/i));
// 等待条件满足
await waitFor(() => {
expect(mockFn).toHaveBeenCalled();
});
import { rest } from 'msw';
import { setupServer } from 'msw/node';
const server = setupServer(
rest.get('/api/users', (req, res, ctx) => {
return res(ctx.json([{ id: 1, name: 'John' }]));
})
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
// 首选
page.getByRole('button', { name: '提交' })
page.getByLabel('邮箱')
page.getByText('欢迎')
// 链式调用
page.getByRole('listitem').filter({ hasText: '产品' })
module.exports = {
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80,
},
},
};
# Jest
npm test # 运行所有测试
npm test -- --watch # 监视模式
npm test -- --coverage # 包含覆盖率
npm test -- Button.test.tsx # 单个文件
# Playwright
npx playwright test # 运行所有端到端测试
npx playwright test --ui # UI 模式
npx playwright test --debug # 调试模式
npx playwright codegen # 生成测试
# 覆盖率
npm test -- --coverage --coverageReporters=lcov,json
python scripts/coverage_analyzer.py coverage/coverage-final.json