senior-qa

---
name: senior-qa
description: Use when generating unit tests, coverage analysis, and E2E tests for React/Next.js. Scaffolds Jest + React Testing Library tests, analyzes Istanbul/LCOV coverage gaps, sets up Playwright E2E tests.
category: Engineering
version: 1.0.0
tools: []
---

# Senior QA Engineer

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

## 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 patterns:**
- Basic usage: scan components and generate test stubs
- Include accessibility tests for components
- Generate with custom templates

**Supported patterns:**
- Functional components with hooks
- Components with Context providers
- Components with data fetching
- Form components with validation

## Coverage Analyzer

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

**Input:** Coverage report (JSON or LCOV format)
**Output:** Coverage analysis with recommendations and enforcement thresholds

**Usage patterns:**
- Analyze coverage report from Jest
- Enforce threshold with exit code on failure
- Generate HTML report
- Identify critical paths requiring high coverage
- Compare against previous coverage to track progress

## 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 patterns:**
- Scaffold E2E tests for App Router
- Include Page Object Model classes
- Generate tests for specific routes

## QA Workflows

**Unit Test Generation:** Scan for untested components → Generate test stubs → Review and customize → Run and check coverage

**Coverage Analysis:** Generate Jest coverage report → Analyze gaps → Identify critical paths → Generate stubs for uncovered code → Verify improvement

**E2E Test Setup:** Initialize Playwright → Scaffold tests from routes → Configure auth fixtures → Run E2E tests → Add to CI pipeline

## Testing Patterns Quick Reference

**React Testing Library queries (preferred order):**
- `getByRole()` - accessible, recommended
- `getByLabelText()` - form labels
- `getByPlaceholderText()` - input placeholders
- `getByTestId()` - last resort for custom elements

**Async testing patterns:**
- `findByText()` - wait for element
- `waitForElementToBeRemoved()` - wait for removal
- `waitFor()` - wait for condition

**Mocking with MSW (Mock Service Worker):**
- Setup server with `setupServer()`
- Define route handlers with `rest.get()`, `rest.post()`, etc.
- Call `server.listen()` in beforeAll, `server.resetHandlers()` after each test

**Playwright locators (recommended order):**
- `getByRole()` - button, textbox, heading, etc.
- `getByLabel()` - form labels
- `getByText()` - visible text
- Chain with `.filter()` for refinement

**Coverage thresholds in jest.config.js:**
```javascript
coverageThreshold: {
  global: {
    branches: 80,
    functions: 80,
    lines: 80,
    statements: 80
  }
}
```

## Tech Stack

**Testing Frameworks:** Jest, React Testing Library, Playwright
**Coverage Tools:** Istanbul, LCOV
**Mocking:** MSW (Mock Service Worker)
**Frameworks:** React, Next.js

## Quality Metrics

Track:
- Line coverage (code executed)
- Branch coverage (if/else paths)
- Function coverage (functions called)
- Statement coverage (statements executed)
- Trend: coverage over time across commits