El testing es una parte esencial del desarrollo de aplicaciones para asegurar que el código funcione correctamente y que los cambios no introduzcan errores. En React, existen varias herramientas y enfoques para probar los componentes, desde pruebas unitarias hasta pruebas de integración. En este capítulo, aprenderemos a realizar pruebas en componentes de React utilizando Jest y React Testing Library.

Herramientas para Testing en React

Jest

Jest es un framework de testing en JavaScript que se integra perfectamente con React. Jest permite realizar pruebas unitarias, pruebas de integración y tiene características avanzadas como mocks, temporizadores falsos y cobertura de código.

React Testing Library

React Testing Library es una librería que facilita la creación de pruebas para los componentes de React, enfocándose en la interacción del usuario en lugar de los detalles de la implementación. Es conocida por su simplicidad y enfoque en pruebas basadas en el comportamiento del usuario.

Configuración de Jest y React Testing Library

Si estás utilizando Create React App, Jest y React Testing Library ya están configurados. Si no, puedes instalarlos manualmente con el siguiente comando:

bash

Con esta configuración, puedes empezar a escribir pruebas para tus componentes de React.

Pruebas Unitarias en React

Las pruebas unitarias son las más simples y se centran en probar una parte específica de la aplicación, como un componente o una función.

Ejemplo de Prueba Unitaria

Supongamos que tenemos un componente simple llamado Greeting que muestra un mensaje de bienvenida:

jsx

Aquí tienes una prueba unitaria básica para el componente Greeting:

jsx

Esta prueba verifica si el componente Greeting renderiza correctamente el mensaje de bienvenida. Usamos screen.getByText para buscar el texto en el DOM y expect para verificar que esté presente.

Simulación de Eventos con React Testing Library

Además de verificar el contenido renderizado, también puedes simular eventos como clics o cambios en los inputs. Supongamos que tenemos un botón que incrementa un contador cuando se hace clic:

jsx

La prueba para este componente simulará un clic en el botón y verificará que el contador se haya incrementado:

jsx

Aquí, fireEvent.click simula el clic en el botón y verificamos que el texto del contador se actualice correctamente.

Pruebas de Componentes Asíncronos

En React, es común trabajar con datos asíncronos como solicitudes a una API. Para probar componentes que dependen de estos datos, puedes utilizar funciones como waitFor para manejar la naturaleza asíncrona de las pruebas.

Ejemplo de Prueba Asíncrona

Supongamos que tenemos un componente que muestra datos después de una solicitud asíncrona:

jsx

La prueba para este componente puede esperar a que los datos estén disponibles utilizando waitFor:

jsx

En esta prueba, verificamos que primero se muestre el mensaje de carga y luego usamos waitFor para esperar a que aparezcan los datos asíncronos.

Pruebas de Integración

Las pruebas de integración verifican cómo los diferentes componentes y funciones interactúan entre sí. Por ejemplo, podrías probar cómo un componente que maneja formularios interactúa con un componente de validación.

Ejemplo de Prueba de Integración

Supongamos que tenemos un formulario simple que muestra un mensaje cuando se envía correctamente:

jsx

Podemos escribir una prueba de integración para verificar que el formulario se envíe y que el mensaje de éxito aparezca:

jsx

Esta prueba verifica que el formulario se maneje correctamente y que el mensaje de éxito aparezca después de enviarlo.

Cobertura de Código con Jest

Jest también proporciona herramientas para generar reportes de cobertura de código, lo que te permite ver qué partes de tu aplicación están siendo probadas y cuáles no. Para generar un reporte de cobertura de código, simplemente ejecuta:

bash

Este comando ejecuta las pruebas y genera un reporte de cobertura en el directorio coverage, donde puedes ver qué archivos y funciones están completamente cubiertos por pruebas.

Conclusión

El testing en React es esencial para garantizar la calidad de tu aplicación. Con Jest y React Testing Library, puedes realizar pruebas unitarias, simular eventos, y manejar componentes asíncronos de manera sencilla.