Testing Library: Todo el mundo lo usa, pero nadie lo entiende

Rate this content
Bookmark

Las pruebas son una parte esencial del desarrollo de software, pero pueden ser un proceso complicado y que consume mucho tiempo. El paquete popular testing-library es una herramienta ampliamente utilizada que ayuda a los desarrolladores a escribir pruebas de frontend confiables y mantenibles basadas en un enfoque orientado al comportamiento, pero muchos usuarios no están completamente conscientes de cómo funciona. En esta charla, yo, como uno de los mantenedores del paquete, brindo una mirada detallada a testing-library. Aprenderás cómo testing-library está diseñado para fomentar buenas prácticas de prueba y cómo puede ayudarte a escribir pruebas más mantenibles.

This talk has been presented at TestJS Summit 2023, check out the latest edition of this JavaScript Conference.

FAQ

Testing Library es un conjunto de utilidades de prueba simples y completas que fomentan buenas prácticas de prueba. Su API está diseñada para que las pruebas se parezcan lo más posible a cómo se utiliza el software en la vida real, aumentando así la confianza en los tests antes de su despliegue en producción.

Para probar componentes con la biblioteca de pruebas de React, se renderiza el componente en un entorno simulado y luego se utilizan funciones como getByRole para interactuar y verificar el comportamiento del componente, como simular clics y verificar resultados visibles.

La biblioteca de pruebas de React tiene alrededor de 8.7 millones de descargas semanales.

Js-dom es una implementación en JavaScript del DOM utilizada para pruebas que simula un entorno de navegador en Node.js. Sin embargo, no incluye todas las funcionalidades de un navegador real, como la navegación y el diseño, y es más lento que los navegadores escritos en lenguajes de nivel inferior.

Testing Library utiliza roles explícitos e implícitos para consultar elementos en pruebas. Los roles explícitos se definen directamente en el HTML, mientras que los roles implícitos dependen de la semántica del elemento. Esta funcionalidad ayuda a crear pruebas más robustas y accesibles, aunque puede complicar la construcción del selector adecuado.

El ponente aprendió la importancia de entender profundamente una herramienta antes de contribuir a ella, a pesar de haber usado Testing Library durante casi un año. Este entendimiento surgió después de que su primera contribución significativa fuera revertida, lo que inicialmente lo desanimó de seguir participando en proyectos de código abierto.

Matan Borenkraout
Matan Borenkraout
22 min
11 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla trata sobre la primera contribución de un desarrollador al Testing Library de código abierto, explorando cómo funciona y su importancia en las pruebas. Se discuten los desafíos de las pruebas en un entorno Node y el uso de la consulta getByRole para encontrar elementos. La charla también destaca las complejidades de los roles implícitos y la necesidad de atributos específicos para filtrar elementos. Se enfatiza la importancia de verificar la visibilidad y accesibilidad al consultar elementos y el proceso de limpieza de las pruebas.

1. Introducción a Testing Library

Short description:

¡Hola a todos! Hoy quiero compartir una breve historia sobre mi primera contribución de código abierto a Testing Library. Encontré un problema interesante relacionado con el proceso de compilación y React 17, lo que me llevó a depurar y hacer una contribución significativa. Fue un emocionante viaje al desarrollo de código abierto.

¡Hola a todos y muchas gracias por unirse a mí de forma remota hoy para entender cómo funciona la biblioteca de pruebas Testing Library bajo el capó.

Antes de presentarme, quiero comenzar con una breve historia. Érase una vez, hace tres años, estaba buscando hacer mi primera contribución de código abierto. Decidí elegir una herramienta que uso a diario, así que elegí Testing Library.

Mientras navegaba por los problemas, encontré uno interesante. El problema era un error en nuestro proceso de integración continua (CI) donde la compilación fallaba para la próxima versión de React. En ese momento, era React 17. Decidí que este era un tema interesante. Decidí investigarlo. Depuré tanto Testing Library como React para tratar de entender qué estaba sucediendo allí y por qué nuestra compilación fallaba.

Unos días después, tenía una solicitud de extracción (pull request). Fue revisada y fusionada, y esa fue mi primera contribución significativa a Testing Library. Recuerdo ese día con bastante claridad. Eran alrededor de las 8 pm. Estaba extremadamente feliz. Decidí irme a dormir. Todavía estaba lleno de adrenalina. No dormí mucho, pero después de una buena noche de sueño, me desperté feliz y alegre por hacer mi primera contribución significativa. Hice mi café. Me senté en mi escritorio. Decidí abrir GitHub y ver qué había sucedido durante la noche.

Lo primero que vi y que hizo que mi estado de ánimo cambiara de inmediato fue este problema. La versión 10.4.4 está causando un problema de tiempo de espera con useEffect y solo usa temporizadores falsos. Luego, seguí desplazándome un poco más. También vi este. Error de tipo, no se puede leer la propiedad, versión de indefinido y también este. La función de programación está llamando a la prioridad normal como una función en lugar de una devolución de llamada. Y eso no es una ilustración. Todos estos problemas estaban abiertos durante la noche mientras yo dormía. Y sí, qué inmersión en el código abierto.

2. Understanding How Testing Library Works

Short description:

En esta parte, compartiré una historia sobre mi contribución de código abierto. Luego me presentaré y explicaré cómo funciona la biblioteca de pruebas. Nos alinearemos en los conceptos básicos y discutiremos la importancia de la confianza en las pruebas. ¡Sumergámonos!

Todos ellos están directamente relacionados con mi cambio. Incluso contienen fragmentos de código que leí. Y esta es una ilustración de mí en ese momento específico. Pero en lugar de darle algo a Stephen Hawking, se lo di a Ken C. Dodds. Y, wow, me sentí avergonzado. Afortunadamente, esto sucedió en el momento en que la biblioteca de pruebas de React tenía solo 1.8 millones de descargas semanales. Así que estuvo bien. En este momento, tenemos 8.7 millones de descargas semanales. Eso es bastante.

En esta charla voy a intentar darte algo de contexto sobre cómo funciona la biblioteca de pruebas para que no cometas los mismos errores que cometí en mi primera contribución. Y no te olvides de esta historia. Volveremos a ella al final.

Después de esta breve historia, hagámoslo oficial. Hola a todos. Mi nombre es Mattan Boronkraut. Soy un ingeniero de software senior en Microsoft. Y hoy estoy aquí con mi sombrero de mantenedor de la biblioteca de pruebas para explicarte cómo funciona la biblioteca de pruebas bajo el capó. Si quieres seguirme, este es el sitio donde escribo algunos artículos. Básicamente, escribo por diversión. Tenía analíticas y vi que tengo alrededor de cinco visitas a la semana, así que decidí eliminar las analíticas. No quiero estos datos en mi vida. Y este es mi nombre de usuario en Twitter o x-handle.

Antes de sumergirnos, alineémonos en los conceptos básicos. Entonces, ¿qué es la biblioteca de pruebas? La biblioteca de pruebas es un conjunto de utilidades de prueba simples y completas que fomentan buenas prácticas de prueba. Y nuestra API tiene como objetivo responder a este principio rector: cuanto más se parezca tu prueba a la forma en que se usa tu software, más confianza pueden darte. Y todos podemos estar de acuerdo en que la confianza es lo que buscamos cuando escribimos nuestras pruebas. Queremos tener confianza antes de enviar a producción. Y hoy entenderemos cómo estamos logrando exactamente eso, cómo estamos creando la confianza una API que parece simple en la superficie, pero que en realidad es bastante compleja. Algunas estadísticas más, la biblioteca de pruebas de DOM, que es nuestro paquete principal.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Solicitudes de Red con Cypress
TestJS Summit 2021TestJS Summit 2021
33 min
Solicitudes de Red con Cypress
Top Content
Cecilia Martinez, a technical account manager at Cypress, discusses network requests in Cypress and demonstrates commands like cydot request and SCI.INTERCEPT. She also explains dynamic matching and aliasing, network stubbing, and the pros and cons of using real server responses versus stubbing. The talk covers logging request responses, testing front-end and backend API, handling list length and DOM traversal, lazy loading, and provides resources for beginners to learn Cypress.
Testing Pyramid Makes Little Sense, What We Can Use Instead
TestJS Summit 2021TestJS Summit 2021
38 min
Testing Pyramid Makes Little Sense, What We Can Use Instead
Top Content
Featured Video
Gleb Bahmutov
Roman Sandler
2 authors
The testing pyramid - the canonical shape of tests that defined what types of tests we need to write to make sure the app works - is ... obsolete. In this presentation, Roman Sandler and Gleb Bahmutov argue what the testing shape works better for today's web applications.
Pruebas de ciclo completo con Cypress
TestJS Summit 2022TestJS Summit 2022
27 min
Pruebas de ciclo completo con Cypress
Top Content
Cypress is a powerful tool for end-to-end testing and API testing. It provides instant feedback on test errors and allows tests to be run inside the browser. Cypress enables testing at both the application and network layers, making it easier to reach different edge cases. With features like AppActions and component testing, Cypress allows for comprehensive testing of individual components and the entire application. Join the workshops to learn more about full circle testing with Cypress.
Desarrollo Efectivo de Pruebas
TestJS Summit 2021TestJS Summit 2021
31 min
Desarrollo Efectivo de Pruebas
Top Content
This Talk introduces Test Effective Development, a new approach to testing that aims to make companies more cost-effective. The speaker shares their personal journey of improving code quality and reducing bugs through smarter testing strategies. They discuss the importance of finding a balance between testing confidence and efficiency and introduce the concepts of isolated and integrated testing. The speaker also suggests different testing strategies based on the size of the application and emphasizes the need to choose cost-effective testing approaches based on the specific project requirements.
Playwright Test Runner
TestJS Summit 2021TestJS Summit 2021
25 min
Playwright Test Runner
Top Content
The Playwright Test Runner is a cross-browser web testing framework that allows you to write tests using just a few lines of code. It supports features like parallel test execution, device emulation, and different reporters for customized output. Code-Gen is a new feature that generates code to interact with web pages. Playwright Tracing provides a powerful tool for debugging and analyzing test actions, with the ability to explore trace files using TraceViewer. Overall, Playwright Test offers installation, test authoring, debugging, and post-mortem debugging capabilities.
Todos pueden escribir pruebas fácilmente
TestJS Summit 2023TestJS Summit 2023
21 min
Todos pueden escribir pruebas fácilmente
Playwright is a reliable end-to-end testing tool for modern web apps that provides one API, full isolation, fast execution, and supports multiple languages. It offers features like auto-weighting, retrying assertions, seamless testing of iframes and shadow DOM, test isolation, parallelism, and scalability. Playwright provides tools like VS Code extension, UiMode, and Trace Viewer for writing, debugging, and running tests. Effective tests prioritize user-facing attributes, use playwright locators and assertions, and avoid testing third-party dependencies. Playwright simplifies testing by generating tests, providing code generation and UI mode, and allows for easy running and debugging of tests. It helps in fixing failed tests and analyzing DOM changes, fixing locator mismatches, and scaling tests. Playwright is open source, free, and continuously growing.

Workshops on related topic

Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
React Summit 2023React Summit 2023
151 min
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
Top Content
Featured Workshop
Josh Justice
Josh Justice
La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()?
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn
Cómo empezar con Cypress
TestJS Summit 2022TestJS Summit 2022
146 min
Cómo empezar con Cypress
Featured WorkshopFree
Filip Hric
Filip Hric
La web ha evolucionado. Finalmente, también lo ha hecho el testing. Cypress es una herramienta de testing moderna que responde a las necesidades de testing de las aplicaciones web modernas. Ha ganado mucha popularidad en los últimos años, obteniendo reconocimiento a nivel mundial. Si has estado esperando aprender Cypress, ¡no esperes más! Filip Hric te guiará a través de los primeros pasos sobre cómo empezar a usar Cypress y configurar tu propio proyecto. La buena noticia es que aprender Cypress es increíblemente fácil. Escribirás tu primer test en poco tiempo y luego descubrirás cómo escribir un test de extremo a extremo completo para una aplicación web moderna. Aprenderás conceptos fundamentales como la capacidad de reintentar. Descubre cómo trabajar e interactuar con tu aplicación y aprende cómo combinar pruebas de API y de UI. A lo largo de todo este masterclass, escribiremos código y realizaremos ejercicios prácticos. Saldrás con una experiencia práctica que podrás aplicar a tu propio proyecto.
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
React Summit 2022React Summit 2022
117 min
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Masterclass de Pruebas de API con Postman
TestJS Summit 2023TestJS Summit 2023
48 min
Masterclass de Pruebas de API con Postman
Top Content
WorkshopFree
Pooja Mistry
Pooja Mistry
En el panorama siempre en evolución del desarrollo de software, garantizar la fiabilidad y funcionalidad de las API se ha vuelto primordial. "Pruebas de API con Postman" es una masterclass completa diseñada para equipar a los participantes con los conocimientos y habilidades necesarios para sobresalir en las pruebas de API utilizando Postman, una herramienta poderosa ampliamente adoptada por profesionales en el campo. Esta masterclass profundiza en los fundamentos de las pruebas de API, avanza a técnicas de prueba avanzadas y explora la automatización, las pruebas de rendimiento y el soporte multiprotocolo, proporcionando a los asistentes una comprensión holística de las pruebas de API con Postman.
Únete a nosotros para esta masterclass para desbloquear todo el potencial de Postman para las pruebas de API, agilizar tus procesos de prueba y mejorar la calidad y fiabilidad de tu software. Ya seas un principiante o un probador experimentado, esta masterclass te equipará con las habilidades necesarias para sobresalir en las pruebas de API con Postman.
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Pruebas de Aplicaciones Web utilizando Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Pruebas de Aplicaciones Web utilizando Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
Este masterclass te enseñará los conceptos básicos de cómo escribir pruebas de extremo a extremo utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, abarcando todas las características de la aplicación, estructurando las pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquier persona que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir el masterclass.