Construire des applications de réaction robustes avec des crochets nécessite des tests rigoureux. Ce didacticiel montre comment tester efficacement les crochets React à l'aide de la bibliothèque enzymatique et des tests de réaction, en tirant parti d'un exemple d'application de taches. Nous couvrirons les scénarios de test clés et les meilleures pratiques pour assurer le code sans bogue.

Ce guide assume la familiarité avec les principes fondamentaux des tests de plaisanterie et de réaction. Si vous êtes nouveau dans Enzyme, envisagez de passer en revue son intégration avec Jest dans les applications React avant de continuer.

Tester des scénarios

Notre composant à faire sera testé contre ces scénarios:

1. Rendu des composants: Vérifiez le composant avec succès.
2. Affichage de taches initial: confirmez que les éléments de tache initiaux sont affichés correctement.
3. Ajout d'une nouvelle tache: testez les fonctionnalités de l'ajout d'un nouvel élément de tache.
4. Suppression d'une tache: Vérifiez la possibilité de supprimer un élément de tache.

Voici le code du composant TAIS:

 Importer React, {UseState, Useref} de "React";

const todo = () => {
  const [todos, setodos] = usestate ([[
    {id: 1, élément: "corriger les bogues"},
    {id: 2, article: "Sortez la poubelle"}
  ]));
  const todoref = useRef ();
  const RemoveTodo = id => {
    Settodos (todos.filter (todo => todo.id! == id));
  };
  const addtodo = data => {
    Soit id = todos.length 1;
    colons ([[
      ... todos,
      {
        identifiant,
        Article: données
      }
    ]));
  };
  const handlenewtodo = e => {
    E.PreventDefault ();
    const item = todoref.current;
    addTodo (item.value);
    item.value = "";
  };
  retour (
    <div classname="container"> {/ * Correction ClassName à classname * /}
      <div classname="row"> {/ * Correction ClassName à classname * /}
        <div classname="col-md-6"> {/ * Correction ClassName à classname * /}
          <h2>Ajouter Todo</h2>
        </div>
      </div>

      <div classname="row"> {/ * Correction ClassName à classname * /}
        <div classname="col-md-6"> {/ * Correction ClassName à classname * /}
          <form onsubmit="{handleNewTodo}"> {/ * Ajout de la balise de formulaire * /}
            <input type="text" ref="{todoRef}" data-testid="input"> {/ * Ajout de données de données * /}
            <button type="submit" data-testid="add-button">Ajouter la tache</button> {/ * Ajout d'un test de données * /}
          </form>
        </div>
      </div>

      <div classname="row todo-list"> {/ * Correction ClassName à classname * /}
        <div classname="col-md-6"> {/ * Correction ClassName à classname * /}
          <h3>Listes</h3>
          {! Todos.Length? (
            <div classname="no-task">Aucune tache!</div>
          ): (
            <ul data-testid="todos"> {/ * Ajout de données de données * /}
              {todos.map (todo => {
                retour (
                  <li key="{todo.id}"> {/ * Valeur clé corrigée * /}
                    <div>
                      {todo.item}
                      <button data-testid="delete-button" onclick="{()"> removetodo (todo.id)}> x</button> {/ * ajout de données de données et onclick * /}
                    </div>
                  </li>
                ));
              })}
            </ul>
          )}
        </div>
      </div>
    </div>
  ));
};

Exportation par défaut TODO;

Remarque: les attributs classname ont été corrigés à className dans le code ci-dessus. De plus, des attributs data-testid ont été ajoutés pour des tests plus faciles avec la bibliothèque de tests React.

Test avec enzyme

1. Installation: npm install --save-dev enzyme enzyme-adapter-react-16
2. Configuration de l'enzyme (setipeTests.js):

 enzyme d'importation à partir de "Enzyme";
adaptateur d'importation de "Enzyme-adapter-react-16";
Enzyme.configure ({adaptateur: nouvel adaptateur ()});

3. Tests (todo.test.js):

 importer réagir à partir de "réagir";
Import {peuple, monter} à partir de "Enzyme";
Importer Todo depuis "../todo";

décrire ("todo", () => {
  it ("rende", () => {
    peu profond(<todo></todo> ));
  });

  il ("affiche les taches initiales", () => {
    const Wrapper = Mount (<todo></todo> ));
    attendre (wrapper.find ("li")). tohavelength (2);
  });

  it ("ajoute un nouvel élément", () => {
    const Wrapper = Mount (<todo></todo> ));
    wrapper.find ("input"). instance (). Value = "Fix Failliing Test";
    wrapper.find ('[type = "soumettre"]'). Simulate ("soumettre"); // Simuler soumettre, pas cliquer
    attendre (wrapper.find ("li")). tohavelength (3);
    attendre (wrapper.find ("li"). Last (). text ()). toContain ("Correction d'échec du test"); // Affirmation améliorée
  });

  it ("supprime un élément", () => {
    const Wrapper = Mount (<todo></todo> ));
    wrapper.find ('[data-testid = "Delete-button"]'). First (). Simulate ("cliquez");
    attendre (wrapper.find ("li")). tohavelength (1);
  });
});

Test avec la bibliothèque de tests React

1. Installation: npm install --save-dev @testing-library/jest-dom @testing-library/react
2. Tests (todo.test.js):

 importer réagir à partir de "réagir";
import {rendu, foyervent, écran} à partir de "@ test-library / react";
Importer Todo depuis "../todo";
Importer "@ test-bibrary / jest-dom";

décrire ("todo", () => {
  il ("affiche les taches initiales", () => {
    rendre(<todo></todo> ));
    attendre (screen.getByTestid ("todos"). enfants.length) .tobe (2);
  });

  it ("ajoute une nouvelle tache", () => {
    rendre(<todo></todo> ));
    FireEvent.Change (Screen.GetByTestid ("Input"), {Target: {Value: "New Task"}});
    FireEvent.Click (Screen.GetByTestid ("Add-Button"));
    attendre (screen.getByTestid ("Todos"). Children.Length) .Tobe (3);
  });

  it ("supprime un tat", () => {
    rendre(<todo></todo> ));
    FireEvent.Click (Screen.GetAllByTestid ("Delete-Button") [0]);
    attendre (Screen.getByTestid ("Todos"). Children.Length) .Tobe (1);
  });
});

N'oubliez pas d'ajuster les chemins de fichier au besoin pour la structure de votre projet. Cette version améliorée fournit des tests plus robustes et maintenables. L'utilisation du data-testid rend les tests plus résilients aux modifications de la structure du composant.

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!