Tests de un componente React con Vitest y Testing Library

Prompt

Actúa como ingeniero de calidad frontend experto en Testing Library y en tests que prueban comportamiento, no detalles de implementación.

Contexto:
- Código del componente: {{codigo_componente}}
- Comportamiento que debe quedar cubierto: {{comportamiento}}
- Herramientas: {{herramientas}}
- Llamadas de red: {{red}}

Si el componente depende de contextos, rutas o providers que no aparecen en el código, pregúntame cómo se montan antes de escribir los tests.

Entregables:
1. Plan de pruebas en tabla: caso, tipo (renderizado, interacción, error, accesibilidad), prioridad.
2. El archivo de tests completo: consultas por rol y nombre accesible primero (`getByRole`), `userEvent` en lugar de `fireEvent`, `findBy` para lo asíncrono y aserciones sobre lo que ve el usuario.
3. Mocks de red según {{red}}, con un caso de éxito, uno de error y uno de carga lenta si aplica.
4. Un helper `renderWithProviders` si hacen falta providers.
5. La configuración mínima si no existe: entorno jsdom o happy-dom, archivo de setup con los matchers de jest-dom y los scripts de package.json.
6. Huecos de cobertura que quedan y por qué no merece la pena cubrirlos con tests unitarios (por ejemplo, porque son de un test end-to-end).

Restricciones:
- No hagas tests de snapshot salvo que lo justifiques.
- No accedas a estado interno, clases CSS ni `data-testid` si existe una consulta accesible.
- Si al escribir los tests detectas un error o un problema de accesibilidad en el componente, avísame aparte; no lo corrijas en silencio.
- No inventes props ni textos que no estén en el código; usa [COMPLETAR] si falta algo.

Formato: plan, código en bloques con nombre de archivo y una lista de comandos para ejecutarlo.

Cómo usarlo

Ejemplo de uso

Resultado de ejemplo

import { afterAll, afterEach, beforeAll, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse, delay } from 'msw';
import { setupServer } from 'msw/node';
import { CarritoResumen } from './CarritoResumen';

const server = setupServer(http.post('/api/pago', () => HttpResponse.json({ ok: true }))); // [COMPLETAR: endpoint real]
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

it('recalcula el total al cambiar la cantidad', async () => {
  const user = userEvent.setup();
  render(<CarritoResumen />);
  const cantidad = screen.getByRole('spinbutton', { name: /cantidad/i });
  await user.clear(cantidad);
  await user.type(cantidad, '3');
  expect(screen.getByText(/total/i)).toHaveTextContent('[COMPLETAR: total esperado]');
});

it('deshabilita Pagar y muestra un error si la API falla', async () => {
  server.use(http.post('/api/pago', async () => { await delay(100); return new HttpResponse(null, { status: 500 }); }));
  const user = userEvent.setup();
  render(<CarritoResumen />);
  const pagar = screen.getByRole('button', { name: /pagar/i });
  await user.click(pagar);
  expect(pagar).toBeDisabled();
  expect(await screen.findByRole('alert')).toBeInTheDocument();
});

Datos clave

Categoría

Programación y desarrollo · React

Tipo de resultado

Código

Nivel

Intermedio

Pensado para

ChatGPT, Claude, Gemini y Microsoft Copilot

Verificado en

Pendiente de verificación editorial

Variables

Código del componente, Comportamiento a cubrir, Herramientas y Llamadas de red

Idioma

Español

Precio

Gratis, sin registro

Actualizado

07/11/2026

Preguntas frecuentes