Sommaire

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