Testeo de Órdenes en Dashboard con Vitest y React Testing Library

¿Cómo se organiza el testing para el dashboard de nuestra aplicación?

¡Bienvenido a una sesión donde exploraremos cómo asegurar la calidad de nuestra aplicación mediante tests en el dashboard, el núcleo donde se muestra toda la magia de los pedidos! Probar nuestras funcionalidades es crucial para ofrecer un producto robusto. En esta sesión, usaremos un entorno simulado que nos ayudará a validar que nuestras órdenes se muestran correctamente.

¿Cómo verificamos la visualización de pedidos en el dashboard?

Para empezar, asegúrate de tener tu entorno de pruebas correctamente configurado. El primer paso es familiarizarnos con el package.json, donde se detalla cómo corre nuestro backend simulado en el puerto 3001. Allí, un archivo db.json contiene un arreglo de órdenes que debemos simular, también conocido como "mocking".

Creación y estructura de los tests

1. Creación del archivo de test:
   • Dentro de src/containers/orders, creamos un archivo nuevo llamado orders.test.tsx.
2. Estructura básica del test:
   • Utilizamos el clásico patrón describe, it, y expect para organizar nuestros casos de prueba.
   • Importamos las funciones necesarias de vitest y testing-library/react como render y screen.

import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import Orders from './Orders';

// Nuestra suite de tests
describe('Componente Orders', () => {
  it('debería mostrar las órdenes', () => {
    // Lógica del test se implementará aquí
  });
});

¿Cómo realizamos el 'mocking' necesario para los componentes?

Importación y configuración inicial:

• Importamos el componente Orders y otras funciones relevantes para las pruebas.
• Implementamos MemoryRouter y SessionProvider para simular la estructura de nuestra aplicación.

Configuración adicional:

• Creamos una función llamada handleRenderOrders que usará render para montar nuestro componente.
• Importamos vi para crear los mocks de funciones necesarias como getOrders.

const handleRenderOrders = () => {
  render(
    <MemoryRouter>
      <SessionProvider>
        <Orders />
      </SessionProvider>
    </MemoryRouter>
  );
};

¿Cómo logramos un 'mocking' efectivo para los datos?

Para testear de manera efectiva, necesitamos asegurar que se están utilizando los datos correctos en cada prueba.

1. Mock de los datos de órdenes (mock orders):
   • Creamos una constante mockOrders y le asignamos un array de órdenes simulado.

const mockOrders = [
  {
    id: 1,
    product: 'Producto de ejemplo',
    quantity: 2,
  },
];

2. Mock de las funciones de sesión:
   • Mockeamos la función useSession para simular que un usuario ya ha iniciado sesión.

vi.mock('path/to/auth/context', () => ({
  ...jest.requireActual('path/to/auth/context'),
  useSession: jest.fn().mockReturnValue({
    user: { role: 'Visualizer' },
  }),
}));

¿Cómo realizamos la validación de renderizado?

Con toda la estructura y los mocks listos, es momento de comprobar que todo esté funcionando correctamente.

• Validación de que se renderizan las órdenes: Utilizamos getAllByRole para obtener todas las órdenes en el componente, asegurándonos de que su longitud coincida con la de mockOrders.

const orders = screen.getAllByRole('heading', { level: 3 });
expect(orders).toHaveLength(mockOrders.length);

¡Y ahí lo tienes! Has dominado la habilidad de realizar tests efectivos en un entorno simulado, garantizando que las órdenes en nuestro dashboard se muestren como deberían. Este conocimiento es esencial para mantener la integridad de la aplicación a medida que evoluciona. ¡Sigue practicando y verás cómo tu destreza en testing se afianza cada vez más!