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

Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.

Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:

J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.

L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.

Si nous devons afficher la documentation à l'utilisateur directement dans l'éditeur WordPress, quelle est la meilleure façon de le faire?

Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire

Questions sur les zones de slash violet dans les dispositions flexibles Lorsque vous utilisez des dispositions flexibles, vous pouvez rencontrer des phénomènes déroutants, comme dans les outils du développeur (D ...

CSS Grid est une collection de propriétés conçues pour faciliter la mise en page qu'elle ne l'a jamais été. Comme tout, il y a un peu une courbe d'apprentissage, mais Grid est
