Réagir les tests des composants pour les humains
L'élaboration de tests de composants de réaction efficaces doit être intuitive, simple et facilement maintenable. Cependant, les écosystèmes de la bibliothèque de tests actuels ne sont souvent pas en court, empêchant les développeurs d'écriter régulièrement des tests JavaScript robustes. Test des composants de réaction et le DOM nécessite fréquemment des emballages de niveau supérieur autour des coureurs de test populaires comme la plaisanterie ou le moka.
Le défi: tests fastidieux et déroutants
Les méthodes de test actuelles s'avèrent souvent fastidieuses et déroutantes. Le style de chaînage de type jQuery pour exprimer la logique de test est lourd et ne s'aligne pas avec l'architecture des composants de React. Même un code apparemment lisible, comme celui de l'utilisation de l'enzyme, peut devenir trop verbeux:
attendre (screen.find (". View"). HasClass ("Technologies")). To.Equal (true); attendre (screp.find ("h3"). text ()). toequal ("Technologies:"); attendre (screen.find ("ul"). enfants ()). à.have.lengthof (4); Attendez-vous (Screen.Contains ([ // ... ])). à.equal (true); attendre (screen.find ("bouton"). text ()). toequal ("back"); attendre (screp.find ("bouton"). HasClass ("small")). To.Equal (true);
Cela correspond à une structure DOM relativement simple:
<div classname="view technologies"> <h3 id="Technologies">Technologies:</h3> <ul> <li>Javascrip</li> <li> Reactjs</li> <li> Nodejs</li> <li> Webpack</li> </ul> <button classname="small">Dos</button> </div>
Le test des composants plus complexes amplifie ces problèmes, ce qui rend le processus encore plus lourd. La déconnexion entre les principes de React pour la génération de HTML et l'approche de test conduit à des tests inefficaces et difficiles à maintenir. Un simple chaînage JavaScript est insuffisant pour la maintenabilité à long terme.
Deux problèmes clés émergent:
- Approche de tests spécifiques aux composants: comment écrire efficacement des tests adaptés au comportement des composants.
- Minimiser la redondance: comment éliminer le code inutile et améliorer la lisibilité des tests.
Assisons-nous avant d'explorer des solutions pratiques.
Une approche ciblée pour réagir les tests des composants
Considérez un composant de base de base:
fonction bienvenue (accessoires) { retour<h1 id="Bonjour-props-name"> Bonjour, {props.name}</h1> ; }
Cette fonction accepte props
et renvoie un nœud DOM à l'aide de JSX. Étant donné que les composants sont essentiellement des fonctions, les tester implique la vérification du comportement de la fonction: comment les arguments affectent le résultat retourné. Pour les composants React, cela se traduit par la configuration props
et la validation du DOM rendu. Interactions utilisateur (clics, souris, etc.) qui modifient l'interface utilisateur doit également être déclenché par programme.
Amélioration de la lisibilité des tests: le motif d'attrange-acte-assert
Des tests clairs et lisibles sont cruciaux. Ceci est réalisé par un libellé concis et une structure cohérente. Le motif d'addition d'attrange (AAA) est idéal:
- Organiser: préparer les accessoires des composants.
- ACT: Rendez le composant et déclenchez des interactions utilisateur.
- Affirmation: vérifiez les résultats attendus en fonction du balisage du composant.
Exemple:
il ("devrait cliquer sur un gros bouton", () => { // Organiser Prophes.size = "grand"; // Acte CONS composant = Mount (Send); simuler (composant, {type: "cliquez"}); // affirmer attendez-vous (composant, "avoir la classe", "cliqué"); });
Pour les tests plus simples, les phases peuvent être combinées:
il ("devrait rendre avec du texte personnalisé", () => { attendez-vous (envoyer, "quand monté", "pour avoir un SMS", "envoyer"); });
Améliorer les pratiques de test actuelles
Les exemples précédents, bien que conceptuellement sonores, ne sont pas facilement réalisables avec des outils standard. Considérez cette approche plus courante:
il ("devrait afficher la vue des technologies", () => { const Container = document.CreateElement ("div"); Document.Body.ApendChild (conteneur); acte (() => { Reactdom.render (<profilecard></profilecard> , conteneur); }); const Button = Container.QuerySelector ("Button"); acte (() => { Button.DispatchEvent (new Window.MousEEvent ("Click", {Bubbles: True})); }); const Details = contener.QuerySelector (". Détails"); attendre (de détail.classList.Contains ("Technologies")). Tobe (true); });
Comparez cela à une version plus abstraite:
il ("devrait afficher la vue des technologies", () => { composant const = Mount (<profilecard></profilecard> )); simuler (composant, {type: "cliquez", cible: "bouton"}); Attendez-vous (composant, "interrogé pour le test ID", "Détails", "pour avoir la classe", "Technologies"); });
C'est plus propre et plus lisible. Ce niveau d'abstraction est réalisable avec lesjs inattendus .
Test avec inattendujs inattendu
Inattendujs est une bibliothèque d'assertion extensible compatible avec divers cadres de test. Son système de plugin et sa syntaxe simplifient les tests de composants React. Nous nous concentrerons sur l'utilisation et les exemples plutôt que de plonger profondément dans le fonctionnement intérieur de l'inattendu.
Exemple: un composant de carte de profil
Nous allons tester un composant ProfileCard
(code omis pour la concision, mais disponible dans le référentiel GitHub référencé).
Configuration du projet
Pour suivre, clonez le référentiel GitHub et suivez les instructions pour configurer le projet et exécuter les tests.
Tests des composants
Les tests (dans src/components/ProfileCard/ProfileCard.test.js
) utilisent le modèle AAA:
- Configuration des accessoires:
beforeEach
de configurer les accessoires par défaut.
AVANTEACH (() => { accessoires = { données: { Nom: "Justin Case", Posts: 45, CreationDate: "01.01.2021", }, }; });
Cas de test spécifiques: les exemples incluent le test pour l'icône "en ligne", le texte bio, la vue des technologies (avec et sans données), l'affichage de l'emplacement, l'exécution de la fonction de rappel et le rendu avec les accessoires par défaut. Chaque cas de test démontre clairement le motif d'addition d'attrange-acte. (Cas de test détaillés omis pour la concision, mais disponible dans le repo GitHub).
Tests d'exécution: tous les tests sont exécutés avec
yarn test
.
Conclusion
Cet exemple présente une approche plus efficace pour réagir les tests de composants. En affichant les composants comme des fonctions et en utilisant le modèle AAA, vous pouvez créer des tests plus maintenables et lisibles. Le choix de la bibliothèque de tests doit être guidé par sa capacité à gérer efficacement le rendu des composants et les comparaisons DOM; Inattendujs est un concurrent fort à cet égard. Explorez le référentiel GitHub fourni pour une compréhension complète et une expérimentation supplémentaire.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds











Essayons de savoir un terme ici: "fournisseur de formulaire statique". Vous apportez votre HTML

Au début d'un nouveau projet, la compilation SASS se produit en un clin d'œil. Cela se sent bien, surtout quand il est associé à BrowSersync, qui recharge

Dans cette semaine, le Roundup des nouvelles de la plate-forme, Chrome présente un nouvel attribut pour le chargement, les spécifications d'accessibilité pour les développeurs Web et la BBC Moves

C'est moi qui regarde l'élément HTML pour la première fois. J'en ai été conscient depuis un certain temps, mais il ne l'a pas encore pris pour un tour. Il a un peu cool et

L'achat ou la construction est un débat classique de la technologie. Construire des choses vous-même peut être moins cher car il n'y a pas d'article de ligne sur votre facture de carte de crédit, mais

Au cours de cette semaine, un Bookmarklet pratique pour inspecter la typographie, en utilisant Await pour bricoler comment les modules JavaScript s'importent, ainsi que Facebook & # 039; S

Pendant un certain temps, iTunes était le grand chien du podcasting, donc si vous avez lié "Abonnez-vous au podcast" pour aimer:

Il existe de nombreuses plates-formes d'analyse pour vous aider à suivre les données des visiteurs et d'utilisation sur vos sites. Peut-être plus particulièrement Google Analytics, qui est largement utilisé
