Début avec la bibliothèque de tests React

Vous vous demandez peut-être: une autre bibliothèque de tests React? Tant de choses ont été couvertes sur CSS-Tricks (en fait, j'ai publié un article sur la plaisanterie et l'enzyme), n'y a-t-il pas assez d'options?

Cependant, React-Testing-Library est plus qu'une simple bibliothèque de tests. C'est une bibliothèque de tests, oui, mais elle est construite sur un principe fondamental, ce qui le rend différent des autres bibliothèques de tests.

Plus vos tests simulent comment le logiciel est utilisé, plus il peut vous apporter de confiance.

Il essaie de tester la façon dont les utilisateurs utilisent votre application. En fait, il est mis en œuvre de sorte que même si vous refactez les composants, les tests ne se casseront pas. Je sais que nous avons eu cela à un moment donné sur notre voyage React.

Nous passerons du temps ensemble à écrire des tests pour une application à faire simple que j'ai construite en utilisant React-Testing-Library. Vous pouvez cloner le référentiel localement:

 git clone https://github.com/kinsomicrote/todoapp-test.git

Si vous faites cela, installez les packages requis:

 ## fil
Yarn Add - Dev React-Testing-Library Jest-Dom

## npm
Installation de NPM - Save-Dev React-Testing-Library Jest-Dom

Si vous voulez savoir pourquoi JEST est ici, nous l'utilisons pour les affirmations. Créez un dossier nommé __test__ dans le répertoire SRC et créez un nouveau fichier nommé App.test.js

Prendre un instantané

Tests instantanés Les tests d'enregistrement effectués sur les composants testés comme moyen de visualiser visuellement les différences entre les changements.

Lorsque nous exécutons ce test pour la première fois, nous prenons le premier instantané de l'apparence du composant. Ainsi, le premier test passera certainement, car il n'y a pas d'autre instantané à comparer à cela pour indiquer que quelque chose échoue. Il échoue uniquement lorsque nous apportons de nouvelles modifications au composant en ajoutant de nouveaux éléments, classes, composants ou texte. Ajoutez du contenu qui n'existait pas lorsque l'instantané a été créé ou lorsque la dernière mise à jour a été mise à jour pour la dernière fois.

Les tests d'instantané seront le premier test que nous avons écrit ici. Ouvrez le fichier App.test.js et faisons-le ressembler à ceci:

 importer réagir à partir de «réagir»;
Importer {rendu, nettoyage} à partir de "React-Testing-Library";
Importer "JEST-DOM / EXTER-EXPECT";
Importer l'application à partir de './app';

après l'enseignement (nettoyage);

it ("correspond à Snapshot", () => {
  const {asfragment} = render (<app></app> ));
  attendre (asfragment ()). Tomatchsnapshot ();
});

Cela importe les packages nécessaires que nous utilisons pour écrire et exécuter des tests. render est utilisé pour afficher les composants que nous souhaitons tester. Nous utilisons cleanup pour effacer le contenu après chaque essai exécuté - comme vous pouvez le voir dans afterEach(cleanup) .

En utilisant asFragment , nous obtenons DocumentFragment du composant de rendu. Nous nous attendons alors à ce qu'il corresponde à l'instantané qui a été créé.

Exécutons le test pour voir ce qui se passe:

 ## fil
test de fil

## npm
test de NPM

Comme nous le savons maintenant, s'il s'agit de notre premier test, un instantané de composant est créé dans un nouveau dossier nommé __snapshots__ à l'intérieur du répertoire __tests__ . Nous obtiendrons en fait un fichier appelé App.test.js.snap et cela ressemble à ceci:

 // Jest Snapshot v1, https://goo.gl/fbaqlp

exportations [`correspond à l'instantané 1`] =`
<documentfragment><div>
    <div>
      <div>
        <h2>
          Ajouter Todo
        </h2>
      </div>
    </div>

      <div>
        <div>
          </div>
      </div>
      <div>
        <div>

            Ajouter une tâche

        </div>
      </div>

    <div>
      <div>
        <h3>
          Listes
        </h3>
        <ul data-test="">
<li>
            <div>
              Acheter du lait

                X

            </div>
          </li>
          <li>
            <div>
              Écrire un tutoriel

                X

            </div>
          </li>
        </ul>
</div>
    </div>
  </div>
</documentfragment>
`;

Maintenant, testons les éléments et événements DOM

Notre application contient deux éléments à faire affichés par défaut lorsque l'application est exécutée pour la première fois. Nous voulons nous assurer qu'ils apparaissent lorsque la première application s'exécute, donc pour tester cela, nous devons localiser la liste non ordonnée (<ul></ul> ) et vérifier la longueur. Nous nous attendons à ce que la longueur soit égale à 2 - le nombre d'éléments.

 it ('il affiche des éléments de TODO par défaut', () => {
  const {getByTestid} = render (<app></app> ));
  const todolist = getByTestid ('todos-ul');
  attendre (todolist.children.length) .tobe (2);  
});

Nous utilisons getByTestId dans cet extrait de code pour extraire l'ID de test du composant App . Ensuite, nous avons défini todoList pour localiser todos-ul . Cela devrait retourner 2.

En utilisant ce que nous avons appris jusqu'à présent, voyez si vous pouvez écrire un test qui affirme que l'utilisateur peut saisir des valeurs dans le champ de saisie. Voici les actions que vous devez faire:

• Obtenez des champs d'entrée
• Définir les valeurs des champs d'entrée
• Événement de changement de déclenchement
• Affirmer que la valeur du champ de saisie est la même que la valeur que vous définissez à l'étape 2

Ne regardez pas ma réponse ci-dessous! Passez autant de temps que possible.

Toujours continuer? merveilleux! Je vais aller prendre une tasse de café et revenir bientôt.

Eh bien, café. ☕️

Oh, tu as terminé! vous êtes génial. Comparons les réponses. Le mien ressemble à ceci:

 it ('permette une entrée', () => {
  const {getByTestid, fireevent} = rendu (<app></app> ));
  Selon item = 'Learn React';
  const toDoInPuledElement = GetByTestid («Todo-Input»);
  ToDoInPuledElement.Value = item;
  FireEvent.Change (TodoinPutellement);
  attendre (tooinInPulements.Value) .tobe («Learn React»);
});

En utilisant getByTestId , j'ai pu extraire l'ID de test dans l'application. Ensuite, je crée une variable, je la définis sur la chaîne "Learn React", et en fais la valeur du champ de saisie. Ensuite, j'utilise son ID de test pour obtenir le champ de saisie et déclencher l'événement de modification après avoir réglé la valeur du champ de saisie. Après cela, j'affirme que la valeur du champ de saisie est en effet "Read React".

Est-ce cohérent avec votre réponse? Si vous avez d'autres méthodes, veuillez laisser un commentaire!

Ensuite, testons si nous pouvons ajouter de nouveaux éléments à faire. Nous devrons obtenir les champs d'entrée, le bouton pour ajouter un nouveau projet et la liste non ordonnée, car ce sont tous les éléments nécessaires pour créer un nouveau projet.

Nous définissons une valeur pour le champ de saisie, puis déclenchez le bouton CLIC pour ajouter la tâche. Nous pouvons le faire en utilisant getByText pour obtenir le bouton - en déclenchant l'événement Click sur l'élément DOM avec le texte "Ajouter la tâche", nous devrions être en mesure d'ajouter un nouvel élément de tâche.

Affirmons que le nombre d'éléments enfants (éléments de liste) dans un élément de liste non ordonné est égal à 3. Cela suppose que la tâche par défaut est toujours intacte.

 it ('ajoute un nouvel élément de todo', () => {
  const {GetByText, GetByTestid, Fireevent} = render (<app></app> ));
  const toDoInPuledElement = GetByTestid («Todo-Input»);
  const todolist = getByTestid ('todos-ul');
  toDoinPuledElement.Value = 'Learn React';
  FireEvent.Change (TodoinPutellement);
  FireEvent.Click (GetByText ('Ajouter une tâche'));
  attendre (todolist.children.length) .tobe (3); 
});

Très bien, non?

Ce n'est qu'une façon de tester dans React

Vous pouvez essayer React-Testing-Library dans la prochaine application React. La documentation dans l'entrepôt est très détaillée et - comme la plupart des outils - est le meilleur endroit pour commencer. Kent C. Dodds l'a construit et il y a un cours complet sur les tests sur Frontend Masters (nécessite un abonnement), qui couvre également les tenants et aboutissants de la lubrale de test de réaction.

Autrement dit, il s'agit d'une ressource de test pour React. Bien sûr, il existe d'autres ressources, mais j'espère que vous avez vu du contenu maintenant et que vous souhaitez l'essayer, et bien sûr, vous devriez également utiliser les ressources qui sont les meilleures pour votre projet.

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!