@claudeautopm/plugin-testing

Complete testing plugin with Jest, Vitest, Testing Library, and comprehensive test strategies for frontend, backend, and E2E testing.

Version: 2.0.0 | Schema: 2.0 | Context7-Verified: ✅

📦 Installation

# Install the plugin package
npm install @claudeautopm/plugin-testing

# Or install globally
npm install -g @claudeautopm/plugin-testing

Context7 Integration

This plugin uses Context7 MCP server to ensure all testing patterns follow the latest official documentation:

Libraries Verified:

• Vitest: /vitest-dev/vitest (1,183 snippets, trust 8.3)
• Testing Library: /testing-library/testing-library-docs (499 snippets, trust 9.3)
• React Testing Library: /testing-library/react-testing-library (trust 9.3)

All testing patterns, best practices, and code examples are verified against current official documentation to prevent outdated testing approaches.

🧪 What's Included

Agent

• frontend-testing-engineer - Frontend unit and integration testing specialist
  • Jest and Vitest configuration
  • React Testing Library patterns
  • Vue Test Utils patterns
  • Angular testing utilities
  • Component testing strategies
  • Coverage analysis and optimization
  • Test quality best practices

Commands

• test-setup - Setup comprehensive testing framework

  • Interactive framework selection (Vitest/Jest)
  • Project type detection (React/Vue/Angular)
  • Coverage configuration
  • CI/CD integration
  • Example test creation

• test-coverage - Generate and analyze coverage reports

  • Coverage metrics analysis
  • Gap identification
  • Actionable recommendations
  • Trend tracking
  • CI/CD integration

Rules

• testing-standards - Comprehensive testing best practices

  • Test-Driven Development (TDD) enforcement
  • Query priority standards
  • Test independence requirements
  • AAA pattern structure
  • Coverage quality standards

• test-coverage-requirements - Coverage threshold enforcement

  • Minimum coverage thresholds
  • Per-directory requirements
  • Pre-commit hooks
  • CI/CD integration
  • Mutation testing recommendations

Example Scripts

• vitest-config-example.js - Vitest configuration with all features

  • Coverage setup
  • Sharding configuration
  • Performance profiling
  • Browser testing
  • Dependency injection

• react-testing-example.test.jsx - React Testing Library examples

  • Component testing patterns
  • User interaction testing
  • Async operations
  • MSW API mocking
  • Context7-verified patterns

• vue-testing-example.test.js - Vue Test Utils examples

  • Vue 3 component testing
  • Pinia store testing
  • Event emission testing
  • Async data fetching
  • Context7-verified patterns

🚀 Quick Start

Using Commands

# Setup testing framework (interactive)
/test:setup

# Setup with Vitest for React project
/test:setup --framework=vitest --type=react --coverage

# Generate coverage report
/test:coverage

# Generate detailed coverage analysis
/test:coverage --detailed --html

Using Agent

@frontend-testing-engineer

I need to create comprehensive tests for my UserProfile component.

Requirements:
- Test all user interactions
- Test loading and error states
- Test form validation
- Achieve 90%+ coverage
- Include accessibility tests

Please create tests following Context7-verified best practices.

📋 Agent Capabilities

Test Strategy Design

• Test pyramid implementation
• Coverage goals and metrics
• Test data management
• CI/CD integration

Unit Testing

• Component isolation
• Mock and stub creation
• Test-driven development (TDD)
• Snapshot testing

Integration Testing

• API integration tests
• Database integration
• Service mocking
• Contract testing

E2E Testing

• User flow automation
• Cross-browser testing
• Mobile testing
• Visual regression

Quality Assurance

• Accessibility (a11y) testing
• Performance benchmarking
• Security testing
• Code quality metrics

🚀 Examples

React Component Testing

@frontend-testing-engineer

Create test suite for ProductCard component:

Component features:
- Display product image, name, price
- Add to cart button
- Favorite toggle
- Discount badge (conditional)
- Click to view details

Requirements:
- React Testing Library
- User event simulation
- Accessibility checks
- Mock API calls
- Coverage > 90%

Include:
1. Unit tests for all features
2. Accessibility tests
3. Mock setup
4. Edge case handling
5. Test utilities

E2E Testing with Playwright

@frontend-testing-engineer

Build E2E test suite for e-commerce checkout:

User flow:
1. Browse products
2. Add items to cart
3. Apply discount code
4. Fill shipping info
5. Select payment method
6. Confirm order

Requirements:
- Playwright framework
- Page Object Model
- Test fixtures
- Cross-browser (Chrome, Firefox, Safari)
- Mobile viewport testing
- Screenshot on failure

Include:
1. Test specifications
2. Page object classes
3. Fixtures and helpers
4. CI/CD configuration
5. Reporting setup

Visual Regression Testing

@frontend-testing-engineer

Setup visual regression testing:

Components to test:
- Header navigation
- Product grid
- Sidebar filters
- Modal dialogs
- Form inputs

Requirements:
- Percy or Chromatic integration
- Multiple viewport sizes
- Theme variations (light/dark)
- State variations (empty, loading, error)
- CI/CD integration

Include:
1. Visual test configuration
2. Story definitions
3. Snapshot baselines
4. Review workflow
5. GitHub Actions setup

Accessibility Testing

@frontend-testing-engineer

Implement accessibility testing:

Requirements:
- WCAG 2.1 Level AA compliance
- Keyboard navigation
- Screen reader compatibility
- Color contrast validation
- Focus management

Tools:
- axe-core
- jest-axe
- Lighthouse CI
- NVDA/JAWS testing

Include:
1. Automated a11y tests
2. Manual testing checklist
3. CI/CD integration
4. Violation reporting
5. Remediation guidelines

Performance Testing

@frontend-testing-engineer

Create performance test suite:

Metrics to track:
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- Time to Interactive (TTI)
- Cumulative Layout Shift (CLS)
- Total Blocking Time (TBT)

Requirements:
- Lighthouse CI
- Real device testing
- Network throttling
- Budget enforcement
- Trend tracking

Include:
1. Performance test config
2. Budget definitions
3. CI/CD integration
4. Reporting dashboard
5. Optimization recommendations

Test Automation Framework

@frontend-testing-engineer

Design comprehensive test automation framework:

Test types:
- Unit tests (Jest)
- Integration tests (Testing Library)
- E2E tests (Playwright)
- Visual tests (Percy)
- A11y tests (axe)
- Performance tests (Lighthouse)

Requirements:
- Unified reporting
- Parallel execution
- Flake detection
- Smart retries
- Cost optimization

Include:
1. Framework architecture
2. Test utilities library
3. Custom matchers
4. CI/CD pipeline
5. Monitoring and alerts

🔧 Configuration

Environment Variables

Some agents benefit from environment variables:

# Testing
export JEST_TIMEOUT=30000
export PLAYWRIGHT_BROWSERS_PATH=/opt/browsers
export CI=true

# Visual testing
export PERCY_TOKEN=your-token
export CHROMATIC_PROJECT_TOKEN=your-token

# Accessibility
export AXE_CORE_VERSION=4.7.0

Agent Customization

You can customize agent behavior in .claude/config.yaml:

plugins:
  testing:
    unit:
      framework: jest
      coverage_threshold: 80
      test_match: ["**/*.test.js", "**/*.spec.js"]
    e2e:
      framework: playwright
      browsers: [chromium, firefox, webkit]
      retries: 2
    visual:
      provider: percy
      responsive_breakpoints: [375, 768, 1024, 1440]
    accessibility:
      standard: WCAG2AA
      include_best_practices: true

📖 Documentation

• Frontend Testing Engineer Guide

🤝 Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines.

📄 License

MIT © ClaudeAutoPM Team

🔗 Links

• ClaudeAutoPM
• Plugin Documentation
• npm Package
• Issues