La rédaction de tests peut être fastidieuse et répétitive. Vous pouvez avoir l'impression de perdre un temps précieux que vous préféreriez utiliser pour travailler sur des fonctionnalités. Cependant, si vous souhaitez livrer des applications dans lesquelles vous avez confiance, vous devez rédiger des tests.
Les tests vous permettent de détecter les erreurs et les bogues que vous pourriez autrement envoyer aux utilisateurs. Il améliore donc l'expérience utilisateur de votre application et vous évite d'avoir à déboguer le code de production.
Vous pouvez facilement écrire des tests dans React en utilisant Jest et la bibliothèque de tests React.
Que devriez-vous tester dans React ?
Décider quoi tester peut être difficile. Bien que les tests soient excellents, vous ne devriez pas tester chaque ligne de votre application React. Cela vous laissera avec des tests fragiles qui se cassent au moindre changement dans votre application.
Au lieu de cela, vous devez uniquement tester l'implémentation de l'utilisateur final. Cela signifie tester la façon dont l'utilisateur final utilisera votre application au lieu de tester le fonctionnement interne de votre application.
De plus, assurez-vous de tester les composants les plus utilisés dans votre application, comme la page de destination ou le composant de connexion. Testez également les fonctionnalités les plus importantes de votre application. Par exemple, il peut s'agir de fonctionnalités qui rapportent de l'argent, comme la fonction de panier d'achat.
Lorsque vous décidez quoi tester, une chose à garder à l'esprit est de ne jamais tester les fonctionnalités que React gère lui-même. Par exemple, au lieu de tester la validité des props, vous pouvez utiliser React PropTypes.
Tester un composant de bouton
N'oubliez pas que vous ne devez tester que l'implémentation d'un composant par l'utilisateur final et non son fonctionnement interne. Pour un composant de bouton, cela signifie vérifier qu'il s'affiche sans plantage et qu'il s'affiche correctement.
Créez un nouveau fichier dans le src dossier appelé Bouton.js et ajoutez le code suivant.
fonctionBouton({évaluer}) {
revenir (
<bouton>{évaluer}</button>
)
}
exporterdéfaut Bouton
Button.js accepte un accessoire appelé value et l'utilise comme valeur de bouton.
Écrire votre premier test
UN application créer-réagir-app est préinstallé avec Jest et la bibliothèque de test React. Jest est une bibliothèque de test légère avec des fonctions de simulation et d'assertion intégrées. Cela fonctionne avec de nombreux Cadres JavaScript. La bibliothèque de test React, d'autre part, fournit des fonctions pour vous aider à tester la façon dont les utilisateurs interagissent avec les composants.
Créez un nouveau fichier appelé Bouton.test.js dans le dossier src. Par défaut, Jest identifie les fichiers suffixés par .test.js en tant que fichiers de test et les exécute automatiquement. Une autre option consiste à ajouter vos fichiers de test dans un dossier appelé __tests__.
Ajoutez le code suivant dans Button.test.js pour créer le premier test.
importer { rendre } de '@testing-library/réagir' ;
importer Bouton de '../Bouton';
décris('Composant de bouton', () => {
test('Rend le composant de bouton sans plantage', () => {
rendre(<Bouton />);
});
})
Ce test définit d'abord en quoi consiste le test en utilisant le bloc describe fourni par Jest. Ce bloc est utile pour regrouper des tests liés. Ici, vous regroupez les tests pour le composant Button.
À l'intérieur du bloc de description, vous avez le premier test dans le bloc de test. Ce bloc accepte une chaîne décrivant ce que le test doit faire et une fonction de rappel qui exécute l'attente.
Dans cet exemple, le test doit restituer le composant Button sans plantage. La méthode de rendu de la bibliothèque de test React effectue le test réel. Il vérifie si le composant Button s'affiche correctement. Si c'est le cas, le test réussit, sinon il échoue.
Utilisation des rôles pour trouver le bouton
Parfois, vous voulez vérifier si l'élément a été monté. La méthode screen a une fonction getByRole() que vous pouvez utiliser pour récupérer un élément du DOM.
screen.getByRole('bouton')
Vous pouvez ensuite utiliser l'élément que vous avez saisi pour effectuer des tests comme vérifier s'il existe dans le document ou s'il a été rendu correctement.
getByRole() est l'une des nombreuses requêtes que vous pouvez utiliser pour sélectionner des éléments dans un composant. Découvrez d'autres types de requêtes dans The Bibliothèque de tests React Guide "Quelle requête dois-je utiliser". Outre le rôle de « bouton », la plupart éléments HTML sémantiques ont des rôles implicites que vous pouvez utiliser pour effectuer vos requêtes. Retrouvez la liste des rôles de Documents MDN.
Ajoutez ce qui suit au bloc de test pour vérifier les rendus des composants.
test('Rend le bouton sans plantage', () => {
rendre(<Valeur du bouton="S'inscrire" />);
attendre (screen.getByRole('bouton')).toBeInTheDocument()
});
Le matcher toBeInTheDocument() vérifie si l'élément bouton existe dans le document.
Attendez-vous à ce que le bouton s'affiche correctement
Le composant Button accepte une valeur prop et l'affiche. Pour qu'il s'affiche correctement, la valeur qu'il affiche doit être la même que celle que vous avez transmise.
Créez un nouveau bloc de test et ajoutez le code suivant.
test('Rend correctement le bouton', () => {
rendre(<Valeur du bouton="Connexion" />);
attendre (screen.getByRole('bouton')).toHaveTextContent("Connexion")
})
Notez que vous n'avez pas besoin de faire des nettoyages après les tests lorsque vous utilisez la bibliothèque de tests React. Dans les versions précédentes, vous deviez effectuer le nettoyage manuellement comme ceci :
afterEach (nettoyage)
Désormais, la bibliothèque de test démonte automatiquement les composants après chaque rendu.
Création de tests instantanés
Jusqu'à présent, vous avez testé le comportement du composant Button. Écrivez des tests instantanés pour tester si la sortie du composant reste la même.
Les tests instantanés comparent la sortie actuelle à une sortie stockée du composant. Par exemple, si vous modifiez le style d'un composant Button, le test d'instantané vous en informera. Vous pouvez soit mettre à jour l'instantané pour qu'il corresponde au composant modifié, soit annuler les modifications de style.
Les tests instantanés sont très utiles chaque fois que vous voulez vous assurer que votre interface utilisateur ne change pas de manière inattendue.
Le test d'instantané est différent des tests unitaires car vous devez disposer d'un code déjà fonctionnel pour créer l'instantané.
Vous utiliserez la méthode de rendu du package npm react-test-renderer. Alors, exécutez le code suivant pour l'installer.
npm installer réagir-test-rendu
Dans Button.test.js, écrivez le test d'instantané comme suit :
test('Correspond à l'instantané', () => {
arbre constant = renderer.create(<Valeur du bouton="Connexion" />).toJSON();
attendre(arbre).toMatchSnapshot();
})
Il n'y a pas d'instantanés existants pour le composant Button, donc l'exécution de ce test créera un fichier d'instantané à côté du fichier de test :
Bouton
└─── __tests__
│ │ Bouton.tests.js
│ └─── __instantané__
│ │ Bouton.test.js.instantané
│
└─── Bouton.js
Maintenant, lorsque vous exécuterez le prochain test, React comparera le nouvel instantané qu'il génère avec celui stocké.
Écrire des tests pour les composants les plus utilisés
Ce didacticiel vous a appris à écrire des tests DOM et instantanés dans React en testant un composant Button. L'écriture de tests pour tous les composants que vous créez peut être fastidieuse. Cependant, ces tests vous font gagner du temps que vous auriez passé à déboguer du code déjà déployé.
Vous n'avez pas besoin d'atteindre une couverture de test de 100 %, mais assurez-vous d'écrire des tests pour vos composants les plus utilisés et les plus importants.