Pruebas de Login Exitoso en Aplicación Web

Clase 9 de 20 • Curso de React Testing Library

Resumen

¿Cómo realizar pruebas de login exitoso?

Al crear aplicaciones, probar el flujo de autenticación es crucial para garantizar la seguridad y funcionalidad. En este caso, veremos cómo implementar un test para un login exitoso utilizando las herramientas adecuadas en un entorno React.

¿Qué necesitamos para un test de login exitoso?

Primero, debemos asegurarnos de que nuestro login nos redirige correctamente cuando usamos las credenciales correctas. En nuestra aplicación Platzi Orders, queremos que al realizar un login válido, se navegue hacia /orders.

Renderizado del Componente:

Uso de SessionProvider y MemoryRouter.
Creación de una función reutilizable llamada handleLogin para evitar código repetitivo.

const handleLogin = () => {
  return render(
    <MemoryRouter>
      <SessionProvider>
        <Login />
      </SessionProvider>
    </MemoryRouter>
  );
};

Estructura del Test:
- Creación del caso de prueba que redirige a /orders.
- Uso de mock para la promesa getAuth.
En el archivo de test, configuramos el mock y usamos el siguiente método:
```
mockGetAuth.mockResolvedValue({
  success: true,
});
```

Mocking de Navegación:

Mock del módulo de React Router DOM para simular la función navigate.

const mockNavigate = jest.fn();
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useNavigate: () => mockNavigate,
}));

Interacciones y Aserciones:
- Interacción con los elementos de entrada de texto para simular un login.
- Uso de waitFor para manejar operaciones asíncronas.
```
await waitFor(() => {
  expect(mockNavigate).toHaveBeenCalledWith('/orders');
});
```

¿Cómo asegurarse de que los tests están funcionando?

Es importante verificar que nuestras pruebas realmente están evaluando los escenarios esperados. Al cambiar los valores esperados en nuestras aserciones y ver que el test falla, podemos asegurarnos de que están correctamente configurados.

Verificar la navegación:
- Cambiar la ruta esperada en toHaveBeenCalledWith('/orders') a otra como '/incorrectRoute' debería forzar un fallo, demostrando que la prueba es efectiva.
Corregir errores:
- Revisión del código para corregir errores tipográficos y de sintaxis que podrían causar que las pruebas fallezcan por razones incorrectas.

¿Cómo incorporar nuevas funcionalidades al test?

Al desarrollar una aplicación, es posible integrar funcionalidades adicionales para mejorar la experiencia del usuario. Por ejemplo, en nuestro caso de uso, añadir una prueba para el botón Show en el formulario de login enriquecería nuestras pruebas.

Reto: Crea un nuevo caso de uso que verifique el botón Show que alterna la visibilidad de la contraseña. Esto te permitirá practicar la creación de escenarios más complejos y gestionar variabilidad en componentes de interfaz.

En resumen, realizar tests exhaustivos y bien configurados en nuestra aplicación asegura que todas las funcionalidades, incluida la autenticación, trabajen de manera correcta y segura. ¡Sigue aprendiendo y mejorando tus habilidades de testing!