Component testing

Qué es y por qué importa

El component testing de Cypress monta un componente aislado en un navegador real, sin levantar la app completa:

// BookingCard.cy.jsx
import BookingCard from './BookingCard';

describe('BookingCard', () => {
  it('deshabilita el botón cuando no quedan cupos', () => {
    cy.mount(<BookingCard servicio="Corte" cuposDisponibles={0} />);

    cy.get('[data-cy="reservar"]').should('be.disabled');
    cy.contains('Sin cupos disponibles').should('be.visible');
  });

  it('emite el evento con los datos correctos al reservar', () => {
    const onReservar = cy.stub().as('onReservar');
    cy.mount(<BookingCard servicio="Corte" cuposDisponibles={3} onReservar={onReservar} />);

    cy.get('[data-cy="reservar"]').click();
    cy.get('@onReservar').should('have.been.calledWith', { servicio: 'Corte' });
  });
});

A diferencia de un test con jsdom (Vitest/Jest + Testing Library), aquí hay CSS real, viewport real y navegador real: los bugs de "el botón queda tapado en móvil" sí aparecen.

La pirámide práctica

| Capa | Qué cubre | Cuántos | |---|---|---| | Unit (Vitest) | Lógica pura, hooks, utils | Muchos | | Component (Cypress CT) | Comportamiento visual e interacción de cada pieza | Bastantes | | E2E | Flujos completos con backend | Pocos y críticos |

El component testing come terreno desde ambos lados: estados visuales que el e2e cubría lento, e interacciones que el unit test con jsdom cubría mintiendo un poco.

Casos donde brilla

• Estados difíciles de alcanzar por UI: el spinner, el error 500, el empty state — se montan directo con props.
• Componentes de librería interna: date-pickers, modales, tablas — su matriz completa de props probada en segundos.
• Responsive: cy.viewport('iphone-x') por test, sin recargar la app entera.

Setup mínimo

npx cypress open  # elegir "Component Testing" y seguir el wizard

Cypress detecta tu bundler (Vite/Webpack) y framework, y genera la configuración. En proyectos Vite el arranque es casi instantáneo.

Cierre del curso

Ya dominas el ciclo completo de Cypress: runner, intercepts, sesiones y component testing. Compara enfoques con el curso de Playwright — dominar ambos te hace bilingüe en el mercado más demandado de la automatización.

Ejercicio final

Toma un componente con al menos 3 estados (normal, cargando, error) de cualquier proyecto propio y escríbele component tests para los tres. Si no tienes uno, crea un BookingCard como el del ejemplo.