fullstack react tdd example

Desarrollo realizado por componentes react y prueba DOM Monorepo

¡Bienvenido al desarrollo de desarrollo de componentes React y Testing DOM Monorepo! Este repositorio contiene todo el código y ejemplos para una charla integral sobre la creación de aplicaciones React utilizando el desarrollo basado en pruebas (TDD) y las pruebas DOM. Aquí hay un enlace a la charla en sí. El Monorepo se ha organizado utilizando PNPM y Turborepo para racionalizar la gestión de paquetes y los procesos de construcción.

Si no está familiarizado con el concepto de un monorepo, es un solo repositorio que contiene múltiples proyectos. En este caso, el Monorepo contiene una biblioteca de interfaz de usuario compartida y un par de aplicaciones React. La biblioteca de la interfaz de usuario compartida contiene componentes reaccionados reutilizables y accesibles, junto con sus pruebas e historias. La aplicación React demuestra el uso y la integración de los componentes. La aplicación Next.js demuestra el poder de composición en React con el componente modal de la biblioteca Mantine UI.

Puedes leer más sobre Monorepos aquí.

Descripción general

El objetivo principal de este Monorepo es demostrar las mejores prácticas para construir componentes React reutilizables y accesibles, y cómo probarlos de manera efectiva utilizando herramientas como React Testing Library y Storybook. Además, muestra el uso del trabajador de servicios simulados para manejar dependencias externas en las pruebas e ilustra el patrón de backend-for-frontend (BFF) en acción. La charla se adapta a una audiencia con una combinación de experiencia frontal y de fondo, enfatizando el poder de la composición en React y cómo se aplica tanto al desarrollo de componentes como al desarrollo de los componentes.

En última instancia, vemos cómo podemos construir y probar esta interfaz:

Contenido

El Monorepo está estructurado de la siguiente manera:

Aplicaciones

• frontend : una aplicación React creada con la aplicación Create React para demostrar el uso y la integración de los componentes.
• mantine-example : A Next.js Aplicación que demuestra el poder de la composición en React con el componente modal de la biblioteca Mantine UI. Esta aplicación se utiliza como una introducción a la charla, destacando los beneficios de la composición al construir y probar los componentes React.

Paquetes

• ui : Un ejemplo de una biblioteca de UI compartida que contiene componentes React reutilizables y accesibles, junto con sus pruebas e historias.
• types : una biblioteca compartida que contiene tipos de escritura utilizados por los otros paquetes.
• mocks : una biblioteca compartida que contiene datos simulados utilizados por los otros paquetes.

Empezando

Deberá instalar PNPM a nivel mundial para ejecutar el Monorepo.

La versión de PNPM utilizada al desarrollar este Monorepo es 8.2.0 , y la versión de nodo 18.16.0 .

La versión del libro de cuentos instalado tiene problemas al ejecutar versiones anteriores de Node. Utilice al menos la versión del nodo 18.16.0 .

Para instalar las dependencias para el Monorepo, ejecute el siguiente comando:

pnpm install
pnpm build

El Monorepo se puede ejecutar utilizando los siguientes comandos:

• pnpm run dev : ejecuta el Monorepo en modo de desarrollo.
• pnpm run build : construye el Monorepo para la producción.
• pnpm run start : ejecuta el Monorepo en modo de producción.
• pnpm run test : ejecuta las pruebas de Monorepo.

Para ejecutar Storybook, ejecute el siguiente comando:

pnpm run storybook

Pruebas de ejecución

Puede ejecutar todas las pruebas para el repositorio o ejecutar pruebas para un paquete específico.

Para ejecutar todas las pruebas, ejecute el siguiente comando:

pnpm run test

Para ejecutar pruebas para un paquete específico, CD en el directorio y ejecute el siguiente comando:

pn test -- --watch

Para ejecutar las pruebas de aplicación, ejecute el siguiente comando:

 cd apps/frontend
pnpm run test -- --watch

Para ejecutar las pruebas de componentes, ejecute el siguiente comando:

 cd packages/ui
pnpm run test -- --watch

Espero que encuentre este monoreso útil para comprender las mejores prácticas para el desarrollo realizado por componentes react y las pruebas DOM. Siéntase libre de explorar el código, ejecutar los ejemplos y contribuir al repositorio. ¡Feliz codificación!

Notas adicionales

Una arquitectura API sugerida para una parte delantera moderna es el backend para el patrón frontend:

Puedes leer más al respecto aquí.

AI generó notas para la charla

Aquí hay un resumen y conclusiones clave de la presentación:

Resumen: Paul Hammond, director de Pack Software, se presenta en el desarrollo basado en componentes con pruebas React y DOM, que cubren temas como el desarrollo basado en pruebas, la accesibilidad y las prácticas modernas de front-end.

Ideas:

• El desarrollo basado en componentes ayuda a construir elementos de interfaz de usuario reutilizables y reutilizables
• Las pruebas contra el comportamiento en lugar de los detalles de implementación proporcionan más valor
• La accesibilidad debe ser una consideración clave al construir componentes frontales
• Herramientas como el libro de cuentos permiten el desarrollo interactivo y la documentación de los componentes
• El trabajador de servicio simulado permite que las llamadas de API burlonearan tanto para las pruebas como para el desarrollo
• El patrón de backend para frontend (bff) puede simplificar la arquitectura frontal
• Las buenas pruebas dan confianza para hacer cambios con el tiempo
• React Testing Library fomenta las pruebas desde la perspectiva de un usuario
• TDD puede conducir a un código más mantenible y flexible
• Los componentes compuestos permiten una personalización y reutilización más fácil

PERSPECTIVAS:

• El comportamiento de prueba en lugar de la implementación permite una refactorización y mantenimiento más fácil
• Los selectores accesibles en las pruebas pueden mejorar la accesibilidad general de la aplicación
• Exploradores de componentes como el libro de cuentos facilitan la colaboración entre diseñadores y desarrolladores
• Burlarse a nivel de red permite simulacros consistentes entre pruebas y desarrollo
• TDD puede conducir a bucles de retroalimentación más rápidos y una mayor confianza en los cambios en el código
• Centrarse en los resultados de la entrega puede ayudar a convencer a los equipos de adoptar prácticas de TDD
• Uso del DOM para probar de cerca imita las interacciones reales del usuario
• La separación de las preocupaciones de la interfaz de usuario de la lógica empresarial mejora la arquitectura general de las aplicaciones
• Las prácticas de entrega continuas como "Walking Skeletons" pueden mejorar la configuración del proyecto
• Las pruebas unitarias de equilibrio con las pruebas de integración/E2E cubren diferentes escenarios de prueba

CITAS:

• "El propósito de las buenas pruebas es darnos la confianza para hacer cambios con el tiempo".
• "Si las pruebas están pasando, debemos sentirnos lo suficientemente seguros como para ir directamente a la producción".
• "Los frontales modernos están construidos con componentes y no páginas".
• "El desarrollo impulsado por componentes nos ayuda a construir componentes reutilizables que reducen la duplicación".
• "Queremos ver cómo hacemos cambios con el tiempo, cómo las pruebas nos ayudan a hacer cambios con el tiempo".
• "Las buenas pruebas deberían darnos la confianza para hacer cambios con el tiempo".
• "La alegría de TDD es la forma correcta de decirlo porque es una experiencia tan liberadora".
• "No he trabajado hasta tarde durante 10 años, y porque no necesito, y no deberías necesitar si escribes en un estilo de prueba primero".
• "Cuando se trata de pruebas, una de las cosas que normalmente hago es ... Tiraría la rama de alguien hacia abajo, ejecutaría las pruebas, fallaría deliberadamente algo y vería las pruebas".
• "Necesito tener confianza en que así funciona".

Hábitos:

• Escriba pruebas antes del código de implementación para garantizar una cobertura de prueba adecuada
• Use selectores accesibles en las pruebas para mejorar la accesibilidad general
• Colaborar de cerca con diseñadores utilizando herramientas como Storybook
• El código de refactorización con confianza con un conjunto de pruebas sólido en su lugar
• Ejecutar pruebas en modo de reloj para comentarios instantáneos durante el desarrollo
• Use trabajadores de servicios simulados para simular las respuestas de API en las pruebas
• Construya esqueletos para caminar para establecer tuberías de CI/CD temprano en proyectos
• Revise las solicitudes de extracción de código de ruptura intencionalmente para verificar la cobertura de prueba
• Priorizar el comportamiento de las pruebas sobre los detalles de implementación en las pruebas front-end
• Aprender y aplicar continuamente las mejores prácticas en el desarrollo frontal

HECHOS:

• La biblioteca de pruebas de reacción está construida sobre la biblioteca de pruebas DOM
• Jest usa una representación DOM en memoria llamada JSDOM para pruebas
• El trabajador de servicios simulados puede interceptar y simular las llamadas de API a nivel de red
• Storybook es una herramienta para desarrollar componentes de la interfaz de usuario de forma aislada
• La accesibilidad afecta al 30-40% de la población de alguna forma
• El desarrollo basado en componentes es marco-agnóstico y se aplica a React, Vue, Angular, etc.
• El desarrollo basado en pruebas puede conducir a menos errores y un código más mantenible
• El backend para el patrón frontend puede mejorar el rendimiento frontal y simplificar la arquitectura
• Cypress y Playwright son herramientas para pruebas de extremo a extremo de aplicaciones web
• Las pruebas de mutación se pueden usar para verificar la calidad de las suites de prueba

Referencias:

• Biblioteca de pruebas reaccionadas
• Libro de cuentos
• Trabajador de servicio simulado
• Broma
• Ciprés
• Dramaturgo
• Redux Toolkit
• Reaccionar la consulta
• Prueba de JavaScript (por Kent C. Dodds)
• Iniciativa de accesibilidad web de W3C (WAI)
• La charla de Ian Cooper "TDD: ¿Dónde salió mal?
• Primer Github (Biblioteca de componentes de la interfaz de usuario)
• PRUEBA DE PRUEBA DE LA BIBLIOTECA DE PRUEBA
• Backend for Frontend (BFF) Patrón

Takeaway de una oración: el desarrollo basado en pruebas con la biblioteca de pruebas React permite un código frontal confiado y mantenible al enfocarse en el comportamiento y la accesibilidad.

Recomendaciones:

• Adoptar el desarrollo basado en componentes para mejorar la reutilización y la consistencia en las aplicaciones frontales
• Use el libro de cuentos o herramientas similares para desarrollar y documentar los componentes de la interfaz de usuario
• Implementar prácticas de desarrollo basadas en pruebas para el código frontal para mejorar la calidad
• Centrarse en el comportamiento de prueba en lugar de los detalles de implementación para pruebas más resistentes
• Utilice el trabajador de servicios simulados para una burla de API consistente en las pruebas y el desarrollo
• Considere implementar un backend para el patrón frontend para simplificar la arquitectura frontal
• Priorizar la accesibilidad en el diseño y las pruebas de los componentes desde el principio
• Use los selectores accesibles de React Testing Library para mejorar la accesibilidad general de la aplicación
• Implementar prácticas continuas de integración y entrega temprano en proyectos
• Balance de pruebas unitarias con integración y pruebas de extremo a extremo para una cobertura integral