Herramientas de prueba y depuración de JavaScript

Piensa dos veces, corta una vez.

Un paradigma que ha guiado a los ingenieros y desarrolladores de software a lo largo de los años. Planear y pensar las cosas antes de comenzar a codificar ayuda a que el desarrollo sea mucho más fácil y ayuda a desarrollar software más preciso al final del proceso de construcción.

Sin embargo, no todo se soluciona, ya que algunos errores aún pasan por el firewall. Llegar a corregir los errores después del desarrollo es mucho más difícil, es por eso que he decidido escribir un artículo para abordar este tema.

Existen muchas herramientas para facilitar el desarrollo, aumentar la productividad y aumentar la robustez de nuestro software. Pero vamos a echar un vistazo a un par de herramientas de prueba y depuración. Cada uno de ellos es muy poderoso en sus derechos cuando está acostumbrado a sus puntos fuertes.

Las herramientas incluyen:

  • Broma
  • Moca
  • Cypress.io
  • Herramientas de desarrollo de Chrome
  • Herramientas Redux Dev

Echemos un vistazo a estas hermosas herramientas de prueba y depuración.

Broma

Versión 22.4.1 / 16 883 GitHub ? / 2 Dependencias

Jest es una herramienta de prueba popular mantenida por Facebook y utilizada principalmente en las pruebas de las aplicaciones de React.

Es un marco muy simple y fácil de usar, ya que todo lo hace para verificar y probar los archivos necesarios y muestra los resultados de la prueba.

Al igual que con casi todo lo que maneja Facebook, Jest viene con toneladas de características para facilitar las pruebas a todos los desarrolladores.

Jest admite pruebas asincrónicas, lo que significa que se puede hacer más en menos tiempo ya que las pruebas se ejecutan como procesos paralelos.

Jest también permite la burla de los objetos en los archivos de prueba con funciones tales como función y temporizador.

También puede realizar pruebas instantáneas al trabajar con las aplicaciones Jest on React, para que pueda conocer fácilmente el cambio que causó una falla.

Esas son algunas de las características encantadoras de este increíble marco. Otros incluyen soporte de cobertura de código, capacidad de integrarse completamente con otras bibliotecas, aislamiento de prueba y mucho más.

Jest se instala y configura fácilmente gracias a la herramienta npm:

Puede instalar localmente usando:

 npm install --save-dev jest 

También puede instalarlo globalmente usando:

 npm install -g jest 

Para obtener más información acerca de este marco mantenido por Facebook, consulte amablemente el repositorio de github .

Moca

Versión 5.1.0 / 15 138 GitHub ? / 11 Dependencias

Aquí hay otro marco popular para llevar a cabo pruebas unitarias y de integración. Mocha es un marco de prueba dependiente de Node.js con muchas características increíbles.

Mocha es ligero y fácil de usar.

Con características tales como soporte de navegador, soporte de cobertura de prueba, pruebas asincrónicas, soporte de tiempo de espera y muchas otras características. Mocha se ha convertido en la elección de muchos desarrolladores, considerando el hecho de que es liviano y no exige demasiado recursos informáticos.

Instalar Mocha es bastante simple con npm.

Una instalación local se puede hacer con:

 npm install --save-dev mocha 

También se puede hacer de forma global con:

 npm install --global mocha 

Para saber más sobre Mocha, puedes visitar la página de Github .

Cypress.io

Versión 2.1.0 / 4 735 GitHub ? / 38 Dependencias

¿Eres un desarrollador front-end o tienes a alguien a tu alrededor? Llámalos. Cypress.io es una poderosa herramienta de prueba de código abierto que ayuda y mejora el proceso de desarrollo web.

Cypress.io es una de las herramientas más sencillas de usar que puedas encontrar, todo es muy fácil de hacer, incluida la configuración de pruebas, redacción de pruebas, ejecución de pruebas y depuración de pruebas.

Con Cypress.io puede escribir todo tipo de pruebas desde pruebas de extremo a extremo hasta pruebas de integración y pruebas unitarias, debido a esta funcionalidad ha ganado la comparación con Selenium por probadores de control de calidad. Sin embargo, los desarrolladores que hayan usado ambos admitirían que Cypress.io es mucho más funcional.

Cypress.io viene con sorprendentes características tales como pruebas instantáneas a las que se refieren como "Time Travel", la característica de espera automática, capacidad de controlar el comportamiento de las funciones y respuestas del servidor e integra eficazmente con herramientas de depuración como Chrome DevTools que se verían más adelante en este artículo.

También puede instalar Cypress.io usando el comando npm.

Una instalación local se puede hacer con:

 npm install cypress --save-dev 

Cypress.io es muy fácil de usar y está debidamente documentado también. Para saber más sobre este maravilloso marco, consulte su documentación .

DevTools de Chrome

Versión 1.0.548690 / 693 GitHub ? / 0 Dependencias

Google está listo para facilitar la vida de los desarrolladores de software, y eso está claro para que todos lo vean.

Google Chrome DevTools es un conjunto de depuración, creación web y herramientas de creación de perfiles que se pueden utilizar para depurar código JavaScript directamente desde el navegador Chrome, ya que están incorporados. Puede interactuar con HTML, CSS y JavaScript todo desde el navegador simplemente haciendo clic en el botón inspeccionar elemento.

Las DevTools de Chrome vienen con diferentes paneles:

  • El panel de línea de tiempo para mejorar el rendimiento de representación de las páginas web.
  • El panel de perfiles para un mejor rendimiento de JavaScript y CSS.
  • El panel de recursos para inspeccionar el almacenamiento de páginas web como la base de datos HTML5, cookies, almacenamiento local, etc.

Aparte de esto, DevTools viene con habilidades para hacer cambios rápidos de archivos, buscar dentro del código fuente, seleccionar elementos JavaScript en el código, cambiar el modo del dispositivo (para que pueda verificar cómo se vería una página web en dispositivos móviles sin tener que cambiar de dispositivo) elige colores para obtener sus códigos hexadecimales y mucho más.

Es posible que haya usado Chrome todos estos años sin saber que tiene una herramienta de depuración con tanto poder.

Hay muchos tutoriales sobre cómo aprovechar Chrome DevTools en Internet, ya que puede hacer mucho con esta herramienta para aumentar la productividad.

Redux DevTools

Versión 3.4.1 / 39 897 GitHub ? / 3 Dependencias

Aquí hay otra herramienta tan poderosa como las DevTools de Chrome, sin embargo, esto se usa para depurar solo las aplicaciones de Redux.

Redux DevTools es ideal para depurar código en su estado de aplicación, es muy fácil de usar e instalar con una interfaz de usuario muy hermosa que se puede personalizar a su gusto.

Incluye características que le permiten inspeccionar cada carga útil, versiones de snapshotting de su código, lo que significa que puede restaurar versiones anteriores de código, también puede continuar sesiones de depuración cuando se recarga una página web.

Puede integrar Redux DevTools en su proyecto simplemente clonando el proyecto:

 git clone https://github.com/gaearon/redux-devtools.git cd 
redux-devtools

Luego puede ejecutar lo siguiente en la carpeta raíz:

 npm install 

Finalmente puede pasar a la carpeta de su aplicación y luego ejecutar nuevamente el comando npm install .

Luego puede ejecutar el servidor de desarrollo:

 npm start 
open http://localhost:3000

Si no desea pasar por los "problemas" de la instalación de la herramienta, puede hacer uso fácilmente de la extensión del navegador.

Puede consultar la página de github para obtener más información sobre esta herramienta, también existe una extensión para usar en los navegadores .

CONCLUSIÓN

Todas las herramientas de prueba y depuración de JavaScript que se analizan en este artículo tienen su punto más fuerte y más débil.

En la medida en que las herramientas de prueba se puedan usar para probar cualquier tipo de código JavaScript, debemos tomar las siguientes notas:

  • Jest es lo mejor para probar las aplicaciones de React.
  • Mocha es mejor para probar aplicaciones de nodo.
  • Cypress es mejor para probar código de front-end.

Por otro lado, discutimos una herramienta de depuración general y luego una herramienta especializada.

Si bien Google Chrome DevTools es muy bueno para depurar código de front-end y puede integrarse fácilmente con herramientas de prueba como Cypress, Redux DevTools se usa específicamente para depurar aplicaciones de Redux y también tiene una extensión de navegador, y se puede usar en navegadores como Chrome. y Mozilla Firefox.

Escrito por Anton Shaleynikov

Texto original en inglés.