Pruebas de Componentes en React con Testing Library

¿Cómo realizar un test efectivo para un componente en React?

Realizar tests efectivos para tus componentes es crucial para asegurar la funcionalidad de tus aplicaciones.

Ejecutaremos tests para el componente Button en nuestra aplicación de Platzi Orders y analizaremos sus prop types.

Al realizar los tests, es esencial entender qué aspectos necesitamos verificar.

¿Cuáles son los prop types del componente Button?

Primero, desglosamos los prop types del componente Button:

• Label: el texto que se muestra en el botón.

• OnClick: la función que se ejecuta al hacer clic en el botón.

• Type: el tipo de botón, que está definido en los prop types.

Si estás comenzando con TypeScript, es recomendable revisar la sección de recursos que proporciona más información sobre interfaces o types.

¿Cómo configuramos el entorno de testing?

Para empezar, generamos un nuevo archivo Button.test.tsx.

Importamos desde Vitest las estructuras de describe, it y expect. Estas herramientas nos ayudarán a organizar y ejecutar los tests.

Creamos una agrupación con describe, nombramos el test como Button, y estructuramos nuestro primer caso: "Debería renderizar el botón".

import { describe, it, expect } from 'vitest';
import { describe, it, expect } from 'vitest';
import Button from './Button';

describe('Button', () => {
it('debería renderizar el botón', () => {
render(<*Button label="Clic" />);
const button = screen.getByText('Clic');
 expect(button).toBeInTheDocument();
});
});

¿Qué son los handlers de eventos y cómo se testean?

El siguiente paso es testear que la función onClick que estamos enviando sea llamada cuando se ejecute el handler onClick.

Patrón 'Arrange, Act, Assert'

Antes de entrar en los detalles del código, exploremos el patrón Arrange, Act, Assert. Esto equivale a preparar, actuar y confirmar:

1. Arrange: preparar el componente para el test.

2. Act: ejecutar la acción sobre el componente (en este caso, un clic).

3. Assert: verificar que el resultado sea el esperado.

Implementamos un test para la función onClick utilizando este patrón:

import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button', () => {
it('debería llamar a la función onClick', async () => {
  const handleClick = vi.fn();
render(<*Button label="Clic" onClick={handleClick} />);
const button = screen.getByText('Clic');
  fireEvent.click(button);

expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

¿Cómo gestionar errores comunes en el testing?

Es posible encontrarse con errores de sintaxis o de ejecución. Por ejemplo, si el botón no se renderiza porque falta la propiedad label, aparecerá un error que nos alertará. Asegúrate de corregirlo antes de continuar.

¿Por qué es importante una buena estructura en los tests?

Tener una estructura clara y concisa en los tests, utilizando patrones como Arrange, Act, Assert, ayuda enormemente a mejorar la organización y comprensión. Además, permite modificar y escalar los tests con más facilidad.

Al aplicar estos conceptos, tus tests serán más robustos y efectivos frente a los cambios o actualizaciones en el código.

Te invito a seguir explorando y aprendiendo nuevas técnicas en el mundo del testing para mejorar la calidad de tus aplicaciones. 🚀