Migración de la biblioteca de pruebas Enzyme a React

Página de inicio de InfoQ Noticias Migración de la biblioteca de pruebas Enzyme a React: estudio de caso de Sentry

02 de marzo de 2023 Lectura de 3 minutos

por

Bruno Courion

El equipo de ingeniería de Sentry contó recientemente en su blog los impulsores y las lecciones aprendidas al migrar sus pruebas de front-end de Enzyme a la biblioteca de pruebas de React. La migración fue provocada por la falta de soporte de Enzyme para versiones más nuevas de React. La migración duró unos 20 meses e involucró a 17 ingenieros que revisaron alrededor de 5000 pruebas.

Los tiempos de ingeniería de Sentry decidieron varias veces no migrar su base de pruebas a React Testing Library (RTL) por falta de beneficios suficientemente sustanciales. El equipo recordó:

No tiramos cosas simplemente porque son nuevas. Evaluamos cuidadosamente las nuevas tecnologías para comprender qué beneficios aportan a nuestro equipo. Conocíamos RTL en aquel entonces, pero no teníamos argumentos sólidos sobre por qué deberíamos incorporarlo a nuestro código base. Enzyme, la biblioteca que utilizamos para probar nuestra biblioteca de componentes, todavía atendía nuestras necesidades.

Por un lado, Sentry ya estaba involucrado en una gran migración a TypeScript, lo que, junto con el trabajo regular del producto, mantenía ocupado al equipo de ingeniería.

Por otro lado, las pruebas de enzimas a menudo llevaban mucho tiempo y el equipo tenía un gran interés en mejorar la velocidad de las pruebas.

(Fuente: blog de ingeniería de Sentry)

Una prueba de concepto mostró una mejora del rendimiento del 12 %, lo que se consideró insuficiente para embarcarse en otro largo proyecto de migración. No obstante, la prueba de concepto demostró que RTL tenía ventajas observables sobre Enzyme. Como informa el equipo, Enzyme no realizó pruebas de accesibilidad, no limpió automáticamente el entorno de prueba y, a menudo, accedió directamente al componente en el estado de la prueba. Por el contrario, RTL está más cerca de las pruebas de integración y se esfuerza por probar los casos de uso de las aplicaciones desde la perspectiva del usuario. En particular, RTL se esfuerza por evitar probar los detalles de implementación. Los cambios de implementación solo deberían interrumpir una prueba si realmente introdujeron un error.

El análisis de compensaciones cambió después de que Sentry migró a TypeScript y comenzó a actualizar a React 17 (que incluye React Hooks). El equipo recuerda:

La migración [RTL] todavía no recibió mucha atención hasta que trabajamos en la actualización de React a la versión 17. El equipo central de React había reescrito por completo los componentes internos de la biblioteca y Enzyme utilizó directamente una serie de funciones internas de React.[…] Enzyme no lo hizo Funciona al 100% con esta nueva versión de React, pero había un adaptador en el mercado que solucionaba este problema y eso es lo que usamos. Sin embargo, esta solución no funcionaría a largo plazo ya que React 18 requeriría una reescritura completa, lo que era poco probable que sucediera dado que Airbnb había dejado de admitir Enzyme.[…] RTL no depende de las partes internas de React. y continuaría funcionando igual con React 18 que con 16 y 17.

Una vez que se dio luz verde, el enfoque cambió a minimizar los riesgos del proyecto de migración (estimaciones de ingeniería bajo varias hipótesis, enfoque iterativo frente a migración a gran escala, seguimiento del progreso, capacitación RTL, aparición de mejores prácticas, revisiones diarias de código y más). ).

La migración se completó después de 18 meses (frente a los 14 meses estimados). Permitió al equipo eliminar pruebas obsoletas, mejorar la accesibilidad (un aspecto que antes se pasaba por alto) y escribir pruebas basadas en casos de uso en lugar de detalles de implementación.

El equipo detalló los problemas de rendimiento inesperados que se encontraron al seguir algunas recomendaciones de RTL al pie de la letra (por ejemplo, además de burlarse de las API web, burlarse del usuario tanto y de la manera más realista posible). A pesar de no ver mejoras dramáticas en el frente del rendimiento de la prueba (el principal punto débil que generó el interés por la prueba de concepto inicial), el equipo concluyó positivamente:

Aunque el rendimiento de nuestras pruebas no mejoró como esperábamos, la introducción de la biblioteca trajo muchos otros beneficios, como pruebas que ya no se basan en detalles de implementación, sino que prueban lo que el usuario ve y con lo que interactúa. Y en última instancia, eso es lo que importa.

En el artículo original, el equipo Sentry analiza detalles técnicos interesantes acompañados de datos cuantitativos e ilustraciones cualitativas que pueden interesar a otros equipos de ingeniería. Se invita a los desarrolladores interesados ​​a consultarlo para obtener más información.

React Testing Library forma parte de un conjunto de bibliotecas de pruebas de interfaz de usuario (por ejemplo, DOM Testing Library, Vue Testing Library, Svelte Testing Library, Puppeteer Testing Library) con una filosofía de conducción similar:

Quiere que su base de pruebas se pueda mantener a largo plazo para que los refactores de sus componentes (cambios en la implementación pero no en la funcionalidad) no interrumpan sus pruebas y lo ralenticen a usted y a su equipo. La biblioteca de pruebas DOM [proporciona utilidades para] consultar el DOM en busca de nodos de una manera similar a cómo el usuario encuentra elementos en la página […] Cuanto más se parezcan sus pruebas a la forma en que se usa su software, más confianza le podrán brindar .

Presentado por: Michal Svec - Ingeniero líder de soluciones en Apollo GraphQL

Guarda tu asiento

Escribir para InfoQ ha abierto muchas puertas y aumentado las oportunidades profesionales. para mí. Pude interactuar profundamente con expertos y líderes de opinión para aprender más sobre los temas que cubrí. Y también puedo difundir mis conocimientos a la comunidad tecnológica en general y comprender cómo se utilizan las tecnologías en el mundo real.

¡Descubrí el programa de colaboradores de InfoQ a principios de este año y lo he disfrutado desde entonces! Además de brindarme una plataforma para compartir aprendizaje con una comunidad global de desarrolladores de software, el sistema de revisión entre pares de InfoQ ha mejorado significativamente mi escritura. . Si está buscando un lugar para compartir su experiencia en software, comience a contribuir a InfoQ.

Comencé a escribir noticias para la cola InfoQ .NET como una forma de mantenerme actualizado con la tecnología, pero saqué mucho más provecho de ello. Conocí gente conocedora, obtuve visibilidad global y mejoré mis habilidades de escritura..

Convertirme en editor de InfoQ fue una de las mejores decisiones de mi carrera . Me ha desafiado y me ha ayudado a crecer de muchas maneras. . Nos encantaría tener más gente.Unete a nuestro equipo.

InfoQ busca un editor en jefe a tiempo completo para unirse al equipo internacional y siempre remoto de C4Media. Únase a nosotros para cubrir las tecnologías más innovadoras de nuestro tiempo, colabore con los profesionales de software más brillantes del mundo y ayude a más de 1,6 millones de equipos de desarrollo a adoptar nuevas tecnologías y prácticas que superan los límites de lo que el software y los equipos pueden ofrecer.

Todos los martes se envía un resumen del contenido de la semana pasada en InfoQ. Únase a una comunidad de más de 250.000 desarrolladores senior. Ver un ejemplo

Protegemos su privacidad.

Debe registrar una cuenta InfoQ o iniciar sesión o iniciar sesión para publicar comentarios. Pero hay mucho más detrás de estar registrado.

Aproveche al máximo la experiencia InfoQ.

HTML permitido: a,b,br,blockquote,i,li,pre,u,ul,p

HTML permitido: a,b,br,blockquote,i,li,pre,u,ul,p

HTML permitido: a,b,br,blockquote,i,li,pre,u,ul,p