[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-6dbf5811-2012-4482-9dac-2749730e5d0b":3,"$flxRquFF9X6WG9kSVE0qEPKzwxh50K3ykEzFXYtTLSuU":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"6dbf5811-2012-4482-9dac-2749730e5d0b","senior-qa","生成React\u002FNext.js应用的单元测试、集成测试和端到端测试。扫描组件以创建Jest + React Testing Library测试存根，分析Istanbul\u002FLCOV覆盖率报告以显示差距，从Next.js路由生成Playwright测试文件，使用MSW模拟API调用，创建测试固定值，并配置测试运行器。当用户请求“生成测试”、“编写单元测试”、“分析测试覆盖率”、“搭建端到端测试”、“设置Playwright”、“配置Jest”时使用。","cat_coding_review","mod_coding","alirezarezvani,coding","---\nname: \"senior-qa\"\ndescription: Generates unit tests, integration tests, and E2E tests for React\u002FNext.js applications. Scans components to create Jest + React Testing Library test stubs, analyzes Istanbul\u002FLCOV coverage reports to surface gaps, scaffolds Playwright test files from Next.js routes, mocks API calls with MSW, creates test fixtures, and configures test runners. Use when the user asks to \"generate tests\", \"write unit tests\", \"analyze test coverage\", \"scaffold E2E tests\", \"set up Playwright\", \"configure Jest\", \"implement testing patterns\", or \"improve test quality\".\n---\n\n# Senior QA Engineer\n\nTest automation, coverage analysis, and quality assurance patterns for React and Next.js applications.\n\n---\n\n## Quick Start\n\n```bash\n# Generate Jest test stubs for React components\npython scripts\u002Ftest_suite_generator.py src\u002Fcomponents\u002F --output __tests__\u002F\n\n# Analyze test coverage from Jest\u002FIstanbul reports\npython scripts\u002Fcoverage_analyzer.py coverage\u002Fcoverage-final.json --threshold 80\n\n# Scaffold Playwright E2E tests for Next.js routes\npython scripts\u002Fe2e_test_scaffolder.py src\u002Fapp\u002F --output e2e\u002F\n```\n\n---\n\n## Tools Overview\n\n### 1. Test Suite Generator\n\nScans React\u002FTypeScript components and generates Jest + React Testing Library test stubs with proper structure.\n\n**Input:** Source directory containing React components\n**Output:** Test files with describe blocks, render tests, interaction tests\n\n**Usage:**\n```bash\n# Basic usage - scan components and generate tests\npython scripts\u002Ftest_suite_generator.py src\u002Fcomponents\u002F --output __tests__\u002F\n\n# Include accessibility tests\npython scripts\u002Ftest_suite_generator.py src\u002F --output __tests__\u002F --include-a11y\n\n# Generate with custom template\npython scripts\u002Ftest_suite_generator.py src\u002F --template custom-template.tsx\n```\n\n**Supported Patterns:**\n- Functional components with hooks\n- Components with Context providers\n- Components with data fetching\n- Form components with validation\n\n---\n\n### 2. Coverage Analyzer\n\nParses Jest\u002FIstanbul coverage reports and identifies gaps, uncovered branches, and provides actionable recommendations.\n\n**Input:** Coverage report (JSON or LCOV format)\n**Output:** Coverage analysis with recommendations\n\n**Usage:**\n```bash\n# Analyze coverage report\npython scripts\u002Fcoverage_analyzer.py coverage\u002Fcoverage-final.json\n\n# Enforce threshold (exit 1 if below)\npython scripts\u002Fcoverage_analyzer.py coverage\u002F --threshold 80 --strict\n\n# Generate HTML report\npython scripts\u002Fcoverage_analyzer.py coverage\u002F --format html --output report.html\n```\n\n---\n\n### 3. E2E Test Scaffolder\n\nScans Next.js pages\u002Fapp directory and generates Playwright test files with common interactions.\n\n**Input:** Next.js pages or app directory\n**Output:** Playwright test files organized by route\n\n**Usage:**\n```bash\n# Scaffold E2E tests for Next.js App Router\npython scripts\u002Fe2e_test_scaffolder.py src\u002Fapp\u002F --output e2e\u002F\n\n# Include Page Object Model classes\npython scripts\u002Fe2e_test_scaffolder.py src\u002Fapp\u002F --output e2e\u002F --include-pom\n\n# Generate for specific routes\npython scripts\u002Fe2e_test_scaffolder.py src\u002Fapp\u002F --routes \"\u002Flogin,\u002Fdashboard,\u002Fcheckout\"\n```\n\n---\n\n## QA Workflows\n\n### Unit Test Generation Workflow\n\nUse when setting up tests for new or existing React components.\n\n**Step 1: Scan project for untested components**\n```bash\npython scripts\u002Ftest_suite_generator.py src\u002Fcomponents\u002F --scan-only\n```\n\n**Step 2: Generate test stubs**\n```bash\npython scripts\u002Ftest_suite_generator.py src\u002Fcomponents\u002F --output __tests__\u002F\n```\n\n**Step 3: Review and customize generated tests**\n```typescript\n\u002F\u002F __tests__\u002FButton.test.tsx (generated)\nimport { render, screen, fireEvent } from '@testing-library\u002Freact';\nimport { Button } from '..\u002Fsrc\u002Fcomponents\u002FButton';\n\ndescribe('Button', () => {\n  it('renders with label', () => {\n    render(\u003CButton>Click me\u003C\u002FButton>);\n    expect(screen.getByRole('button', { name: \"click-mei-tobeinthedocument\"\n  });\n\n  it('calls onClick when clicked', () => {\n    const handleClick = jest.fn();\n    render(\u003CButton onClick={handleClick}>Click\u003C\u002FButton>);\n    fireEvent.click(screen.getByRole('button'));\n    expect(handleClick).toHaveBeenCalledTimes(1);\n  });\n\n  \u002F\u002F TODO: Add your specific test cases\n});\n```\n\n**Step 4: Run tests and check coverage**\n```bash\nnpm test -- --coverage\npython scripts\u002Fcoverage_analyzer.py coverage\u002Fcoverage-final.json\n```\n\n---\n\n### Coverage Analysis Workflow\n\nUse when improving test coverage or preparing for release.\n\n**Step 1: Generate coverage report**\n```bash\nnpm test -- --coverage --coverageReporters=json\n```\n\n**Step 2: Analyze coverage gaps**\n```bash\npython scripts\u002Fcoverage_analyzer.py coverage\u002Fcoverage-final.json --threshold 80\n```\n\n**Step 3: Identify critical paths**\n```bash\npython scripts\u002Fcoverage_analyzer.py coverage\u002F --critical-paths\n```\n\n**Step 4: Generate missing test stubs**\n```bash\npython scripts\u002Ftest_suite_generator.py src\u002F --uncovered-only --output __tests__\u002F\n```\n\n**Step 5: Verify improvement**\n```bash\nnpm test -- --coverage\npython scripts\u002Fcoverage_analyzer.py coverage\u002F --compare previous-coverage.json\n```\n\n---\n\n### E2E Test Setup Workflow\n\nUse when setting up Playwright for a Next.js project.\n\n**Step 1: Initialize Playwright (if not installed)**\n```bash\nnpm init playwright@latest\n```\n\n**Step 2: Scaffold E2E tests from routes**\n```bash\npython scripts\u002Fe2e_test_scaffolder.py src\u002Fapp\u002F --output e2e\u002F\n```\n\n**Step 3: Configure authentication fixtures**\n```typescript\n\u002F\u002F e2e\u002Ffixtures\u002Fauth.ts (generated)\nimport { test as base } from '@playwright\u002Ftest';\n\nexport const test = base.extend({\n  authenticatedPage: async ({ page }, use) => {\n    await page.goto('\u002Flogin');\n    await page.fill('[name=\"email\"]', 'test@example.com');\n    await page.fill('[name=\"password\"]', 'password');\n    await page.click('button[type=\"submit\"]');\n    await page.waitForURL('\u002Fdashboard');\n    await use(page);\n  },\n});\n```\n\n**Step 4: Run E2E tests**\n```bash\nnpx playwright test\nnpx playwright show-report\n```\n\n**Step 5: Add to CI pipeline**\n```yaml\n# .github\u002Fworkflows\u002Fe2e.yml\n- name: \"run-e2e-tests\"\n  run: npx playwright test\n- name: \"upload-report\"\n  uses: actions\u002Fupload-artifact@v3\n  with:\n    name: \"playwright-report\"\n    path: playwright-report\u002F\n```\n\n---\n\n## Reference Documentation\n\n| File | Contains | Use When |\n|------|----------|----------|\n| `references\u002Ftesting_strategies.md` | Test pyramid, testing types, coverage targets, CI\u002FCD integration | Designing test strategy |\n| `references\u002Ftest_automation_patterns.md` | Page Object Model, mocking (MSW), fixtures, async patterns | Writing test code |\n| `references\u002Fqa_best_practices.md` | Testable code, flaky tests, debugging, quality metrics | Improving test quality |\n\n---\n\n## Common Patterns Quick Reference\n\n### React Testing Library Queries\n\n```typescript\n\u002F\u002F Preferred (accessible)\nscreen.getByRole('button', { name: \"submiti\"\nscreen.getByLabelText(\u002Femail\u002Fi)\nscreen.getByPlaceholderText(\u002Fsearch\u002Fi)\n\n\u002F\u002F Fallback\nscreen.getByTestId('custom-element')\n```\n\n### Async Testing\n\n```typescript\n\u002F\u002F Wait for element\nawait screen.findByText(\u002Floaded\u002Fi);\n\n\u002F\u002F Wait for removal\nawait waitForElementToBeRemoved(() => screen.queryByText(\u002Floading\u002Fi));\n\n\u002F\u002F Wait for condition\nawait waitFor(() => {\n  expect(mockFn).toHaveBeenCalled();\n});\n```\n\n### Mocking with MSW\n\n```typescript\nimport { rest } from 'msw';\nimport { setupServer } from 'msw\u002Fnode';\n\nconst server = setupServer(\n  rest.get('\u002Fapi\u002Fusers', (req, res, ctx) => {\n    return res(ctx.json([{ id: 1, name: \"john\" }]));\n  })\n);\n\nbeforeAll(() => server.listen());\nafterEach(() => server.resetHandlers());\nafterAll(() => server.close());\n```\n\n### Playwright Locators\n\n```typescript\n\u002F\u002F Preferred\npage.getByRole('button', { name: \"submit\" })\npage.getByLabel('Email')\npage.getByText('Welcome')\n\n\u002F\u002F Chaining\npage.getByRole('listitem').filter({ hasText: 'Product' })\n```\n\n### Coverage Thresholds (jest.config.js)\n\n```javascript\nmodule.exports = {\n  coverageThreshold: {\n    global: {\n      branches: 80,\n      functions: 80,\n      lines: 80,\n      statements: 80,\n    },\n  },\n};\n```\n\n---\n\n## Common Commands\n\n```bash\n# Jest\nnpm test                           # Run all tests\nnpm test -- --watch                # Watch mode\nnpm test -- --coverage             # With coverage\nnpm test -- Button.test.tsx        # Single file\n\n# Playwright\nnpx playwright test                # Run all E2E tests\nnpx playwright test --ui           # UI mode\nnpx playwright test --debug        # Debug mode\nnpx playwright codegen             # Generate tests\n\n# Coverage\nnpm test -- --coverage --coverageReporters=lcov,json\npython scripts\u002Fcoverage_analyzer.py coverage\u002Fcoverage-final.json\n```\n","","imported","https:\u002F\u002Fgithub.com\u002Falirezarezvani\u002Fclaude-skills","user_system_seed","SkillOPIC",true,181,274,"2026-05-16 13:57:59",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"代码审查","review","mdi-magnify-scan","代码质量分析、安全审查",4,145,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"53083fef-f944-4573-8a62-3326323d2562","1.0.0","senior-qa.zip",46854,"uploads\u002Fskills\u002F6dbf5811-2012-4482-9dac-2749730e5d0b\u002Fsenior-qa.zip","c6f5d6efacafa4d9c28e9f502d67d4642f54cec526e43a7f95ba930681c3cce2","[{\"path\":\"README.md\",\"isDirectory\":false,\"size\":5705},{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":8578},{\"path\":\"references\u002Fqa_best_practices.md\",\"isDirectory\":false,\"size\":23792},{\"path\":\"references\u002Ftest_automation_patterns.md\",\"isDirectory\":false,\"size\":24981},{\"path\":\"references\u002Ftesting_strategies.md\",\"isDirectory\":false,\"size\":17198},{\"path\":\"scripts\u002Fcoverage_analyzer.py\",\"isDirectory\":false,\"size\":29915},{\"path\":\"scripts\u002Fe2e_test_scaffolder.py\",\"isDirectory\":false,\"size\":26469},{\"path\":\"scripts\u002Ftest_suite_generator.py\",\"isDirectory\":false,\"size\":19896}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]