Testing con Spies en React: Verificación de Funciones y Errores

¿Qué son los Spies en el testing?

En el fascinante mundo del desarrollo de software, garantizar que nuestro código funcione adecuadamente es esencial. Aquí entra en juego el uso de Spies, una herramienta poderosa que actúa como un detective silencioso, observando y registrando cada movimiento en tu código. Los Spies no solo verifican cuántas veces se llama a una función, sino que también capturan los argumentos, mantienen el comportamiento original o lo simulan si es necesario.

¿Cómo configurar un test utilizando Spies?

Configurar un test con Spies es un arte que implica pasos precisos para asegurar que todas las funcionalidades de tu código estén en orden.

1. Crear el archivo de test: Comienza por crear un archivo de test específico, por ejemplo, useOrdersSpy.test.tsx.

2. Importar librerías necesarias: Necesitarás importar vitest, describe, it, expect, y renderHook entre otras bibliotecas relacionadas.

3. Importar módulos y funciones: Es crucial importar todos los módulos y funciones que se requieren para simular el comportamiento, incluyendo el contexto de autenticación y otros servicios.

import * as authContext from 'auth-context';
import * as orderService from 'services/getOrders';

4. Configuración de Mocks y Spies: Utiliza herramientas como vi de vitest para crear mocks necesarios y asignar Spies a las funciones que desees observar.

const useSessionSpy = vi.spyOn(authContext, 'useSession');
const getOrdersSpy = vi.spyOn(orderService, 'getOrders');

5. Inicialización automática con beforeEach: Emplea beforeEach para asegurarte de que cada test comienza con un entorno limpio.

beforeEach(() => {
    vi.clearAllMocks();
});

¿Cómo realizar aserciones con Spies?

Las aserciones permiten verificar que tu código cumple con las expectativas, basándose en los resultados esperados.

• Verificar llamadas de función: Asegúrate de que las funciones se llamen el número correcto de veces.

expect(getOrdersSpy).toHaveBeenCalledTimes(1);

• Comprobar valores de retorno: Cuando simulas comportamientos asíncronos, verifica que los valores de retorno sean los previstos.

expect(result.current.error).toBeNull();

¿Cuáles son las buenas prácticas con Spies?

Cuando trabajas con Spies, la organización y la atención al detalle son cruciales.

• Organización de imports: Importa primero las dependencias externas y luego las del proyecto.

• Uso de afterEach: Implementa afterEach para limpiar y restaurar Spies después de cada test.

afterEach(() => {
    vi.restoreAllMocks();
});

• Simulación de errores: Prueba los escenarios de error para garantizar que tu aplicación maneje adecuadamente las excepciones.

getOrdersSpy.mockRejectedValue(new Error('API Error'));

¿Por qué usar Spies en lugar de Mocks?

Aunque en esencia los Spies son Mocks, ofrecen una capa de verificación adicional que asegura que tu código no solo simula comportamientos, sino que verifica la exactitud de las funciones reales. Esto es invaluable cuando buscas garantizar que los flujos complejos de tu aplicación estén funcionando como deberían sin modificar el código fuente. Su capacidad para estar "al acecho" asegura una fiabilidad superior en tus procesos de testing.

Recuerda, los Spies son tus ojos invisibles en el código; siempre atentos y siempre verificando que tu aplicación se mantenga en el camino correcto. ¡Continúa explorando y perfeccionando tus habilidades en testing!