React/Next.js 高级质量保证工具：自动化测试、覆盖率分析与E2E测试脚手架

senior-qa by alirezarezvani/claude-skills

227 周安装量

6,500 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/alirezarezvani/claude-skills --skill senior-qa

自动化 React 测试

🇨🇳中文介绍

高级质量保证工程师

适用于 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 E2E 测试
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/

工具概览

1. 测试套件生成器

扫描 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

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

2. 覆盖率分析器

解析 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

3. E2E 测试脚手架

扫描 Next.js 页面/应用目录，并使用常见交互生成 Playwright 测试文件。

输入： Next.js 页面或应用目录 输出： 按路由组织的 Playwright 测试文件

# 为 Next.js 应用路由器搭建 E2E 测试
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/

# 输出：
# 正在扫描：src/app/
# 找到 12 个路由
#
# 生成的 E2E 测试：
#   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('renders with label', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
  });

  it('calls onClick when clicked', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click</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

E2E 测试设置工作流

在为 Next.js 项目设置 Playwright 时使用。

步骤 1：初始化 Playwright (如果未安装)

npm init playwright@latest

步骤 2：从路由搭建 E2E 测试

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：运行 E2E 测试

npx playwright test
npx playwright show-report

步骤 5：添加到 CI 流水线

# .github/workflows/e2e.yml
- name: Run E2E tests
  run: npx playwright test
- name: Upload report
  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`	可测试的代码、不稳定的测试、调试、质量指标	提高测试质量

常用模式速查表

React Testing Library 查询

// 首选 (可访问)
screen.getByRole('button', { name: /submit/i })
screen.getByLabelText(/email/i)
screen.getByPlaceholderText(/search/i)

// 备选
screen.getByTestId('custom-element')

// 等待元素出现
await screen.findByText(/loaded/i);

// 等待元素移除
await waitForElementToBeRemoved(() => screen.queryByText(/loading/i));

// 等待条件满足
await waitFor(() => {
  expect(mockFn).toHaveBeenCalled();
});

使用 MSW 进行模拟

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());

Playwright 定位器

// 首选
page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByText('Welcome')

// 链式调用
page.getByRole('listitem').filter({ hasText: 'Product' })

覆盖率阈值 (jest.config.js)

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                # 运行所有 E2E 测试
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

🇺🇸English

Senior QA Engineer

Test automation, coverage analysis, and quality assurance patterns for React and Next.js applications.

Quick Start
Tools Overview
- Test Suite Generator
- Coverage Analyzer
- E2E Test Scaffolder
QA Workflows
- Unit Test Generation Workflow
- Coverage Analysis Workflow
- E2E Test Setup Workflow
Reference Documentation
Common Patterns Quick Reference

Quick Start

# Generate Jest test stubs for React components
python scripts/test_suite_generator.py src/components/ --output __tests__/

# Analyze test coverage from Jest/Istanbul reports
python scripts/coverage_analyzer.py coverage/coverage-final.json --threshold 80

# Scaffold Playwright E2E tests for Next.js routes
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/

Tools Overview

1. Test Suite Generator

Scans React/TypeScript components and generates Jest + React Testing Library test stubs with proper structure.

Input: Source directory containing React components Output: Test files with describe blocks, render tests, interaction tests

Usage:

# Basic usage - scan components and generate tests
python scripts/test_suite_generator.py src/components/ --output __tests__/

# Output:
# Scanning: src/components/
# Found 24 React components
#
# Generated tests:
#   __tests__/Button.test.tsx (render, click handler, disabled state)
#   __tests__/Modal.test.tsx (render, open/close, keyboard events)
#   __tests__/Form.test.tsx (render, validation, submission)
#   ...
#
# Summary: 24 test files, 87 test cases

# Include accessibility tests
python scripts/test_suite_generator.py src/ --output __tests__/ --include-a11y

# Generate with custom template
python scripts/test_suite_generator.py src/ --template custom-template.tsx

Supported Patterns:

Functional components with hooks
Components with Context providers
Components with data fetching
Form components with validation

2. Coverage Analyzer

Parses Jest/Istanbul coverage reports and identifies gaps, uncovered branches, and provides actionable recommendations.

Input: Coverage report (JSON or LCOV format) Output: Coverage analysis with recommendations

Usage:

# Analyze coverage report
python scripts/coverage_analyzer.py coverage/coverage-final.json

# Output:
# === Coverage Analysis Report ===
# Overall: 72.4% (target: 80%)
#
# BY TYPE:
#   Statements: 74.2%
#   Branches: 68.1%
#   Functions: 71.8%
#   Lines: 73.5%
#
# CRITICAL GAPS (uncovered business logic):
#   src/services/payment.ts:45-67 - Payment processing
#   src/hooks/useAuth.ts:23-41 - Authentication flow
#
# RECOMMENDATIONS:
#   1. Add tests for payment service error handling
#   2. Cover authentication edge cases
#   3. Test form validation branches
#
# Files below threshold (80%):
#   src/components/Checkout.tsx: 45%
#   src/services/api.ts: 62%

# Enforce threshold (exit 1 if below)
python scripts/coverage_analyzer.py coverage/ --threshold 80 --strict

# Generate HTML report
python scripts/coverage_analyzer.py coverage/ --format html --output report.html

3. E2E Test Scaffolder

Scans Next.js pages/app directory and generates Playwright test files with common interactions.

Input: Next.js pages or app directory Output: Playwright test files organized by route

Usage:

# Scaffold E2E tests for Next.js App Router
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/

# Output:
# Scanning: src/app/
# Found 12 routes
#
# Generated E2E tests:
#   e2e/home.spec.ts (navigation, hero section)
#   e2e/auth/login.spec.ts (form submission, validation)
#   e2e/auth/register.spec.ts (registration flow)
#   e2e/dashboard.spec.ts (authenticated routes)
#   e2e/products/[id].spec.ts (dynamic routes)
#   ...
#
# Generated: playwright.config.ts
# Generated: e2e/fixtures/auth.ts

# Include Page Object Model classes
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/ --include-pom

# Generate for specific routes
python scripts/e2e_test_scaffolder.py src/app/ --routes "/login,/dashboard,/checkout"

QA Workflows

Unit Test Generation Workflow

Use when setting up tests for new or existing React components.

Step 1: Scan project for untested components

python scripts/test_suite_generator.py src/components/ --scan-only

Step 2: Generate test stubs

python scripts/test_suite_generator.py src/components/ --output __tests__/

Step 3: Review and customize generated tests

// __tests__/Button.test.tsx (generated)
import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from '../src/components/Button';

describe('Button', () => {
  it('renders with label', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
  });

  it('calls onClick when clicked', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click</Button>);
    fireEvent.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  // TODO: Add your specific test cases
});

Step 4: Run tests and check coverage

npm test -- --coverage
python scripts/coverage_analyzer.py coverage/coverage-final.json

Coverage Analysis Workflow

Use when improving test coverage or preparing for release.

Step 1: Generate coverage report

npm test -- --coverage --coverageReporters=json

Step 2: Analyze coverage gaps

python scripts/coverage_analyzer.py coverage/coverage-final.json --threshold 80

Step 3: Identify critical paths

python scripts/coverage_analyzer.py coverage/ --critical-paths

Step 4: Generate missing test stubs

python scripts/test_suite_generator.py src/ --uncovered-only --output __tests__/

Step 5: Verify improvement

npm test -- --coverage
python scripts/coverage_analyzer.py coverage/ --compare previous-coverage.json

E2E Test Setup Workflow

Use when setting up Playwright for a Next.js project.

Step 1: Initialize Playwright (if not installed)

npm init playwright@latest

Step 2: Scaffold E2E tests from routes

python scripts/e2e_test_scaffolder.py src/app/ --output e2e/

Step 3: Configure authentication fixtures

// e2e/fixtures/auth.ts (generated)
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);
  },
});

Step 4: Run E2E tests

npx playwright test
npx playwright show-report

Step 5: Add to CI pipeline

# .github/workflows/e2e.yml
- name: Run E2E tests
  run: npx playwright test
- name: Upload report
  uses: actions/upload-artifact@v3
  with:
    name: playwright-report
    path: playwright-report/

Reference Documentation

File	Contains	Use When
`references/testing_strategies.md`	Test pyramid, testing types, coverage targets, CI/CD integration	Designing test strategy
`references/test_automation_patterns.md`	Page Object Model, mocking (MSW), fixtures, async patterns	Writing test code
`references/qa_best_practices.md`	Testable code, flaky tests, debugging, quality metrics	Improving test quality

Common Patterns Quick Reference

React Testing Library Queries

// Preferred (accessible)
screen.getByRole('button', { name: /submit/i })
screen.getByLabelText(/email/i)
screen.getByPlaceholderText(/search/i)

// Fallback
screen.getByTestId('custom-element')

Async Testing

// Wait for element
await screen.findByText(/loaded/i);

// Wait for removal
await waitForElementToBeRemoved(() => screen.queryByText(/loading/i));

// Wait for condition
await waitFor(() => {
  expect(mockFn).toHaveBeenCalled();
});

Mocking with MSW

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());

Playwright Locators

// Preferred
page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByText('Welcome')

// Chaining
page.getByRole('listitem').filter({ hasText: 'Product' })

Coverage Thresholds (jest.config.js)

module.exports = {
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
};

Common Commands

# Jest
npm test                           # Run all tests
npm test -- --watch                # Watch mode
npm test -- --coverage             # With coverage
npm test -- Button.test.tsx        # Single file

# Playwright
npx playwright test                # Run all E2E tests
npx playwright test --ui           # UI mode
npx playwright test --debug        # Debug mode
npx playwright codegen             # Generate tests

# Coverage
npm test -- --coverage --coverageReporters=lcov,json
python scripts/coverage_analyzer.py coverage/coverage-final.json

Weekly Installs

223

Repository

alirezarezvani/…e-skills

GitHub Stars

3.6K

First Seen

Jan 20, 2026

Security Audits

Gen Agent Trust HubFail SocketPass SnykPass

Installed on

claude-code183

opencode167

gemini-cli166

codex154

cursor140

github-copilot136

Skills CLI 使用指南：AI Agent 技能包管理器安装与管理教程

27,400 周安装

React/Next.js 高级质量保证工具：自动化测试、覆盖率分析与E2E测试脚手架

🇨🇳中文介绍

高级质量保证工程师

目录

快速开始

工具概览

1. 测试套件生成器

相关 Skills

2. 覆盖率分析器

3. E2E 测试脚手架

质量保证工作流

单元测试生成工作流

覆盖率分析工作流

E2E 测试设置工作流

参考文档

常用模式速查表

React Testing Library 查询

异步测试

使用 MSW 进行模拟

Playwright 定位器

覆盖率阈值 (jest.config.js)

常用命令

🇺🇸English

Senior QA Engineer

Table of Contents

Quick Start

Tools Overview

1. Test Suite Generator

2. Coverage Analyzer

3. E2E Test Scaffolder

QA Workflows

Unit Test Generation Workflow

Coverage Analysis Workflow

E2E Test Setup Workflow

Reference Documentation

Common Patterns Quick Reference

React Testing Library Queries

Async Testing

Mocking with MSW

Playwright Locators

Coverage Thresholds (jest.config.js)

Common Commands

最新 Skills