Descubre cómo replicar la sección de creación de cuentas de Twitch con React, Jest y React Testing Library
Antes de comenzar, te preguntarás ¿por qué yo como desarrollador frontend necesitaría realizar pruebas en mis componentes? ¿Acaso las pruebas no son solo para backend?
Resulta que como desarrolladores frontend, somos los encargados de implementar la comunicación entre la aplicación y el usuario final. Por lo tanto, debemos asegurar que esta comunicación se lleve acabo, si o si, ya que no importante que tan rápida cargue, que tan bonita sea, que tan rápido responda el backend, si no hace lo que debe hacer para el usuario, simplemente, no sirve.
Las pruebas automatizadas nos ayudan a asegurar que nuestros componentes funcionen correctamente y hagan lo que dicen hacer. De está forma, podemos asegurar que la comunicación entre el frontend y el backend se lleve de manera adecuada.
Para realizar estás pruebas existen diferentes herramientas, tales como Jest y React testing library que nos apoyan para ejecutar nuestras pruebas de forma más sencilla. En próximos publicaciones lo explicare. Por el momento, solo quiero que conozcamos los beneficios de las pruebas automatizadas sin entrar en temas muy técnicos.
Caso práctico
Lo primero que haremos será analizar el caso práctico que vamos a resolver, el análisis es un proceso que debemos ir fortaleciendo, ya que un buen análisis nos ayudará a escribir solo el código necesario y no más.
Cómo consejo, si después de analizar no te queda claro lo que vas a resolver, no comiences a escribir código, seguro tendrás que modificarlo o en el peor de los casos empezar de 0.
Teniendo claro la importancia de un buen análisis, demos inicio.
A simple vista parece un formulario bastante simple, vemos varios campos nombre de usuario, password, fecha de nacimiento y teléfono o correo electrónico. Sin embargo, a veces no sucede esto y el problema es más grande.
Subestimar las cosas puede traer varias consecuencias como: malas estimaciones en el sprint, stoppers para otros equipos, código con mala calidad, código sin pruebas automatizadas, etc.
Dicho esto, hagamos un análisis un poco más profundo del funcionamiento.
Después de analizar a fondo el formulario, nos hemos encontrado con varias reglas de negocio.
El nombre de usuario no se puede repetir
La contraseña debe de cumplir ciertas condiciones para estar ok
El correo electrónico debe tener un formato de correo valido
Es necesario un teléfono o correo electrónico, pero no ambos
El botón de registrar solo se habilita una vez que los campos nombre de usuario, password, fecha de nacimiento y teléfono o correo no son validos se hayan llenado
Teniendo esto en mente, ya podríamos comenzar a escribir nuestras primeras pruebas.
Para este ejemplo vamos a utilizar create react app, pero eres libre de utilizar tu herramienta favorita.
Creamos proyecto
npx create-react-app unsaltodelinea
Instalamos react testing library
cd unsaltodelinea
npm install --save-dev @testing-library/react @testing-library/dom
Iniciamos el proyecto
npm start
Esto nos lanzará una página por defecto, por el momento no le tomemos importancia, ya al final de la publicación veremos porque lo dejamos al último.
Para empezar a escribir nuestras primeras pruebas necesitamos crear un archivo .test
Lo que acabamos de agregar simplemente es un “bloque” que se encargará de agrupar las pruebas del componente CreateTwitchAccount.
Ahora bien, agreguemos nuestra primera prueba
1: describe('CreateTwitchAccount', () => {
2: it('crear cuenta correctamente', () => { // primera prueba
3:
4: });
5: });
Ahora bien, antes de implementar la solución definamos ¿qué es una cuenta correcta? Podemos deducir que una “cuenta correcta” es una cuenta que tiene los campos usuario, password, fecha y teléfono o correo electrónico. Dicho esto, implementemos la solución.
A simple vista puede ser complicado pero te aseguro que no es así. Expliquemos de forma general sin entrar en temas técnicos.
Línea 1. Importamos funciones auxiliares de apoyo para nuestros tests
Línea 5..7 Definimos los props que el componente necesita
Línea 9..11 Montamos el componente con sus props
Línea 13..16 Asignamos valores a los campos
Línea 18..23 Comprobamos que el prop createAccount es invocado con los parámetros correspondientes
Ejecutemos nuestra prueba y veamos que sucede
Y cómo era de esperarse la prueba ha fallado, el error nos dice que CreateTwitchAccount no esta definido por lo que hay que crearlo src/CreateTwitchAccount.js
Ooh no, otro error 😩 parece que no ha encontrado ningún elemento con la propiedad data-testid=“user” y esto es cierto, el componente CreateTwitchAccount que creamos esta regresando null.
¡¡Noooo!! Otro error :/ ¿y ahora que sucedió? Resulta que la prueba espera que el prop createAccount se llame pero no es así. Arreglemos esto y hagamos que nuestra prueba pase de una vez por todas.
Línea 4. Creamos un estado para almacenar los valores de los campos usuario, password, fecha de nacimiento y correo
Línea 6..9. Función para actualizar los valores de los campos
Línea 19..25. Campos usados por el usuario para colocar su información
Línea 11..15. Función que se ejecutara una vez que el formulario sea enviado
Crucemos los dedos y volvamos a ejecutar nuestra prueba
¡Yeah!! No más errores. Oye si, pero mmm, aun no me siento convencido de que las pruebas me ayuden a desarrollar más rápido, al contrario noto que me traería más problemas porque entre más código tengamos más mantenimiento.
Totalmente de acuerdo, sin embargo, te puedo asegurar que en aplicaciones donde existen una gran cantidad de componentes y servicios alrededor de tu aplicación el beneficio de tener pruebas es mayor.