Testen von Reaktionen mit Enzym- und React -Testbibliothek

Das Aufbau von robusten React -Anwendungen mit Haken erfordert strenge Tests. In diesem Tutorial wird gezeigt, wie die Reaktionshaken mit Enzym- und React-Testbibliothek effektiv getestet werden, wodurch ein Beispiel für die Aufgabennutzung verwendet wird. Wir werden wichtige Testszenarien und Best Practices abdecken, um fehlerfreien Code zu gewährleisten.

Dieser Leitfaden setzt Vertrautheit mit den Fundamentaldaten des Scherz- und Reaktionstests aus. Wenn Sie neu im Enzym sind, sollten Sie die Integration mit Scherz in React -Anwendungen überprüfen, bevor Sie fortfahren.

Testszenarien

Unsere Aufgabenkomponente wird gegen diese Szenarien getestet:

1. Komponentenwiedergabe: Überprüfen Sie die Komponente erfolgreich.
2. Erstes To-Do-Display: Bestätigen Sie, dass die ersten Aufgabenelemente korrekt angezeigt werden.
3. Hinzufügen einer neuen Aufgabe: Testen Sie die Funktionalität des Hinzufügens eines neuen Aufgabenelements.
4. Löschen eines Aufgabens: Überprüfen Sie die Möglichkeit, ein Aufgabenelement zu entfernen.

Hier ist der Aufgabenkomponentencode:

 reag import, {usestate, useref} aus "react";

const todo = () => {
  const [todos, settodos] = useSestate ([
    {ID: 1, Element: "Fehler beheben"},
    {ID: 2, Element: "den Müll herausnehmen"}
  ]);
  const todoref = useref ();
  const removetodo = id => {
    Settodos (Todos.filter (Todo => Todo.id! == id));
  };
  const addtodo = data => {
    sei id = Todos.Length 1;
    settodos ([
      ... Todos,
      {
        Ausweis,
        Element: Daten
      }
    ]);
  };
  const handlenewtodo = e => {
    E.PreventDefault ();
    const item = todoref.current;
    Addtodo (item.Value);
    item.Value = "";
  };
  zurückkehren (
    <div classname="container"> {/ * Korrigierter Klassenname zum ClassName */}
      <div classname="row"> {/ * Korrigierter Klassenname zum ClassName */}
        <div classname="col-md-6"> {/ * Korrigierter Klassenname zum ClassName */}
          <h2 id="Todo-hinzufügen">Todo hinzufügen</h2>
        </div>
      </div>

      <div classname="row"> {/ * Korrigierter Klassenname zum ClassName */}
        <div classname="col-md-6"> {/ * Korrigierter Klassenname zum ClassName */}
          <form onsubmit="{handleNewTodo}"> {/ * Formular Tag */} hinzugefügt
            <input type="text" ref="{todoRef}" data-testid="input"> {/ * Daten-Tests hinzugefügt */}
            <button type="submit" data-testid="add-button">Aufgabe hinzufügen</button> {/ * Data-Testid */} hinzugefügt
          </form>
        </div>
      </div>

      <div classname="row todo-list"> {/ * Korrigierter Klassenname zum ClassName */}
        <div classname="col-md-6"> {/ * Korrigierter Klassenname zum ClassName */}
          <h3 id="Listen">Listen</h3>
          {! todos.length? (
            <div classname="no-task">Keine Aufgabe!</div>
          ): (
            <ul data-testid="todos"> {/ * Daten-Tests hinzugefügt */}
              {Todos.map (todo => {
                zurückkehren (
                  <li key="{todo.id}"> {/ * Korrigierter Schlüsselwert */}
                    <div>
                      {Todo.Item}
                      <button data-testid="delete-button" onclick="{()"> removetodo (todo.id)}> x</button> {/ * Daten-Test und Onclick */} hinzugefügt
                    </div>
                  </li>
                );
              })}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
};

Ausfassungsverwaltungsstudio TODO;

HINWEIS: classname -Attribute wurden im obigen Code auf className korrigiert. Außerdem wurden data-testid -Attribute hinzugefügt, um mit der React-Testbibliothek zu testen.

Testen mit Enzym

1. Installation: npm install --save-dev enzyme enzyme-adapter-react-16
2. Enzymkonfiguration (setuptests.js):

 Importenzym aus "Enzym" importieren;
Importadapter von "Enzym-Adapter-React-16";
Enzym.Configure ({adapter: neuer adapter ()});

3. Tests (Todo.test.js):

 Import reagieren aus "reagieren";
Import {flach, montieren} aus "Enzym";
Importieren Sie Todo aus "../Todo";

beschreiben ("todo", () => {
  it ("renders", () => {
    seicht(<todo></todo> );
  });

  it ("Zeigt anfängliche Aufgaben an", () => {
    const wrapper = montage (<todo></todo> );
    erwarten (wrapper.find ("li")). tohavelength (2);
  });

  it ("fügt ein neues Element hinzu", () => {
    const wrapper = montage (<todo></todo> );
    wrapper.find ("input"). instance (). value = "fix failing test";
    wrapper.find ('[type = "subine"]'). simulate ("subine"); // simulieren senden, nicht klicken
    erwarten (wrapper.find ("li")). tohavelength (3);
    erwarten (wrapper.find ("li"). // Verbesserte Behauptung
  });

  it ("entfernt einen Artikel", () => {
    const wrapper = montage (<todo></todo> );
    wrapper.find ('[data-testid = "delete-button"]'). first (). simulate ("click");
    erwarten (wrapper.find ("li")). tohavelength (1);
  });
});

Testen mit React Testing Library

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

 Import reagieren aus "reagieren";
importieren {render, fireeEvent, screen} aus "@Testing-Library/React";
Importieren Sie Todo aus "../Todo";
importieren "@testing-library/scherzdom";

beschreiben ("todo", () => {
  it ("Zeigt anfängliche Aufgaben an", () => {
    machen(<todo></todo> );
    erwarten (screen.getByTestid ("todos"). Kinder.Length) .tobe (2);
  });

  it ("fügt ein neues To-Do hinzu", () => {
    machen(<todo></todo> );
    fireEvent.change (screen.getByTestID ("input"), {Ziel: {value: "New Task"}});
    fireEvent.click (screen.getByTestid ("add-button"));
    erwarten (screen.getByTestid ("todos"). Kinder.Length) .tobe (3);
  });

  it ("löscht a to-do", () => {
    machen(<todo></todo> );
    fireEvent.click (screen.getAllByTestID ("Delete-Button") [0]);
    erwarten (screen.getByTestID ("Todos"). Kinder.Length) .tobe (1);
  });
});

Denken Sie daran, Dateipfade nach Bedarf für Ihre Projektstruktur anzupassen. Diese verbesserte Version bietet robustere und wartbare Tests. Durch die Verwendung von data-testid wird die Tests widerstandsfähiger gegenüber Änderungen in der Struktur der Komponente.

Das obige ist der detaillierte Inhalt vonTesten von Reaktionen mit Enzym- und React -Testbibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!