Pruebas de Error 500 en Endpoints con Mock Service Worker

Contenido del curso

Fundamentos del Testing en React

Estrategias de Testing en React

Testing de Flujos de Usuario en React

Testing de Hooks en React

Pruebas de Integración y APIs en React

Reflexiones sobre Testing en React

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:18

Pruebas de Error 500 en Endpoints con Mock Service Worker

Curso de React Testing Library

Clase 17 de 20

Clase 17 / 20

Recursos

Configurar pruebas para los caminos felices de tu aplicación es solo la mitad del trabajo. Validar cómo responde tu código ante un error 500 es igual de importante, y con Mock Service Worker (MSW) puedes simularlo de forma clara y controlada sin depender de un backend real.

¿Cómo se configura un caso de prueba para un error 500?

A diferencia del caso exitoso, donde los handlers ya tienen definida la respuesta por defecto, para simular un error necesitas sobreescribir temporalmente la ruta dentro del propio test. Esto se logra con server.use() [0:43].

El flujo es el siguiente:

Importas http y HttpResponse desde msw.
Importas el server desde tu configuración de mocks.
Dentro del test, llamas a server.use() para registrar un nuevo handler que reemplaza al existente.

javascript import { http, HttpResponse } from 'msw'; import { server } from './mocks/server';

it('debe obtener un error', async () => { server.use( http.get('https://tu-api.com/orders', () => { return new HttpResponse(null, { status: 500, statusText: 'Internal Server Error', }); }) ); });

La diferencia clave respecto al handler exitoso es que aquí no retornas data, solo indicas el status code 500 y el statusText correspondiente [1:15].

¿Cómo se valida el mensaje de error en el hook?

Una vez configurado el servidor para devolver el error, renderizas el hook con renderHook y esperas a que se actualice el estado con waitForNextUpdate [1:38].

javascript const { result, waitForNextUpdate } = renderHook(() => useOrders(), { wrapper: Wrapper, });

await waitForNextUpdate();

const error = result.current.error; expect(error).toBe('failed to fetch orders, please try again');

El mensaje que validas debe coincidir exactamente con el que defines en el bloque catch de tu hook useOrders. Si cambias ese texto, el test falla de inmediato, lo que demuestra que la aserción realmente está funcionando [2:10].

¿Por qué es importante probar el camino del error?

El status code 500 representa un error interno del servidor. Verificar que tu aplicación lo maneja correctamente te da confianza en que:

El usuario recibe un mensaje claro en lugar de un fallo silencioso.
El bloque catch de tu lógica de fetching está funcionando.
No hay comportamientos inesperados cuando el backend falla.

¿Qué es server.use y cuándo se necesita?

server.use() permite sobreescribir handlers en tiempo de ejecución dentro de un test específico. Los handlers originales siguen disponibles para los demás tests. Esto es fundamental cuando necesitas simular escenarios distintos al flujo principal sin modificar la configuración global de MSW [0:43].

¿Qué sigue después de cubrir ambos flujos?

Con el caso exitoso y el caso de error cubiertos, ya tienes pruebas para la parte positiva y negativa del flujo. El siguiente paso natural es ejecutar coverage sobre tu proyecto para medir qué porcentaje de tu código está respaldado por tests. Eso te permite identificar áreas sin cobertura y tomar decisiones sobre dónde enfocar el esfuerzo de testing.

Si quieres mejorar la organización de estos tests, un buen ejercicio es extraer la lógica de renderHook con su wrapper a una función reutilizable, evitando repetición entre casos de prueba. ¿Ya lo intentaste? Comparte cómo te fue.

import { http, HttpResponse } from 'msw';
import { server } from './mocks/server';

// Forzamos el error 500 solo para este test
server.use(
  http.get('http://example.com/orders', () => {
    return new HttpResponse(null, {
      status: 500,
      statusText: 'Internal Server Error',
    });
  })
);

const { result } = renderHook(() => useOrders());

// Esperamos a que el hook procese el error del server
await waitFor(() => expect(result.current.error).not.toBeNull());

expect(result.current.error).toBe('Failed to fetch orders. Sorry, please try again.');

import { http, HttpResponse } from 'msw';
import { server } from './mocks/server';

// Forzamos el error 500 solo para este test
server.use(
  http.get('http://example.com/orders', () => {
    return new HttpResponse(null, {
      status: 500,
      statusText: 'Internal Server Error',
    });
  })
);

const { result } = renderHook(() => useOrders());

// Esperamos a que el hook procese el error del server
await waitFor(() => expect(result.current.error).not.toBeNull());

expect(result.current.error).toBe('Failed to fetch orders. Sorry, please try again.');

Fundamentos del Testing en React

Por qué el testing salva tu app en producción

Testing de Aplicaciones con Vitest y React

Estructura y Creación de Tests en JavaScript con Vitest

Estrategias de Testing en React

Pruebas de Componentes en React con Testing Library

Table-driven testing con it.each en React

Metodología TDD: red, green y refactor

Uso de Mocks en Testing de Software

Testing de Flujos de Usuario en React

Pruebas de Error en Login con React y Vitest

Pruebas de Login Exitoso en Aplicación Web

Mockear getOrders y probar el dashboard

Testing componentes para superadmins con getByTestId

Testing de Hooks en React

Principios SOLID para código limpio y mantenible en desarrollo software

Testeo de Custom Hooks con Testing Library React Hooks

Cómo vi.spyOn detecta errores reales

Pruebas de Integración y APIs en React

Configura Mock Service Worker en tu proyecto

Pruebas de React con Mock Service Worker y Hooks

Pruebas de Error 500 en Endpoints con Mock Service Worker

Reflexiones sobre Testing en React

IA para generar tests en React con ChatGPT

Cobertura de Código: Tipos y Configuración en Vitest

Cuándo no escribir tests en React

Pruebas de Error 500 en Endpoints con Mock Service Worker

Progreso del curso

Fundamentos del Testing en React

Estrategias de Testing en React

Testing de Flujos de Usuario en React

Testing de Hooks en React

Pruebas de Integración y APIs en React

Reflexiones sobre Testing en React

Recursos

Recursos