Por: Bastian Pérez, Fullstack Developer en Apiux Tecnología
Cuando no está montando en bici o jugando World of Warcraft, se dedica a aprender cosas que le apasionan en YouTube. Es Ingeniero Informático del Duoc UC y miembro de nuestra software factory, Apiux Labs. 

 

¡Bienvenido de nuevo a Apiux Devs! Después de una pausa de fin de año, preparamos una nueva entrega para aprender sobre el testing de aplicaciones en React. 

 

Empecemos por algunos conceptos básicos. Como todas las aplicaciones, las construidas en React deben ser probadas para verificar casos de uso y evitar que las condiciones de borde boten nuestra aplicación.

 

En React existen un par de herramientas que nos sirven para realizar estas pruebas: Jest y Enzyme

 

Ambas son herramientas que nos ayudan a hacer testing en nuestros componentes y aplicaciones de manera muy simple.

 

Tanto Jest como Enzyme están diseñados para probar aplicaciones React, sin embargo, Jest se puede usar con cualquier otra aplicación JavaScript, mientras que Enzyme solo funciona con React.

 

Jest se puede usar sin Enzyme para renderizar componentes y probar con instantáneas (más adelante veremos un ejemplo). Por su parte, Enzyme simplemente agrega una funcionalidad adicional. 

 

Enzyme puede usarse sin Jest, sin embargo, Enzyme debe combinarse con otro corredor de prueba si no se usa Jest.

 

Estas dos herramientas se usan con la librería React Testing Library. Cuando creamos una aplicación con el CLI “create-react-app”, por defecto se genera con Jest y testing-library. Con el siguiente comando podrás crear un proyecto desde cero con estas dos librerías:

 

C:\Users\bastian\Desktop\contador>npx create-react-app contador

 

Si quieres trabajar con Enzyme, debes instalarlo en tu proyecto con el siguiente comando:

 

C:\Users\bastian\Desktop\contador>npm i enzyme

 

Manos a la obra: Testing de aplicaciones en React

 

Antes de ver diferentes tipos de testing, haré una introducción a la aplicación que vamos a testear. Se trata de un contador con tres botones: uno para sumar, otro para restar y uno para resetear. 

 

 

A continuación verás el código de nuestro “CounterApp”, como decidí llamar a la app que nos servirá de ejemplo de ahora en adelante:

 

 

Te puede interesar: Guía para entender la Arquitectura de Aplicaciones

 

Ya que vimos cómo crear un proyecto desde cero en las librerías mencionadas, revisemos los tres tipos de testing de aplicaciones en React.

 

1. Testing por unidad

 

Es uno de los métodos más antiguos de testing y sigue siendo muy popular. Como su nombre sugiere, consiste en evaluar piezas individuales de código para verificar que funcionan correctamente. 

 

Veamos cómo se ve el testing en el código:

Código Header – Jest

 

La diferencia entre las dos son algunos métodos que cambian, librerías separadas, funciones que hacen lo mismo pero se escriben de forma diferentes. 

 

Se complementan una a la otra y lo ideal es usar las dos porque esto hace el trabajo más fácil. 

Testing unitario con Jest

• it(): Se usa para indicar lo que debe realizar nuestro test.
• La función render() es para renderizar nuestro componente.
• toHaveTextContent(): se usa para comparar texto, en este caso el «Título».
• expect(): Lo que espera para hacer la comparación.
• component.debug(): Se utiliza para ver un debug en nuestra consola.

 

Testing unitario con Enzyme

•  shallow(): Al igual que render() de Jest, se usa para hacer una a renderización virtual de nuestro componente.
• Al igual que Jest, Enzyme tiene su propia forma de comparar texto con toBe().
• console.log(wrapper.debug()): Se utiliza para ver un debug en nuestra consola.

 

2. Testing funcional

 

Este tipo de testing se realiza desde el punto de vista del usuario. Una pieza de funcionalidad por lo general involucra más de un componente.

 

Como podemos ver, las herramientas hacen lo mismo aunque el código sea diferente. 

 

Testing funcional – Enzyme

Testing funcional – Jest

Tanto en Enzyme como en Jest se pueden hacer los mismos tests, pero escribiéndolos de forma diferente. Un ejemplo se ve al momento de hacer clic a un botón.

 

En Enzyme se busca el button para luego simular el clic con la función simulate(). Mientras que en Jest se usa un función llamada fireEvent, la cual simula el evento de clic en un botón. 

 

Te puede interesar: Claves para implementar con éxito la Arquitectura de microservicios

 

 

3. Testing de integración

 

Intenta replicar la experiencia completa del usuario mediante la ejecución de pruebas en un buscador. 

 

Este camino es considerablemente más lento que el testing funcional y por unidad, ya que cada prueba se debe ejecutar en un buscador en tiempo real.  

 

Puede ser un formulario completamente desarrollado o una página entera.

Código general del proyecto

• describe(): Se usa para agrupar un conjunto de pruebas, dando así lugar al test de integración.
• beforeEach: Renderiza nuestro contador, pero antes de cada prueba lo resetea quedando es su estado inicial. 

 

Test de integración

 

 Snapshot

• renderer.create(): Se utiliza para para crear un renderizado del componente y luego con .toJSON() transformamos a json.
• toMatchSnapshot(): Es el método que se encarga de verificar nuestra última snapshot, con la que se crea al momento de ejecutar el código

 

Las snapshot se usan generalmente para verificar que no existan cambios no deseados en el componente, por ejemplo, cuando se agrega un caracter sin querer.

 

Antes de irte… Mira una buena práctica

 

Es recomendable que nuestras carpetas de testing imiten el árbol de archivo de nuestro proyecto, como se ve a continuación:

Orden de las carpetas

Otra forma sería dejando cada archivo de testing en el mismo directorio del componente que se está probando. 

 

Hasta aquí nuestro blog, esperamos que hayas aprendido. Si quieres ver más capacitaciones técnicas, te invitamos a visitar nuestro canal de YouTube y suscribirte para no perderte nuestros contenidos audiovisuales.