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!