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 !

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)

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

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.

Un peu sur CI / CD Un peu sur CI / CD Apr 02, 2025 pm 06:21 PM

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

Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur? Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur? Apr 02, 2025 pm 06:17 PM

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.

Cartes empilées avec un positionnement collant et une pincée de sass Cartes empilées avec un positionnement collant et une pincée de sass Apr 03, 2025 am 10:30 AM

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.

Utilisation de Markdown et de la localisation dans l'éditeur de blocs WordPress Utilisation de Markdown et de la localisation dans l'éditeur de blocs WordPress Apr 02, 2025 am 04:27 AM

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

Comparaison des navigateurs pour une conception réactive Comparaison des navigateurs pour une conception réactive Apr 02, 2025 pm 06:25 PM

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

Pourquoi les zones réduites pourpre dans la disposition Flex sont-elles considérées à tort «espace de débordement»? Pourquoi les zones réduites pourpre dans la disposition Flex sont-elles considérées à tort «espace de débordement»? Apr 05, 2025 pm 05:51 PM

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

Comment utiliser la grille CSS pour les en-têtes et pieds de page collants Comment utiliser la grille CSS pour les en-têtes et pieds de page collants Apr 02, 2025 pm 06:29 PM

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

See all articles