fullstack react tdd example

React MONOREPO DÉVELOPPEMENT ET DOM

Bienvenue dans le développement et les tests Dom axés sur les composants React Monorepo! Ce référentiel contient tous les code et exemples pour un discours complet sur les applications REACT de la construction en utilisant le développement basé sur le test (TDD) et le test DOM. Voici un lien vers le discours lui-même. Le monorepo a été organisé à l'aide de PNPM et TurborePo pour rationaliser les processus de gestion et de création de packages.

Si vous n'êtes pas familier avec le concept d'un monorepo, c'est un seul référentiel qui contient plusieurs projets. Dans ce cas, le monorepo contient une bibliothèque d'interface utilisateur partagée et quelques applications React. La bibliothèque d'interface utilisateur partagée contient des composants de réaction réutilisables et accessibles, ainsi que leurs tests et histoires. L'application React démontre l'utilisation et l'intégration des composants. L'application suivante.js démontre la puissance de la composition dans React avec le composant modal de la bibliothèque d'interface utilisateur de Mantine.

Vous pouvez en savoir plus sur Monorepos ici.

Aperçu

L'objectif principal de ce monorepo est de démontrer les meilleures pratiques pour construire des composants réagissables et accessibles, et comment les tester efficacement à l'aide d'outils tels que React Testing Library et Storybook. De plus, il présente l'utilisation de simulations de service pour gérer les dépendances externes dans les tests et illustre le modèle backend-for-frontend (BFF) en action. Le discours est adapté à un public avec un mélange d'expérience frontale et back-end, mettant l'accent sur la puissance de la composition dans React et comment elle s'applique à la fois au développement des composants et aux tests.

En fin de compte, nous voyons comment nous pouvons construire et tester cette interface:

Contenu

Le monorepo est structuré comme suit:

Applications

• frontend : une application React construite à l'aide de Create React App pour démontrer l'utilisation et l'intégration des composants.
• mantine-example : une application NEXT.js démontrant la puissance de la composition en réagit avec la composante modale de la bibliothèque de l'interface utilisateur manteuse. Cette application est utilisée comme une introduction à la conférence, mettant en évidence les avantages de la composition lors de la construction et du test des composants réagis.

Packages

• ui : un exemple de bibliothèque d'interface utilisateur partagée contenant des composants réutilisables et accessibles, ainsi que leurs tests et histoires.
• types : une bibliothèque partagée contenant des types de typescript utilisés par les autres packages.
• mocks : une bibliothèque partagée contenant des données simulées utilisées par les autres packages.

Commencer

Vous devrez installer PNPM à l'échelle mondiale pour exécuter le monorepo.

La version de PNPM utilisée lors du développement de ce monorepo est 8.2.0 et le nœud version 18.16.0 .

La version de StoryBook installé a des problèmes lors de l'exécution des versions précédentes de Node. Veuillez utiliser au moins la version 18.16.0 du nœud.

Pour installer les dépendances du monorepo, exécutez la commande suivante:

pnpm install
pnpm build

Le monorepo peut être exécuté en utilisant les commandes suivantes:

• pnpm run dev : Exécute le monorepo en mode développement.
• pnpm run build : construit le monorepo pour la production.
• pnpm run start : exécute le monorepo en mode de production.
• pnpm run test : exécute les tests Monorepo.

Pour exécuter Storybook, exécutez la commande suivante:

pnpm run storybook

Tests en cours d'exécution

Vous pouvez soit exécuter tous les tests pour le dépôt ou exécuter des tests pour un package spécifique.

Pour exécuter tous les tests, exécutez la commande suivante:

pnpm run test

Pour exécuter des tests pour un package spécifique, CD dans le répertoire et exécutez la commande suivante:

pn test -- --watch

Pour exécuter les tests d'application, exécutez la commande suivante:

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

Pour exécuter les tests des composants, exécutez la commande suivante:

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

J'espère que vous trouverez ce monorepo utile pour comprendre les meilleures pratiques pour réagir le développement et les tests DOM axés sur les composants. N'hésitez pas à explorer le code, à exécuter les exemples et à contribuer au référentiel. Codage heureux!

Notes supplémentaires

Une architecture API suggérée pour un frontal moderne est le backend pour le motif frontal:

Vous pouvez en savoir plus ici.

AI a généré des notes pour la conversation

Voici un résumé et des plats clés de la présentation:

Résumé: Paul Hammond, directeur de Pack Software, présente le développement axé sur les composants avec les tests React et Dom, couvrant des sujets tels que le développement, l'accessibilité et les pratiques frontales modernes.

Idées:

• Le développement axé sur les composants aide à construire des éléments d'interface utilisateur réutilisables et cohérents
• Les tests contre le comportement plutôt que les détails de mise en œuvre fournissent plus de valeur
• L'accessibilité doit être une considération clé lors de la construction de composants frontaux
• Des outils comme le livre de contes permettent le développement interactif et la documentation des composants
• Mock Service Worker permet aux appels d'API moqueurs à la fois pour les tests et le développement
• Le modèle de backend pour le frontend (BFF) peut simplifier l'architecture frontale
• Les bons tests donnent confiance pour apporter des modifications au fil du temps
• La bibliothèque de tests React encourage les tests du point de vue d'un utilisateur
• TDD peut conduire à un code plus maintenable et flexible
• Les composants composables permettent une personnalisation et une réutilisation plus faciles

CONNAISSANCES:

• Le comportement de test au lieu de la mise en œuvre permet un refactorisation et une maintenance plus faciles
• Les sélecteurs accessibles dans les tests peuvent améliorer l'accessibilité globale des applications
• Les explorateurs de composants comme le livre de contes facilitent la collaboration entre les concepteurs et les développeurs
• Se moquer au niveau du réseau permet des simulations cohérentes à travers les tests et le développement
• TDD peut entraîner des boucles de rétroaction plus rapides et une confiance plus élevée dans les modifications de code
• Se concentrer sur les résultats de livraison peut aider à convaincre les équipes d'adopter des pratiques TDD
• L'utilisation du DOM pour tester de près imite les interactions utilisateur réelles
• La séparation des préoccupations de l'interface utilisateur de la logique métier améliore l'architecture des applications globales
• Des pratiques de livraison continue comme les «squelettes de marche» peuvent améliorer la configuration du projet
• Équilibrer les tests d'unité avec les tests d'intégration / E2E couvre différents scénarios de test

CITATIONS:

• "Le but de bons tests est de nous donner la confiance nécessaire pour apporter des modifications au fil du temps."
• "Si les tests passent, nous devons nous sentir suffisamment confiants pour passer directement à la production."
• "Les extrémités avant modernes sont construites avec des composants et non des pages."
• "Le développement axé sur les composants nous aide à construire des composants réutilisables qui réduisent la duplication."
• "Nous voulons voir comment nous apportons des modifications au fil du temps, comment les tests nous aident à apporter des modifications au fil du temps."
• "Les bons tests devraient nous donner la confiance nécessaire pour apporter des modifications au fil du temps."
• "La joie du TDD est la bonne façon de le dire parce que c'est une expérience si libératrice."
• "Je n'ai pas travaillé tard depuis 10 ans, et parce que je n'en ai pas besoin, et vous ne devriez pas avoir besoin de le faire si vous écrivez dans un style de test."
• "En ce qui concerne les tests, l'une des choses que je fais généralement est ... Je retirerais la branche de quelqu'un, exécutais les tests, échouais délibérément quelque chose et voyais les tests."
• "J'ai besoin d'avoir confiance que c'est ainsi que cela fonctionne."

Habitudes:

• Écrire des tests avant le code d'implémentation pour assurer une couverture de test appropriée
• Utilisez des sélecteurs accessibles dans les tests pour améliorer l'accessibilité globale
• Collaborez en étroite collaboration avec les concepteurs à l'aide d'outils comme le livre de contes
• Code de refactor en toute confiance avec une solide suite de test en place
• Exécutez des tests en mode montre pour une rétroaction instantanée pendant le développement
• Utilisez des travailleurs de service simulés pour simuler les réponses de l'API dans les tests
• Construisez des squelettes de marche pour établir des pipelines CI / CD au début des projets
• Examiner les demandes de traction en brisant intentionnellement le code pour vérifier la couverture des tests
• Prioriser le comportement des tests sur les détails de la mise en œuvre dans les tests frontaux
• Apprenez et appliquez continuellement les meilleures pratiques en matière de développement frontal

FAITS:

• La bibliothèque de tests React est construite au-dessus de la bibliothèque de tests DOM
• Jest utilise une représentation DOM en mémoire appelée JSDom pour tester
• Mock Service Worker peut intercepter et simuler les appels d'API au niveau du réseau
• Le livre de contes est un outil pour développer des composants d'interface utilisateur isolément
• L'accessibilité affecte 30 à 40% de la population sous une forme
• Le développement axé sur les composants est agnostique du cadre et s'applique à réagir, vue, angulaire, etc.
• Le développement axé sur les tests peut conduire à moins de bogues et de code plus maintenable
• Le backend pour le motif de frontend peut améliorer les performances frontales et simplifier l'architecture
• Cypress et le dramaturge sont des outils pour les tests de bout en bout des applications Web
• Les tests de mutation peuvent être utilisés pour vérifier la qualité des suites de test

Références:

• Bibliothèque de tests React
• Livre de contes
• Simulé de service
• Plaisanter
• Cyprès
• Dramaturge
• Volie à outils redux
• React requête
• Tester JavaScript (par Kent C. Dodds)
• Initiative d'accessibilité Web W3C (WAI)
• Le discours d'Ian Cooper "TDD: où tout a mal tourné"
• GitHub Primer (bibliothèque de composants UI)
• Test de la bibliothèque de jeux de jeux
• Backend for Frontend (BFF)

À emporter à une phrase: le développement axé sur les tests avec la bibliothèque de tests React permet un code frontal confiant et maintenable en se concentrant sur le comportement et l'accessibilité.

Recommandations:

• Adopter le développement axé sur les composants pour améliorer la réutilisabilité et la cohérence dans les applications frontales
• Utilisez un livre de contes ou des outils similaires pour développer et documenter les composants de l'interface utilisateur
• Mettre en œuvre des pratiques de développement axées sur les tests pour le code frontal pour améliorer la qualité
• Concentrez-vous sur le comportement de test plutôt que sur les détails de mise en œuvre pour des tests plus résilients
• Utiliser un simulation de service de service pour une moquerie de l'API cohérente dans les tests et le développement
• Envisagez de mettre en œuvre un backend pour le modèle Frontend pour simplifier l'architecture frontale
• Prioriser l'accessibilité dans la conception et les tests des composants dès le début
• Utilisez les sélecteurs accessibles de la bibliothèque de tests React pour améliorer l'accessibilité globale des applications
• Mettre en œuvre des pratiques continues d'intégration et de livraison au début des projets
• Équilibrer les tests d'unité avec intégration et tests de bout en bout pour une couverture complète