Test unitaire de composants avec Enzyme Test:composants Test:Enzyme

1. Initialisation de l’application à tester

Afin de découvrir les tests unitaires de composants React, commençons par créer l’application que nous souhaiterons tester. Celle-ci sera initialisée de la même manière que la plupart des applications créées dans ce livre, avec Parcel :

$ yarn init -y 
$ yarn add -D parcel-bundler 
$ yarn add react react-dom 

Le fichier public/index.html est habituel également :

<div id="app"></div> 
<script src="../src/index.js"></script> 

Le composant principal de notre application, celui que nous allons tester, sera un formulaire de contact. Il sera réduit au strict minimum, en effet il ne contiendra qu’un seul champ permettant de saisir un nom.

Ses spécifications sont les suivantes :

  • Le champ nom sera initialisé avec la propriété contact.name.

  • Il sera éditable, autrement dit si l’on saisit une valeur celle-ci devra bien être affichée dans le champ.

  • S’il est vide, un message d’erreur devra s’afficher.

  • Lorsque le formulaire est soumis, la fonction fournie en propriété updateContact sera appelée, avec en paramètre le contact mis à jour avec le nom saisi, et ce uniquement si le champ n’est pas vide.

Écrire un tel composant ne présente aucune difficulté. Voici, par exemple, une implémentation utilisant...

Pour consulter la suite, découvrez le livre suivant :
couv_EIREA.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Que tester dans une application React ?
Suivant
Tester le store Redux et les sagas avec Redux Saga Test Plan