8 útiles herramientas de prueba, bibliotecas y marcos para desarrolladores de React

Todos conocemos el amor de los desarrolladores por la biblioteca más popular, React . Es fácil de aprender y es fácil crear la interfaz de usuario de cualquier sitio web usando React. Si está creando una aplicación, sin importar qué, debe probar su aplicación antes de servirla al usuario.

If you are a frontend developer working on the React library, you might have some favorite tool or framework for testing your React application. A lot of developers use Jest, Enzyme, or some other popular tools and libraries to test the components of React application. However, every tool or framework is not the same for everyone. There are tons of testing frameworks and tools available in the open-source ecosystem for testing purpose of React application.

Ya sea que esté realizando pruebas unitarias, pruebas de integración o pruebas de extremo a extremo, elegir el conjunto de herramientas y el marco adecuados para las pruebas es el factor clave para aprovechar TDD en React. En este blog, hablemos sobre algunos marcos y bibliotecas de prueba de React populares que mucha gente usa en su trabajo diario.

1. broma

Jest es el marco de prueba más popular con más de 16 millones de descargas a la semana. Es creado y mantenido por Facebook . El equipo lo usa para probar todos los códigos JavaScript, incluidas las aplicaciones React. También lo adoptan Airbnb, Uber, Intuit y otros equipos. Jest viene con su corredor de prueba y funciones de aserción. Este marco también es bueno para los principiantes que quieren probar códigos JavaScript increíblemente rápidos.

• Rendimiento muy rápido. Airbnb vio una disminución en el tiempo de ejecución total de la prueba de 12 minutos a solo 4,5 minutos cuando cambiaron de Mocha a Jest.
• Realiza pruebas de instantáneas, paralelización y métodos asíncronos.
• Simule sus funciones, incluidas las bibliotecas node_module de terceros
• Es posible administrar pruebas con objetos más grandes utilizando instantáneas en vivo.
• Sintaxis estándar con guía de informes.
• Compatible con React, VueJS, Angular y muchos proyectos.

2. moca

Mocha es otro marco de prueba popular para los desarrolladores de Javascript. Proporciona soporte de navegador para programas NodeJS, pruebas asincrónicas, informes de cobertura de pruebas y el uso de cualquier biblioteca de notificaciones. Proporciona control total sobre cómo probar su código, con qué herramientas, mientras que puede conectar y desconectar la mayoría de las bibliotecas y herramientas de soporte en su string. Jest es el marco popular, pero tiene algunos problemas, como que la burla es confusa, por lo que Mocha es la opción alternativa en este caso.

• Se ejecuta en Node.js y brinda soporte para pruebas asíncronas de front-end y back-end
• Ayuda en el seguimiento de errores.
• La combinación de Mocha con Enzyme y Chai es popular para afirmaciones, burlas, etc. Enzyme + Mocha es una buena combinación para probar aplicaciones web escritas en ReactJS.

3. Chai

Chai es una biblioteca popular de afirmaciones y expectativas para Nodes y para el navegador que se puede combinar con cualquier marco de prueba de JavaScript. Una aserción es una forma de declarar qué esperar en una prueba. Mocha no viene con una biblioteca de aserciones incorporada, por lo que muchos desarrolladores eligen Chai con Mocha para probar la aplicación React. Algunas funciones como esperar, debería y afirmar lo ayudan a declarar qué esperar en una prueba. Se puede usar para hacer aserciones para funciones, pero también para componentes más adelante usando Enzyme.

4. jazmín

Jasmine es un gran marco de código abierto de BDD y un corredor de prueba para probar todo tipo de aplicaciones de JavaScript. Incluye tanto la prueba de visibilidad como la prueba de respuesta de la interfaz de usuario en varios dispositivos con diferentes resoluciones. A muchos desarrolladores que son usuarios de Angular CLI les encanta usar Jasmine para probar la aplicación. Los desarrolladores lo combinan principalmente con Babel y Enzyme para probar la aplicación React . Puede leer acerca de la biblioteca de utilidad auxiliar que está designada para probar la aplicación React. A continuación se muestra un lado profesional del marco de jazmín…

• No se requiere un modelo de objeto de documento (DOM) para Jasmine.
• Útil en las pruebas de front-end y back-end.
• Pruebas de funciones asíncronas.
• Peticiones burlonas.
• Aserción de verificación de igualdad personalizada.
• Aserción de comparación personalizada.
• Documentos sólidos y apoyo de la comunidad.

Tenga en cuenta que Jasmine no admite pruebas de instantáneas, herramientas de cobertura de código, paralelización (requiere herramientas de terceros) ni manipulación nativa de DOM (requiere una herramienta de terceros).

5. Enzima

Enzyme es una utilidad de prueba diseñada para ayudar a los desarrolladores a probar el componente React sin problemas. Enzyme es uno de los marcos más utilizados desarrollados y mantenidos por Airbnb. Los desarrolladores lo combinan con otros marcos como Jest, Chai o Mocha para probar la aplicación React. La enzima solo se usa para renderizar componentes, acceder a cosas, encontrar elementos, interactuar con elementos y simular eventos. Chai o Jest se pueden usar para hacer afirmaciones. Puede probar las salidas de los componentes de React, abstrayendo la representación de los componentes. Obtenga más información sobre cómo probar la aplicación React en el enlace Enzyme with Jest.

• Utilice renderizado superficial.
• Acceda a las implementaciones comerciales de sus componentes.
• Realice una representación DOM completa.
• Use ganchos de reacción en renderizado superficial, con algunas limitaciones.

6. Ciprés IO

Cypress es un marco de prueba de extremo a extremo muy rápido que le permite escribir sus pruebas sin ningún marco de prueba adicional. Le permite ejecutar sus pruebas en el navegador real o en la línea de comandos. Además de probar su código en el navegador real, también puede usar las herramientas de desarrollo del navegador en paralelo. El marco viene con su panel de control que le da control sobre el estado de sus pruebas. Algunos pros y ventajas de usar Cypress son…

• Viajes en el tiempo con instantáneas
• Capturas de pantalla y videos
• Espera automática
• Controle el tráfico de red sin tocar su servidor para probar casos extremos
• La paralelización y el equilibrio de carga integrados facilitan la depuración.
• Buena API para interactuar con los componentes de la página.

7. React-testing-library

Kent C. Dodds creó React-testing-library y cuenta con el apoyo de una amplia comunidad de desarrolladores. Te permite probar el componente fácilmente y simula el comportamiento del usuario en tus pruebas. Similar a la enzima, esta biblioteca es un conjunto completo de utilidades de prueba React DOM enfocadas en imitar las acciones y flujos de trabajo reales del usuario. Lea el artículo Revisiting React Testing in 2019 para elegir entre react-testing-library y Enzyme. Puedes hacer lo siguiente con react-testing-library…

• Consulta tus elementos dentro de texto, etiqueta, displayValue, rol y testId
• Dispara cualquier evento
• Espere a que aparezca un elemento con esperar

Existen algunas limitaciones de esta biblioteca, además de que no puede realizar una representación superficial y no puede acceder al negocio interno de sus componentes, como los estados.

8. titiritero

Puppeteer no es un marco de JavaScript, es una biblioteca de Chromium Node sin interfaz gráfica de usuario que proporciona una API para controlar Chrome o Chromium a través del protocolo DevTools. Puede iniciar Chrome y, con la API proporcionada, navegar entre páginas, obtener botones y hacer clic en ellos. Puppeteer se ejecuta en un navegador real y le permite escribir pruebas de extremo a extremo con una API similar al navegador. Puede hacer muchas más cosas con Puppeteer, como generar capturas de pantalla, generar contenido prerenderizado de SPA, automatizar acciones como envíos de formularios, entradas de teclado, etc. Puede combinar Puppeteer con Jest para probar su aplicación React de principio a fin.

• Fácil prueba automatizada de IU, envío de formularios y entrada de teclado
• Fácil creación de capturas de pantalla y archivos PDF de páginas web
• Soporte para probar extensiones de Chrome.

Puppeteer no admite una gran cantidad de extensiones, pero el futuro es brillante y prometedor.

Conclusión

Podemos ver que cada biblioteca y marco de prueba tiene sus ventajas y desventajas. Ya sea una prueba unitaria, una prueba de integración o una prueba de extremo a extremo, elegir la herramienta adecuada ayuda mucho a obtener el mejor resultado. Probar los componentes de React combinando el marco de prueba adecuado (por ejemplo, Jest, etc.) con las bibliotecas de aserción/manipulación correctas (por ejemplo, Enzyme, etc.) es muy importante para crear un flujo de trabajo fluido y flexible, que pueda adaptarse mientras actualiza, amplía y modifica su código. .