Testing and QA

Quick Start

When writing tests:

• Use Jest for unit tests

• Use React Testing Library for component tests

• Use Playwright for E2E tests

• Use jest-axe for accessibility tests

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