name: testing-qa description: Specialized skill for writing and maintaining tests including unit tests, integration tests, E2E tests with Playwright, and accessibility tests. Use when writing tests for new features, debugging failed tests, improving test coverage, or setting up E2E tests.

Testing and QA

Quick Start

When writing tests:

1. Use Jest for unit tests
2. Use React Testing Library for component tests
3. Use Playwright for E2E tests
4. Use jest-axe for accessibility tests
5. Maintain >70% coverage

Key Files

• jest.config.js - Jest configuration
• playwright.config.ts - Playwright configuration
• src/__tests__/ - Unit and integration tests
• e2e/ - E2E tests
• __mocks__/ - Shared mocks

Common Patterns

Component Test

import { render, screen } from '@testing-library/react';
import { ProductCard } from '@/components/Product/ProductCard';

describe('ProductCard', () => {
  const mockProduct = {
    id: '1',
    name: 'Pintura Blanca',
    price: 5000,
    image: '/images/product.jpg',
  };
  
  it('should render product information', () => {
    render(<ProductCard product={mockProduct} />);
    
    expect(screen.getByText('Pintura Blanca')).toBeInTheDocument();
    expect(screen.getByText('$5,000')).toBeInTheDocument();
  });
});

API Test

import { GET } from '@/app/api/products/route';
import { NextRequest } from 'next/server';

describe('/api/products', () => {
  it('should return products for tenant', async () => {
    const request = new NextRequest('http://localhost/api/products', {
      headers: {
        'x-tenant-id': 'test-tenant-id',
      },
    });
    
    const response = await GET(request);
    const data = await response.json();
    
    expect(response.status).toBe(200);
    expect(Array.isArray(data)).toBe(true);
  });
});

E2E Test

import { test, expect } from '@playwright/test';

test('should complete checkout flow', async ({ page }) => {
  await page.goto('/product/pintura-blanca');
  await page.click('button:has-text("Agregar al carrito")');
  await page.click('a[href="/checkout"]');
  await page.fill('input[name="email"]', 'test@example.com');
  await expect(page.locator('text=Resumen de compra')).toBeVisible();
});

Accessibility Test

import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

it('should not have accessibility violations', async () => {
  const { container } = render(<ProductCard product={mockProduct} />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});