Erste Schritte mit React Testing Library

Sie fragen sich vielleicht: Eine andere React -Testbibliothek? So viel wurde auf CSS-Tricks behandelt (tatsächlich habe ich einen Artikel über Scherz und Enzym gepostet), nicht genügend Optionen?

Die React-Test-Bibliothek ist jedoch mehr als nur eine andere Testbibliothek. Es ist eine Testbibliothek, ja, aber sie basiert auf einem grundlegenden Prinzip, das sie von anderen Testbibliotheken unterscheidet.

Je mehr Ihre Tests simulieren, wie die Software verwendet wird, desto größer ist das Vertrauen, das sie Ihnen bringen können.

Es versucht zu testen, wie Benutzer Ihre App verwenden. Tatsächlich wird es implementiert, so dass die Tests auch dann nicht brechen, wenn Sie die Komponenten neu aufstellen. Ich weiß, wir haben dies irgendwann auf unserer React -Reise geschehen.

Wir verbringen einige Zeit damit, Tests für eine einfache Aufgabenanwendung zu schreiben, die ich mit React-Test-Bibliothek erstellt habe. Sie können das Repository lokal klonen:

 Git Clone https://github.com/kinsomicrote/todoapp-test.git

Wenn Sie dies tun, installieren Sie die erforderlichen Pakete:

 ## Garn
Garn-Add-Deact-Test-Bibliothek-Scherz-Dom

## npm
npm install-Save-dev React-Testing-Library-Scherz-Dom

Wenn Sie wissen möchten, warum Scherz hier ist, verwenden wir es für Behauptungen. Erstellen Sie einen Ordner namens __test__ im SRC -Verzeichnis und erstellen Sie eine neue Datei namens App.test.js

Machen Sie einen Schnappschuss

Snapshot -Tests Datensatzstests, die an getesteten Komponenten durchgeführt wurden, um die Unterschiede zwischen Änderungen visuell anzusehen.

Wenn wir diesen Test zum ersten Mal durchführen, machen wir den ersten Schnappschuss des Erscheinungsbilds der Komponente. Der erste Test wird also definitiv bestehen, da es keinen anderen Schnappschuss mit dem gibt, um anzuzeigen, dass etwas fehlschlägt. Es schlägt nur dann fehl, wenn wir neue Änderungen an der Komponente vornehmen, indem neue Elemente, Klassen, Komponenten oder Text hinzugefügt werden. Fügen Sie Inhalte hinzu, die nicht vorhanden waren, als der Snapshot erstellt wurde oder wenn das letzte Update zuletzt aktualisiert wurde.

Snapshot -Tests sind der erste Test, den wir hier geschrieben haben. Öffnen wir die Datei App.test.js und lassen Sie sie so aussehen:

 Import reagieren aus "reagieren";
Import {Render, Reinigung} aus "React-Testing-Library";
importieren "scherzdom/expect";
App von './app' importieren;

Afterach (Aufräumarbeiten);

it ("übereinstimmt Snapshot", () => {
  const {asfragment} = render (<app></app> );
  erwarten (asfragment ()). tomatchsnapshot ();
});

Dies importiert die erforderlichen Pakete, die wir zum Schreiben und Ausführen von Tests verwenden. render wird verwendet, um die Komponenten anzuzeigen, die wir testen möchten. Wir verwenden cleanup , um den Inhalt nach jedem Testlauf zu löschen - wie Sie in afterEach(cleanup) sehen können.

Mit asFragment erhalten wir DocumentFragment der Render -Komponente. Wir erwarten dann, dass es dem erstellten Schnappschuss entspricht.

Führen Sie den Test durch, um zu sehen, was passiert:

 ## Garn
Garntest

## npm
NPM -Test

Wie wir jetzt wissen, wird in einem neuen Ordner __snapshots__ im Verzeichnis __tests__ __snapshots __ erstellt, wenn dies unser erster Test ist. Wir erhalten tatsächlich eine Datei namens App.test.js.snap und sie sieht so aus:

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

Exporte [`übereinstimmt Snapshot 1`] =`
<documentfragment><div>
    <div>
      <div>
        <h2>
          Todo hinzufügen
        </h2>
      </div>
    </div>

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

            Aufgabe hinzufügen

        </div>
      </div>

    <div>
      <div>
        <h3>
          Listen
        </h3>
        <ul data-test="">
<li>
            <div>
              Milch kaufen

                X

            </div>
          </li>
          <li>
            <div>
              Tutorial schreiben

                X

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

Lassen Sie uns nun die DOM -Elemente und -Eremente testen

Unsere Anwendung enthält zwei Aufgabenelemente, die standardmäßig angezeigt werden, wenn die Anwendung zum ersten Mal ausgeführt wird. Wir möchten sicherstellen, dass sie angezeigt werden, wenn die erste Anwendung ausgeführt wird. Um dies zu testen, müssen wir die ungeordnete Liste finden (<ul></ul> ) und prüfen Sie die Länge. Wir erwarten, dass die Länge gleich 2 ist - die Anzahl der Elemente.

 It ('Es zeigt Standard -Todo -Elemente an', () => {
  const {getByTestid} = render (render (<app></app> );
  const todolist = getByTestid ('Todos-ul');
  erwarten (todolist.Children.length) .tobe (2);  
});

Wir verwenden getByTestId in diesem Code -Snippet, um die Test -ID aus App -Komponente zu extrahieren. Dann setzen wir todoList , um todos-ul Element zu lokalisieren. Dies sollte zurückkehren 2.

Überprüfen Sie, ob Sie einen Test schreiben können, der behauptet, dass der Benutzer Werte in das Feld Eingabe eingeben kann. Hier sind die Aktionen, die Sie ausführen müssen:

• Holen Sie sich Eingabefelder
• Stellen Sie Werte für Eingangsfelder fest
• Auslösen von Veränderungsereignis
• Behauptet, dass der Wert des Eingangsfeldes der gleiche Wert ist, den Sie in Schritt 2 dafür festgelegt haben

Schauen Sie nicht auf meine Antwort unten! Verbringen Sie so viel Zeit wie möglich.

Immer noch fortfahren? wunderbar! Ich werde eine Tasse Kaffee trinken und bald zurückkommen.

Nun, Kaffee. ☕️

Oh, du bist fertig! Du bist toll. Vergleichen wir die Antworten. Meins sieht so aus:

 it ('erlaubt input', () => {
  const {getByTestid, fireeEvent} = render (<app></app> );
  lass item = 'reagieren';
  const todoinputElement = getByTestID ('Todo-Input');
  todoinputElement.Value = item;
  fireEvent.change (todoinputElement);
  erwarten (todoinputElement.Value) .tobe ('React');
});

Mit getByTestId konnte ich die Test -ID in der Anwendung extrahieren. Dann erstelle ich eine Variable, setze sie auf die Zeichenfolge "React Learn React" und mache sie zum Wert des Eingabefeldes. Als nächstes verwende ich seine Test -ID, um das Eingabefeld zu erhalten und das Änderungsereignis auszulösen, nachdem der Wert des Eingabefeldes festgelegt wurde. Danach behaupte ich, dass der Wert des Eingabefeldes tatsächlich "reagieren" ist.

Stimmt das mit Ihrer Antwort überein? Wenn Sie andere Methoden haben, hinterlassen Sie bitte einen Kommentar!

Lassen Sie uns als nächstes testen, ob wir neue Aufgabenartikel hinzufügen können. Wir müssen die Eingabefelder, die Schaltfläche zum Hinzufügen eines neuen Projekts und die nicht ordnungsgemäße Liste erhalten, da dies alle Elemente sind, die für die Erstellung eines neuen Projekts benötigt werden.

Wir setzen einen Wert für das Eingabefeld und lösen dann die Schaltfläche Klicken, um die Aufgabe hinzuzufügen. Wir können dies tun, indem wir getByText verwenden, um die Schaltfläche zu erhalten. Wenn Sie das DOM -Element mit dem Text "Aufgabe hinzufügen" auslösen, sollten wir in der Lage sein, ein neues Aufgabenelement hinzuzufügen.

Lassen Sie uns behaupten, dass die Anzahl der untergeordneten Elemente (Listenelemente) in einem nicht ordnungsgemäßen Listenelement entspricht. Dies geht davon aus, dass die Standardaufgabe noch intakt ist.

 it ('fügt ein neues Todo -Element hinzu', () => {
  const {getByText, getByTestid, fireEvent} = render (<app></app> );
  const todoinputElement = getByTestID ('Todo-Input');
  const todolist = getByTestid ('Todos-ul');
  toDoInputElement.Value = 'React' Learn React ';
  fireEvent.change (todoinputElement);
  fireEvent.click (getByText ('Aufgabe hinzufügen'));
  erwarten (todolist.Children.length) .tobe (3); 
});

Sehr gut, oder?

Dies ist nur eine Möglichkeit, in React zu testen

Sie können in der nächsten React-Anwendung versuchen, die Testing-Bibliotheks-Bibliotheks zu librarieren. Die Dokumentation im Lager ist sehr detailliert und - wie die meisten Werkzeuge - ist der beste Ausgangspunkt. Kent C. Dodds hat es gebaut, und es gibt einen vollständigen Verlauf des Tests an Frontend Masters (erfordert ein Abonnement), das auch die Vor- und Nachteile der React-Test-Bibliothek abdeckt.

Das heißt, dies ist nur eine Testressource für React. Natürlich gibt es andere Ressourcen, aber hoffentlich haben Sie jetzt einige Inhalte gesehen und möchten es versuchen, und natürlich sollten Sie auch die Ressourcen verwenden, die für Ihr Projekt am besten geeignet sind.

Das obige ist der detaillierte Inhalt vonErste Schritte mit React Testing Library. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!