Índice de contenido
- ¿Por que probar su código?
- ¿Cómo realizar las pruebas de la aplicación React?
- Conclusión
¿Por qué probar su código?
La implementación de pruebas para su aplicación React puede ofrecerle una gran variedad de ventajas, por ejemplo:
- En primer lugar, te hará destacar entre la multitud de desarrolladores promedio. La mayoría de los devs ni siquiera saben cómo implementar pruebas en su código, si aprendes a hacerlo, no sólo estarás satisfecho de seguir a los profesionales sino también a otros programadores, los empleadores te verán como un programador avanzado.
- Le ahorrará tiempo. Escribir buenas pruebas para componentes complejos puede hacer que depures un error antes, de modo que no tengas que estar horas y horas leyendo documentación y 'googleando' la solución.
- Las pruebas aumentarán definitivamente la calidad de su código. Para implementar las pruebas correctamente, es necesario dividir los componentes en partes más pequeñas que puedan ser probadas de manera más eficiente. Esto puede enseñar a todos los desarrolladores a escribir un código limpio y comprensible.
- Las pruebas bien escritas son una gran documentación para su aplicación. Un nuevo desarrollador puede revisar los archivos de pruebas y ver de qué parte del código es responsable.
- Las pruebas ayudan a desplegar una aplicación sin problemas. Si escribes e implementas pruebas para todo el tiempo de producción, será más fácil fusionar el código con otro colaborador sin horas o días de depuración.
¿Cómo realizar las pruebas de la aplicación React?
Asumiendo que hemos limpiado nuestra estructura de carpetas, podemos empezar a probar nuestro componente. A continuación se muestra el ejemplo de componente probado.
Para implementar nuestro código, se ha creado los archivos 'App.js' y 'todo.js'. El archivo App.js incluye allí una matriz de acciones 'todos', que se mapea a través de y utilizando la perforación prop, que se muestra en la jerarquía declarada.
Puedes verlo a continuación:
El archivo Todo.js tiene el siguiente aspecto:
Usando la perforación de prop, cada acción de la matriz todos (variable todo) se transfiere al div principal. Nos centraremos en ese 'data-testid' en el siguiente párrafo.
Nuestro objetivo es probar un componente "todo", que indica lo que hemos hecho o no. 'Todo.js' se encuentra en la carpeta 'components'. Además, hay una carpeta especial '__tests__', que contiene el archivo 'todo.tests.js', responsable de probar nuestro componente.
Bien, ahora podemos pasar a la parte fundamental de las pruebas.
En primer lugar, instalar las dependencias necesarias. En este caso, vamos a utilizar la biblioteca de pruebas de react que soporta todas las aplicaciones de react.
Vamos a la terminal una vez más y comenzar la prueba mediante la ejecución de un comando siguiente.
Lanzará pruebas en su terminal.
Ahora vamos al archivo 'todo.test.js'.
Este trozo de código, en primer lugar, importa nuestro componente y la biblioteca necesaria. Luego, después de cada prueba, limpia todo, usando las siguientes líneas de código:
La siguiente parte es responsable de la prueba adecuada. Comprobaremos si en nuestro componente hay un 'todo' con contenido de texto 'aprender javascript testing'.
Para realizar esto, necesitamos declarar 'const todo' (uno de los todos) que probamos, y luego renderizar nuestro componente probado '<Todo/>'. Para obtener el id de la prueba, es necesario nombrar el elemento html apropiado en el componente probado. Vamos al archivo 'todo.js'.
Puedes ver una nueva variable en nuestro elemento div. Puedes encontrar un 'data-testid' que es igual al id del registro todo. Después de cada guardado de una aplicación, en el terminal podemos ver la salida de las pruebas realizadas.
Para estas líneas de código la salida se ve así:
Si cambiamos nuestro contenido de texto probado, la prueba detectará un error inmediatamente. Vamos a hacerlo...
En el archivo 'todo.tests.js' la frase 'aprender a probar javaScript' será cambiada por 'leer un libro'.
El resultado se muestra a continuación.
Conclusión
Esta es la forma más sencilla de utilizar tests en react app. Sólo se ha realizado un test que comprueba el contenido del texto. La verdad es que los tests pueden comprobar prácticamente todos los aspectos de tu aplicación. Si aprendes javaScript, resérvate unos días para aprender a escribir tests sencillos y, definitivamente, ¡implántalo en cada proyecto!
Obten el codigo utilizado aqui
¡Gracias por llegar hasta aquí!