Testing: construir confianza en tu código

📋 Tabla de contenidos

• 🎯 Objetivo del sprint
• 📍 Posición en el viaje
• 🧭 Objetivos de aprendizaje
• 🏗️ El Testing Trophy
• 🔧 Stack de testing
• 🎓 Metodología: práctica atelier
  • Ritmo del sprint
  • Qué testear (orden de prioridad)
  • Protocolo de desarrollo asistido por IA
• 📝 Entregables del sprint
• 💡 Ejemplos de tests
  • Test unitario (Vitest)
  • Test de componente (RTL)
• 🔗 Navegación de la lección
• 📚 Vista previa: conceptos clave

“Los tests no buscan bugs. Los tests construyen confianza para cambiar.”

🎯 Objetivo del sprint

Al finalizar este sprint: tu app tiene una base de testing—tests unitarios para lógica, tests de componentes para comportamiento UI y al menos un test E2E para un flujo crítico.

📍 Posición en el viaje

🧭 Objetivos de aprendizaje

Al final de esta lección:

• Escribirás tests unitarios para funciones puras y hooks
• Testearás componentes React con React Testing Library
• Mockearás llamadas API en tests de componentes
• Escribirás al menos un test E2E con Cypress
• Entenderás el Testing Trophy (qué testear más)
• Configurarás CI para ejecutar tests en cada push

🏗️ El Testing Trophy

                    ┌───────┐
                    │  E2E  │  ← Pocos, rutas críticas
                    └───┬───┘
                   ┌────┴────┐
                   │Integration│  ← La mayoría de tus tests
                   └────┬─────┘
                 ┌──────┴──────┐
                 │    Unit     │  ← Funciones puras, hooks
                 └──────┬──────┘

Foco: ¿El usuario logra su objetivo?
Evita: Testear detalles de implementación

🔧 Stack de testing

🎓 Metodología: práctica atelier

Ritmo del sprint

┌─────────────────────────────────────────────────────────┐
│ DÍA 1: Tests unitarios y de componentes                 │
│   • Configurar Vitest y React Testing Library           │
│   • Tests unitarios para funciones utility              │
│   • Testear un formulario (render, type, submit)        │
├─────────────────────────────────────────────────────────┤
│ DÍA 2: Integración y mocking                            │
│   • Configurar MSW (Mock Service Worker) para API       │
│   • Testear componente con data-fetching end-to-end     │
│   • Testear estados error y loading                     │
├─────────────────────────────────────────────────────────┤
│ DÍA 3: E2E y CI                                          │
│   • Test Cypress: login → dashboard                     │
│   • GitHub Actions para ejecutar tests en push          │
│   • Celebrar checkmarks verdes ✅                       │
└─────────────────────────────────────────────────────────┘

Qué testear (orden de prioridad)

Protocolo de desarrollo asistido por IA

📝 Entregables del sprint

• 5+ tests unitarios para utilidades y funciones puras
• 3+ tests de componentes con RTL
• Setup MSW para mockear API en tests
• 1 test E2E Cypress para flujo crítico
• GitHub Actions ejecutando tests en push
• Reporte de cobertura (objetivo 60%+ en código core)
• Reflexión: ¿qué revelaron los tests sobre tu código?

💡 Ejemplos de tests

Test unitario (Vitest)

// src/utils/formatPrice.test.js
import { formatPrice } from './formatPrice';

describe('formatPrice', () => {
  it('formats whole numbers', () => {
    expect(formatPrice(1000)).toBe('$10.00');
  });

  it('handles zero', () => {
    expect(formatPrice(0)).toBe('$0.00');
  });
});

Test de componente (RTL)

// src/components/LoginForm.test.jsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LoginForm } from './LoginForm';

test('submits email and password', async () => {
  const handleSubmit = vi.fn();
  render(<LoginForm onSubmit={handleSubmit} />);

  await userEvent.type(screen.getByLabelText(/email/i), 'test@example.com');
  await userEvent.type(screen.getByLabelText(/password/i), 'password123');
  await userEvent.click(screen.getByRole('button', { name: /login/i }));

  expect(handleSubmit).toHaveBeenCalledWith({
    email: 'test@example.com',
    password: 'password123'
  });
});

🔗 Navegación de la lección

📚 Vista previa: conceptos clave

Contenido completo pendiente. Temas incluidos:

1. Filosofía del testing
2. Configuración de Vitest
3. Fundamentos de React Testing Library
4. Testear interacciones de usuario
5. Mocking con MSW
6. Cypress E2E básico
7. Integración CI/CD
8. Cuándo NO testear

“Escribe tests. No demasiados. Sobre todo de integración.” — Guillermo Rauch