Pruebas de React con Mock Service Worker y Hooks

¿Cómo configurar Mock Service Worker para pruebas en un proyecto?

La utilización adecuada de Mock Service Worker (MSW) es esencial para simular y gestionar solicitudes HTTP en un entorno de pruebas. Si ya tienes configurado MSW en tu proyecto, es momento de crear diferentes casos de prueba en un entorno simulado. Sin embargo, esta vez no se trata solo de utilizar Mocks o Spies, sino de aprovechar el servidor que ofrece MSW. Aquí te mostramos cómo estructurar tus pruebas correctamente.

¿Cómo integrar Mock Service Worker con un hook específico?

Primero, asegúrate de haber creado un archivo de prueba específico para almacenar tus tests. Por ejemplo, puedes nombrar tu archivo useOrders.sw.test.tsx. Recuerda que la creación de múltiples archivos de prueba es con fines educativos y no necesitas llenar tu proyecto con un archivo de test por cada Hook.

Inicia importando las herramientas necesarias para tus pruebas. Aquí te muestro un ejemplo de cómo hacerlo:

import { describe, it, expect, beforeEach, Mock } from "vitest";
import { renderHook } from '@testing-library/react-hooks';
import { MemoryRouter } from "react-router-dom";
import { SessionProvider, useSession } from "./path-to-context/auth-context";

Es importante mencionar que aunque utilizamos MSW, para el hook useOrders es necesario autenticar para su funcionamiento. Aquí usaremos un Mock de sesión:

vi.mock("./path-to-context/auth-context", async () => {
  const actualContext = await vi.importActual<typeof import("./path-to-context/auth-context")>("./path-to-context/auth-context");
  return {
    ...actualContext,
    useSession: vi.fn(() => ({ user: { id: 1, name: 'Wilmer Garzón' } })),
  };
});

¿Cómo estructurar tus pruebas usando wrappers?

En tus pruebas, encierra el Hook dentro de proveedores de sesión y rutas usando un wrapper. Esto simula un entorno más cercano al real, mejorando así la calidad de los tests.

const wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <SessionProvider>
    <MemoryRouter>
      {children}
    </MemoryRouter>
  </SessionProvider>
);

¿Cómo diseñar casos de prueba con Mock Service Worker?

Puedes diseñar casos de prueba para verificar varias situaciones como la carga inicial de datos y las respuestas del servidor:

1. Carga inicial de datos: Asegúrate de que el estado loading sea inicialmente true.

   const { result, waitForNextUpdate } = renderHook(() => useOrders(), { wrapper });
   expect(result.current.loading).toBe(true);
   

2. Verificación de respuesta del servidor: Usa MSW para validar que se realicen correctamente las solicitudes al servidor sin necesidad de mocks adicionales para las órdenes.

   await waitForNextUpdate();
   const lengthOfOrders = result.current.orders.length;
   expect(lengthOfOrders).toBe(1); // Basado en el mock configurado para retornar un producto.
   

¿Cómo identificar y corregir errores comunes en pruebas?

Errores como timeout pueden surgir si los Mock no están configurados correctamente. Verifique que las funciones asíncronas sean gestionadas adecuadamente y que useSession u otros contextos devuelvan valores esperados y no promesas.

CONSEJO: Si enfrentas un error con tus tests, revisa la estructura de tus valores Mock y el tipo de datos que retornan. Asegúrate de que las funciones asíncronas y los manejadores del Mock Service Worker estén configurados para reflejar el entorno simulado adecuadamente.

¿Qué sigue después de configurar Mock Service Worker?

Una vez que hayas dominado la creación de pruebas con MSW, estarás listo para afrontar situaciones más complejas, como errores del servidor. ¡No te desanimes si encuentras desafíos en el camino! La práctica refuerza el aprendizaje y mejora la calidad de tu base de código.