Un guide pour tester les composants React

Les plats clés

• Les composants réagis sont intrinsèquement testables en raison de leur composition et de leurs relations d'objet, et ils ne comptent pas sur l'héritage pour construire des composants réutilisables, ce qui facilite les tests.
• L'utilitaire de rendu peu profond dans React permet les tests unitaires d'un seul composant isolément, sans nécessiter de DOM, permettant des tests rapides et ciblés.
• La syntaxe JSX dans React permet de passer dans divers types JavaScript, tels que les booléens et les rappels, facilitant les tests de composants dans différents états.
• pour tester les composants qui sont entrelacés ou dépendants d'autres composants, les tests unitaires doivent se concentrer sur la sortie et les interactions du composant, plutôt que sur ses détails d'implémentation.
• Des outils comme la plaisanterie et l'enzyme sont recommandés pour tester les composants React, offrant des fonctionnalités utiles comme le «rendu peu profond» et les fonctions simulées pour créer des scénarios de test réalistes.

React est un cadre qui a fait des progrès au sein de la communauté des développeurs JavaScript. React a un cadre de composition puissant pour la conception de composants. Les composants react sont des bits de code réutilisable que vous pouvez exercer dans votre application Web.

Les composants de réaction ne sont pas étroitement couplés à partir du DOM, mais sont-ils faciles à tester unité? Dans cette prise, explorons ce qu'il faut pour les composants de réaction de test unitaires. Je vais montrer le processus de réflexion pour rendre vos composants testables.

Gardez à l'esprit, je ne parle que des tests unitaires, qui sont un type spécial de test. (Pour en savoir plus sur les différents types de tests, je vous recommande de lire «Tests JavaScript: unité vs Tests d'intégration fonctionnels vs».)

Avec des tests unitaires, je suis intéressé par deux choses: commentaires rapides et révolutionnaires. Avec cela, je peux parcourir les changements avec un degré élevé de confiance et de qualité de code. Cela vous donne un niveau de réconfort que vos composantes de réaction n'atterriront pas morte sur le navigateur. Être capable d'obtenir de bons commentaires à un rythme rapide vous donne un avantage concurrentiel - celui que vous voudrez conserver dans le monde des logiciels agiles d'aujourd'hui.

Pour la démo, faisons une liste des grands singes, qui est filtrable via une case à cocher. Vous pouvez trouver l'intégralité de la base de code sur GitHub. Par souci de concision, je ne montrerai que les échantillons de code qui intéressent. Cet article suppose un niveau de connaissance de travail avec des composants React.

Si vous allez télécharger et exécuter l'exemple de code de démo, vous verrez une page comme ceci:

Écrire des composants testables

Dans React, une bonne approche consiste à commencer par une hiérarchie de composants. Le principe de responsabilité unique me vient à l'esprit lors de la construction de chaque composant individuel. Les composants réagis utilisent la composition et les relations d'objet.

Pour la liste des grands singes, par exemple, j'ai cette approche:

FilterableGreatApeList
|_ GreatApeSearchBar
|_ GreatApeList
   |_ GreatApeRow

Jetez un œil à la façon dont une grande liste de singes a de nombreuses grandes lignes de singe avec des données. Les composants React utilisent ce modèle de données de composition, et il est également testable.

Dans les composants React, évitez d'utiliser l'héritage pour construire des composants réutilisables. Si vous venez d'un fond de programmation classique orienté objet, gardez cela à l'esprit. Les composants réagis ne connaissent pas leurs enfants à l'avance. Les composants de test qui descendent d'une longue chaîne d'ancêtres peuvent être un cauchemar.

Je vous laisserai explorer le filtrableGreatApelist par vous-même. C'est un composant React avec deux composants distincts qui intéressent ici. N'hésitez pas à explorer les tests unitaires qui l'accompagnent également.

pour construire une barre de recherche GreatAPEsearch, par exemple, faites-le:

<span>class GreatApeSearchBar extends Component {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>
    <span>this.handleShowExtantOnlyChange = this.handleShowExtantOnlyChange.bind(this);
</span>  <span>}
</span>
  <span>handleShowExtantOnlyChange(e) {
</span>    <span>this.props.onShowExtantOnlyInput(e.target.checked);
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return(
</span>      <span><span><span><form</span>></span>
</span><span>        <span><span><input</span>
</span></span><span>          <span>id<span>="GreatApeSearchBar-showExtantOnly"</span>
</span></span><span>          <span>type<span>="checkbox"</span>
</span></span><span>          <span>checked<span>={this.props.showExtantOnly}</span>
</span></span><span>          <span>onChange<span>={this.handleShowExtantOnlyChange}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><label</span> htmlFor<span>="GreatApeSearchBar-showExtantOnly"</span>></span>Only show extant species<span><span></label</span>></span>
</span><span>      <span><span></form</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Ce composant a une case à cocher avec une étiquette et filme un événement de clic. Cette approche peut déjà vous être trop familière, ce qui est une très bonne chose.

Notez qu'avec React, les composants testables viennent gratuitement, tout droit sorti de la boîte. Il n'y a rien de spécial ici - un gestionnaire d'événements, JSX et une méthode de rendu.

Le prochain composant de réaction de la hiérarchie est le Grandapelist, et il ressemble à ceci:

<span>class GreatApeList extends Component {
</span>  <span>render() {
</span>    <span>let rows = [];
</span>
    <span>this.props.apes.forEach((ape) => {
</span>      <span>if (!this.props.showExtantOnly) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>
        <span>return;
</span>      <span>}
</span>
      <span>if (ape.isExtant) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>      <span>}
</span>    <span>});
</span>
    <span>return (
</span>      <span><span><span><div</span>></span>
</span><span>        {rows}
</span><span>      <span><span></div</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

C'est un composant React qui a le composant GreatAmpow et il utilise la composition d'objet. Il s'agit du modèle de composition le plus puissant de React au travail. Notez l'absence d'héritage lorsque vous construisez des composants réutilisables mais testables.

Dans la programmation, la composition des objets est un modèle de conception qui permet des éléments basés sur les données. Pour y penser d'une autre manière, un Greatapelist a de nombreux objets GreatAmpow. C’est cette relation entre les composants de l’interface utilisateur qui anime la conception. React Composants a intégré cet état d'esprit. Cette façon de regarder les éléments d'interface utilisateur vous permet d'écrire de beaux tests unitaires.

Ici, vous vérifiez le drapeau this.props.showextantonly qui vient de la case à cocher. Cette propriété Showextantonly est définie via le gestionnaire d'événements dans Greatapesearchbar.

Pour les tests unitaires, comment réagissez-vous des composants unitaires qui dépendent d'autres composants? Et les composants entrelacés les uns avec les autres? Ce sont d'excellentes questions à garder à l'esprit alors que nous passons bientôt à des tests. Les composants de réaction peuvent encore avoir des secrets que l'on peut déverrouiller.

Pour l'instant, regardons le Greataperow, qui abrite les données Great Ape:

<span>class GreatApeRow extends Component {
</span>  <span>render() {
</span>    <span>return (
</span>      <span><span><span><div</span>></span>
</span><span>        <span><span><img</span>
</span></span><span>          <span>className<span>="GreatApeRow-image"</span>
</span></span><span>          <span>src<span>={this.props.ape.image}</span>
</span></span><span>          <span>alt<span>={this.props.ape.name}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><p</span> className<span>="GreatApeRow-detail"</span>></span>
</span><span>          <span><span><b</span>></span>Species:<span><span></b</span>></span> {this.props.ape.name}
</span><span>        <span><span></p</span>></span>
</span><span>
</span><span>        <span><span><p</span> className<span>="GreatApeRow-detail"</span>></span>
</span><span>          <span><span><b</span>></span>Age:<span><span></b</span>></span> {this.props.ape.age}
</span><span>        <span><span></p</span>></span>
</span><span>      <span><span></div</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Avec les composants React, il est pratique d'isoler chaque élément d'interface utilisateur avec un laser focus sur une seule préoccupation. Cela présente des avantages clés en ce qui concerne les tests unitaires. Tant que vous vous en tenez à ce modèle de conception, vous trouverez sans couture d'écrire des tests unitaires.

Test Utilities

Recaptons notre plus grande préoccupation en ce qui concerne le test des composants React. Comment puis-je tester un seul composant isolément? Eh bien, en fin de compte, il y a un utilitaire Nifty qui vous permet de le faire.

Le rendu peu profond dans React vous permet de rendre un composant à un niveau de profondeur. À partir de cela, vous pouvez affirmer des faits sur ce que fait la méthode de rendu. Ce qui est remarquable, c'est qu'il ne nécessite pas de dom.

En utilisant ES6, vous l'utilisez comme ceci:

FilterableGreatApeList
|_ GreatApeSearchBar
|_ GreatApeList
   |_ GreatApeRow

Pour que les tests unitaires s'exécutent rapidement, vous avez besoin d'un moyen de tester les composants isolément. De cette façon, vous pouvez vous concentrer sur un seul problème, le tester et passer à la prochaine préoccupation. Cela devient stimulant à mesure que la solution se développe et que vous êtes en mesure de refacter à volonté - rester proche du code, apporter des changements rapides et s'assurer qu'il fonctionnera dans un navigateur.

Un avantage de cette approche est que vous pensez mieux au code. Cela produit la meilleure solution qui traite du problème à portée de main. Je trouve cela libérateur lorsque vous n'êtes pas enchaîné à une tonne de distractions. Le cerveau humain fait un travail terrible pour faire face à plus d'un problème à la fois.

La seule question restante est la suivante: quelle distance peut-elle nous emmener avec des composants react?

Mettez tout cela ensemble

Jetez un œil à Greatapelist, par exemple. Quelle est la principale préoccupation que vous essayez de résoudre? Ce composant vous montre une liste de grands singes basés sur un filtre.

Un test unitaire efficace consiste à passer une liste et à vérifier les faits sur ce que fait ce composant React. Nous voulons nous assurer qu'il filtre les grands singes en fonction d'un drapeau.

Une approche consiste à faire ceci:

<span>class GreatApeSearchBar extends Component {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>
    <span>this.handleShowExtantOnlyChange = this.handleShowExtantOnlyChange.bind(this);
</span>  <span>}
</span>
  <span>handleShowExtantOnlyChange(e) {
</span>    <span>this.props.onShowExtantOnlyInput(e.target.checked);
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return(
</span>      <span><span><span><form</span>></span>
</span><span>        <span><span><input</span>
</span></span><span>          <span>id<span>="GreatApeSearchBar-showExtantOnly"</span>
</span></span><span>          <span>type<span>="checkbox"</span>
</span></span><span>          <span>checked<span>={this.props.showExtantOnly}</span>
</span></span><span>          <span>onChange<span>={this.handleShowExtantOnlyChange}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><label</span> htmlFor<span>="GreatApeSearchBar-showExtantOnly"</span>></span>Only show extant species<span><span></label</span>></span>
</span><span>      <span><span></form</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Notez que je teste les composants React en utilisant la plaisanterie. Pour en savoir plus à ce sujet, consultez «Comment tester les composants React en utilisant la plaisanterie».

Dans JSX, jetez un œil à ShowExtantonly = {true}. La syntaxe JSX vous permet de définir un état sur vos composants React. Cela ouvre de nombreuses façons de les composants de test unitaires compte tenu d'un état spécifique. JSX comprend les types JavaScript de base, donc un véritable drapeau est défini comme un booléen.

Avec la liste à l'écart, que diriez-vous de la barre de recherche Greatapesearch? Il a ce gestionnaire d'événements dans la propriété Onchange qui pourrait être intéressant.

Un bon test unitaire est de faire ceci:

<span>class GreatApeList extends Component {
</span>  <span>render() {
</span>    <span>let rows = [];
</span>
    <span>this.props.apes.forEach((ape) => {
</span>      <span>if (!this.props.showExtantOnly) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>
        <span>return;
</span>      <span>}
</span>
      <span>if (ape.isExtant) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>      <span>}
</span>    <span>});
</span>
    <span>return (
</span>      <span><span><span><div</span>></span>
</span><span>        {rows}
</span><span>      <span><span></div</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Pour gérer et tester les événements, vous utilisez la même méthode de rendu peu profond. La méthode GetRenderOutput est utile pour lier les fonctions de rappel aux composants avec des événements. Ici, la propriété ONSHOWExtSantOnlyInput se voit attribuer la fonction d'echange de rappel.

Sur un test unitaire plus trivial, qu'en est-il du composant React GreatAmpow? Il affiche de grandes informations APE à l'aide de balises HTML. Il s'avère que vous pouvez également utiliser le rendu peu profond pour tester ce composant.

Par exemple, assurons-nous de rendre une image:

<span>class GreatApeRow extends Component {
</span>  <span>render() {
</span>    <span>return (
</span>      <span><span><span><div</span>></span>
</span><span>        <span><span><img</span>
</span></span><span>          <span>className<span>="GreatApeRow-image"</span>
</span></span><span>          <span>src<span>={this.props.ape.image}</span>
</span></span><span>          <span>alt<span>={this.props.ape.name}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><p</span> className<span>="GreatApeRow-detail"</span>></span>
</span><span>          <span><span><b</span>></span>Species:<span><span></b</span>></span> {this.props.ape.name}
</span><span>        <span><span></p</span>></span>
</span><span>
</span><span>        <span><span><p</span> className<span>="GreatApeRow-detail"</span>></span>
</span><span>          <span><span><b</span>></span>Age:<span><span></b</span>></span> {this.props.ape.age}
</span><span>        <span><span></p</span>></span>
</span><span>      <span><span></div</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

avec les composants React, tout se concentre sur la méthode de rendu. Cela rend un peu intuitif de savoir exactement ce que vous devez tester. Un rendu peu profond fait en sorte que le laser puisse vous concentrer sur un seul composant tout en éliminant le bruit.

Conclusion

Comme indiqué, les composants de réaction sont très testables. Il n'y a aucune excuse pour renoncer à l'écriture de bons tests unitaires pour vos composants.

La bonne chose est que JSX fonctionne pour vous dans chaque test individuel, pas contre vous. Avec JSX, vous pouvez passer des booléens, des rappels ou tout ce dont vous avez besoin. Gardez cela à l'esprit lorsque vous vous aventurez dans les tests de test unitaires de réagir par vous-même.

L'utilitaire de test de rendu peu profond vous donne tout ce dont vous avez besoin pour de bons tests unitaires. Il ne fait qu'un niveau de profondeur et vous permet de tester isolément. Vous n'êtes pas préoccupé par un enfant arbitraire dans la hiérarchie qui pourrait casser vos tests unitaires.

Avec l'outillage de plaisanterie, j'aime la façon dont il vous donne des commentaires uniquement sur les fichiers spécifiques que vous modifiez. Cela raccourcit la boucle de rétroaction et ajoute une mise au point laser. J'espère que vous voyez à quel point cela peut être précieux lorsque vous abordez des problèmes difficiles.

Questions fréquemment posées (FAQ) sur le test des composants réagis

Quelles sont les meilleures pratiques pour tester les composants React?

Les meilleures pratiques pour tester les composants de réaction comprennent la rédaction de petits tests ciblés qui vérifient une fonctionnalité à la fois. Cela facilite l'identification et la résolution des problèmes. Il est également important de tester la sortie du composant, et non ses détails d'implémentation. Cela signifie vérifier ce avec quoi l'utilisateur voit et interagir, et non comment le composant y parvient. Enfin, utilisez des outils comme la plaisanterie et les enzymes spécialement conçus pour tester les composants de la réaction. Ils fournissent des fonctionnalités utiles comme le «rendu peu profond» qui peut rendre vos tests plus efficaces et efficaces.

Comment utiliser la plaisanterie pour tester les composants React?

Jest est un cadre de test populaire pour JavaScript, Et il est particulièrement bien adapté pour tester les composants React. Pour utiliser Jest, vous devez d'abord l'installer dans votre projet à l'aide de NPM ou de fil. Ensuite, vous pouvez écrire des tests en utilisant les fonctions décrites et il fournies par Jest. À l'intérieur de la fonction informatique, vous pouvez utiliser attendre pour affirmer que certaines conditions sont remplies. Jest fournit également une fonction simulée pour créer des fonctions simulées, qui peuvent être utiles pour tester la façon dont vos composants interagissent avec d'autres parties de votre application.

Quel est le rôle de l'enzyme dans le test des composants réagis?

Enzyme est un utilitaire de test JavaScript pour React qui facilite le test de vos composants. Il offre des fonctions pour rendre les composants de différentes manières, y compris le «rendu peu profond» qui ne rend que le composant lui-même sans ses composants enfants. Cela peut rendre vos tests plus rapidement et plus ciblés. Enzyme fournit également des fonctions pour simuler les interactions utilisateur comme cliquer sur un bouton et pour inspecter la sortie de vos composants.

Comment puis-je tester les interactions utilisateur dans mes composants React?

Tester les interactions utilisateur dans les composants de réaction implique la simulation des actions de l'utilisateur et la vérification que le composant répond correctement. Cela peut être fait en utilisant la fonction Simulate fournie par Enzyme. Par exemple, vous pouvez simuler un événement de clic sur un bouton, puis vérifier que l'état ou les accessoires du composant a changé comme prévu. Il est également important de tester que vos composants gèrent correctement l'entrée de l'utilisateur, par exemple en vérifiant qu'un formulaire soumet les données correctes lorsque l'utilisateur le remplit et clique sur le bouton Soumettre.

Comment puis-je m'assurer que mes composants React sont accessibles?

Assurer l'accessibilité dans vos composants React implique de suivre les meilleures pratiques pour la conception Web accessible, comme l'utilisation de HTML sémantique, la fourniture de texte alternatif pour les images et la garantie que vos composants peuvent être utilisés avec un clavier. Vous pouvez également utiliser des outils comme JEST-AXE, un plugin de plaisanterie pour tester l'accessibilité, pour vérifier automatiquement vos composants pour les problèmes d'accessibilité courants. De plus, il est important de tester vos composants avec des lecteurs d'écran et d'autres technologies d'assistance pour s'assurer qu'elles sont vraiment accessibles.

Comment puis-je tester les performances de mes composants de réact?

Tester les performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances de Vos composants React peuvent être effectués en utilisant le profileur React, un outil qui mesure la fréquence à laquelle une application React rend et quel est le «coût» de rendu. Cela peut vous aider à identifier les composants qui rendent trop souvent ou à prendre trop de temps à rendre, ce qui peut ralentir votre application. Vous pouvez également utiliser des outils de navigateur comme le panneau de performance Chrome Devtools pour mesurer les performances globales de votre application, y compris des facteurs tels que les demandes de réseau et le temps d'exécution JavaScript.

Comment puis-je tester mes composants de réaction avec différents accessoires?

Tester vos composants React avec différents accessoires peut être effectué en utilisant la fonction SETPROPS fournie par Enzyme. Cela vous permet de modifier les accessoires d'un composant une fois qu'il a été rendu, puis de vérifier qu'il répond correctement. Par exemple, vous pouvez tester qu'un composant affiche le texte correct lorsqu'il est donné des accessoires de texte différents, ou qu'il gère correctement les accessoires facultatifs.

Comment puis-je tester mes composants React dans différents navigateurs?

Le test de vos composants React dans différents navigateurs peut être effectué à l'aide d'un outil comme BrowSertack ou Sauce Labs. Ces outils vous permettent d'exécuter vos tests dans de vrais navigateurs sur des appareils réels, ce qui peut vous aider à attraper des bogues spécifiques au navigateur. Il est également important de tester manuellement vos composants dans différents navigateurs, car les tests automatisés peuvent parfois manquer des problèmes visuels ou des problèmes d'utilisation.

Comment puis-je tester mes composants React avec différentes tailles d'écran?

Tester vos composants React avec différentes tailles d'écran peuvent être effectuées en utilisant le mode de conception réactif dans les outils de développement de votre navigateur. Cela vous permet de simuler différentes tailles d'écran et résolutions, et vérifier que vos composants regardent et fonctionnent correctement sur eux. Vous pouvez également utiliser un outil comme Browserstack ou Sauce Labs pour exécuter vos tests sur des appareils réels avec différentes tailles d'écran.

Comment puis-je tester mes composants de réaction avec différents rôles utilisateur?

Tester votre réact Les composants avec différents rôles utilisateur impliquent la simulation des actions de différents types d'utilisateurs et la vérification que vos composants répondent correctement. Par exemple, vous pouvez tester que certaines fonctionnalités ne sont disponibles que pour les utilisateurs connectés, ou que les utilisateurs d'administrateur voient une interface différente de celle des utilisateurs réguliers. Cela peut être fait en utilisant la fonction simulate fournie par Enzyme, et en configurant vos tests pour utiliser différents rôles utilisateur.

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!