Table des matières
Le défi: tests fastidieux et déroutants
Technologies:
Une approche ciblée pour réagir les tests des composants
Bonjour, {props.name}
Amélioration de la lisibilité des tests: le motif d'attrange-acte-assert
Améliorer les pratiques de test actuelles
Test avec inattendujs inattendu
Exemple: un composant de carte de profil
Configuration du projet
Tests des composants
Conclusion
Maison interface Web tutoriel CSS Réagir les tests des composants pour les humains

Réagir les tests des composants pour les humains

Mar 27, 2025 am 11:48 AM

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);
Copier après la connexion

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>
Copier après la connexion

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> ;
}
Copier après la connexion

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:

  1. Organiser: préparer les accessoires des composants.
  2. ACT: Rendez le composant et déclenchez des interactions utilisateur.
  3. 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é");
});
Copier après la connexion

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");
});
Copier après la connexion

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);
});
Copier après la connexion

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");
});
Copier après la connexion

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:

  1. Configuration des accessoires: beforeEach de configurer les accessoires par défaut.
 AVANTEACH (() => {
  accessoires = {
    données: {
      Nom: "Justin Case",
      Posts: 45,
      CreationDate: "01.01.2021",
    },
  };
});
Copier après la connexion
  1. 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).

  2. 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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

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

<🎜>: Bubble Gum Simulator Infinity - Comment obtenir et utiliser les clés royales
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
<🎜>: Grow A Garden - Guide de mutation complet
3 Il y a quelques semaines By DDD
Nordhold: Système de fusion, expliqué
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers of the Witch Tree - Comment déverrouiller le grappin
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Sujets chauds

Tutoriel Java
1676
14
Tutoriel PHP
1278
29
Tutoriel C#
1257
24
Une comparaison des fournisseurs de formulaires statiques Une comparaison des fournisseurs de formulaires statiques Apr 16, 2025 am 11:20 AM

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

Une preuve de concept pour rendre Sass plus rapidement Une preuve de concept pour rendre Sass plus rapidement Apr 16, 2025 am 10:38 AM

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

Actualités hebdomadaires de la plate-forme: attribut HTML Loading, les principales spécifications Aria et le passage de iframe à Shadow Dom Actualités hebdomadaires de la plate-forme: attribut HTML Loading, les principales spécifications Aria et le passage de iframe à Shadow Dom Apr 17, 2025 am 10:55 AM

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

Certains pratiques avec l'élément de dialogue HTML Certains pratiques avec l'élément de dialogue HTML Apr 16, 2025 am 11:33 AM

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

Forme de papier Forme de papier Apr 16, 2025 am 11:24 AM

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

Actualités de plate-forme hebdomadaire: bookmarklet d'espacement de texte, attente de haut niveau, nouvel indicateur de chargement d'ampli Actualités de plate-forme hebdomadaire: bookmarklet d'espacement de texte, attente de haut niveau, nouvel indicateur de chargement d'ampli Apr 17, 2025 am 11:26 AM

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

Où devrait «abonner au podcast» vers le lien? Où devrait «abonner au podcast» vers le lien? Apr 16, 2025 pm 12:04 PM

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

Options pour héberger vos propres analyses non-javascript Options pour héberger vos propres analyses non-javascript Apr 15, 2025 am 11:09 AM

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é

See all articles