Pruebas de Componentes React con JEST y Testing Library

¿Cómo simular errores en el login con pruebas unitarias?

La pantalla de login es crucial en cualquier sistema, ya que es la entrada principal para los usuarios. En esta guía, nos centraremos en cómo simular errores de inicio de sesión usando pruebas unitarias para un componente de React, siguiendo un enfoque práctico y utilizando Vitest como framework.

¿Cómo configurar el entorno de prueba?

Primero, asegúrate de tener un archivo de prueba en el mismo directorio que tu componente login. Aquí, se importan las funciones necesarias desde Vitest:

import { describe, it, expect } from "vitest";

Define la suite de pruebas para el componente de login. Será fundamental para asegurar que el componente se comporta como se espera en diversas situaciones.

¿Cómo renderizar el componente con sus dependencias?

Para renderizar el componente login, necesitamos importar la función de render desde la biblioteca de testing de React:

import { render } from "@testing-library/react";

Al importar el componente login, es vital encapsularlo con los proveedores necesarios para el contexto de pruebas. Aquí, se utiliza MemoryRouter para simular el enrutador de React:

import { MemoryRouter } from 'react-router-dom';
import Login from './Login'; // Asegúrate de que la ruta es correcta

render(
  <MemoryRouter>
    <Login />
  </MemoryRouter>
);

¿Cómo gestionar las dependencias del componente?

El componente login utiliza useNavigate y se depende de un SessionProvider. Para simular estas dependencias, debemos configurarlas adecuadamente:

1. Simular useNavigate: Utilizamos MemoryRouter en lugar de BrowserRouter para el entorno de pruebas.

2. Proveer el SessionProvider: Importamos el SessionProvider de nuestro contexto y lo añadimos al render:

import { SessionProvider } from '../context/AuthContext';

render(
  <MemoryRouter>
    <SessionProvider>
      <Login />
    </SessionProvider>
  </MemoryRouter>
);

¿Cómo simular la función de autenticación fallida?

Usamos vi y mock de Vitest para simular el módulo y la función getAuth, que autentica al usuario:

import { vi } from "vitest";
import getAuth from '../services/getAuth'; // Ruta de ejemplo

vi.mock('../services/getAuth', () => ({
  default: vi.fn(() => Promise.reject(new Error("Invalid credentials")))
}));

¿Cómo realizar interacciones en el componente?

Simula la interacción del usuario introduciendo credenciales incorrectas y verificando que el mensaje de error aparezca:

1. Obtén los inputs y el botón:

const usernameInput = screen.getByPlaceholderText('Username');
const passwordInput = screen.getByPlaceholderText('Password');
const loginButton = screen.getByRole('button', { name: /login/i });

2. Genera los eventos de usuario:

await fireEvent.change(usernameInput, { target: { value: 'wronguser' } });
await fireEvent.change(passwordInput, { target: { value: 'wrongpass' } });
await fireEvent.click(loginButton);

¿Cómo verificar el mensaje de error?

Finalmente, comprueba que el mensaje de error se muestra adecuadamente:

const errorMessage = screen.getByText(/invalid credentials/i);
expect(errorMessage).toBeInTheDocument();

Con estas configuraciones, al ejecutar yarn test, podrás ver que el test pasa correctamente, indicando que el mensaje de error se muestra cuando las credenciales no son válidas.

Este enfoque no solo garantiza que tu componente de login maneje correctamente las situaciones de error, sino que también asegura un desarrollo más confiable y robusto. ¡Sigue adelante y no pares de aprender!