Grundlegendes Tutorial: Testen von React-Komponenten mit Jest

Das Testen von Code ist für viele Entwickler eine verwirrende Praxis. Das ist verständlich, denn das Schreiben von Tests erfordert mehr Aufwand, Zeit und die Fähigkeit, mögliche Anwendungsfälle vorherzusehen. Startups und Entwickler, die an kleinen Projekten arbeiten, neigen oft dazu, Tests aufgrund mangelnder Ressourcen und Arbeitskräfte völlig zu ignorieren.

Ich denke jedoch, dass Sie Ihre Komponenten aus mehreren Gründen testen sollten:

1. Es gibt Ihnen mehr Vertrauen in Ihren Code.
2. Testen kann Ihre Arbeitseffizienz verbessern.

React ist nicht anders. Tests können für Stabilität und Konsistenz sorgen, wenn sich Ihre gesamte Anwendung in eine Ansammlung von Komponenten verwandelt, die schwer zu warten sind. Das Schreiben von Tests vom ersten Tag an wird Ihnen helfen, besseren Code zu schreiben, Fehler leichter zu erkennen und einen besseren Entwicklungsworkflow aufrechtzuerhalten.

In diesem Artikel erkläre ich Ihnen alles, was Sie wissen müssen, um Tests für React-Komponenten zu schreiben. Ich werde auch einige Best Practices und Techniken behandeln. Fangen wir an!

Komponenten in React testen

Testen ist der Prozess, bei dem überprüft wird, ob unsere Testaussagen korrekt sind und während der gesamten Lebensdauer der Anwendung korrekt bleiben. Eine Testzusicherung ist ein boolescher Ausdruck, der „true“ zurückgibt, sofern kein Fehler im Code vorliegt.

Zum Beispiel könnte die Behauptung so einfach sein: „Wenn der Benutzer zu /login navigiert, sollte das Modal mit der ID #login gerendert werden.“ Die Behauptung wird false zurückgeben. Behauptungen beschränken sich nicht nur auf das, was gerendert wird, Sie können auch Aussagen darüber machen, wie Ihre Anwendung auf Benutzerinteraktionen und andere Vorgänge reagiert.

Frontend-Entwickler können viele automatisierte Teststrategien verwenden, um ihren Code zu testen. Wir beschränken unsere Diskussion auf drei beliebte Softwaretestparadigmen in React: Unit-Tests, Funktionstests und Integrationstests.

Einheitentests

Unit-Tests gehören zu den Testveteranen, die in Testkreisen immer noch beliebt sind. Wie der Name schon sagt, testen Sie einzelne Codeteile, um sicherzustellen, dass sie unabhängig voneinander wie erwartet funktionieren. Aufgrund der Komponentenarchitektur von React ist Unit-Test eine natürliche Wahl. Sie sind außerdem schneller, da Sie nicht auf einen Browser angewiesen sind.

Unit-Tests helfen Ihnen, jede Komponente isoliert zu betrachten und sie als Funktionen zu behandeln. Unit-Tests für eine bestimmte Komponente sollten die folgenden Fragen beantworten:

1. Hast du irgendwelche Requisiten? Wenn ja, was macht das mit ihnen?
2. Welche Komponenten werden gerendert?
3. Sollte es einen Status haben? Wann oder wie wird der Status aktualisiert?
4. Gibt es ein Verfahren, das bei der Installation, Deinstallation oder Benutzerinteraktion befolgt werden sollte?

Funktionstest

Funktionstests werden verwendet, um das Verhalten eines Teils der Anwendung zu testen. Funktionstests werden in der Regel aus der Sicht des Benutzers geschrieben. Eine Funktion ist normalerweise nicht auf eine einzelne Komponente beschränkt. Es kann sich um ein vollständiges Formular oder eine ganze Seite handeln.

Wenn Sie beispielsweise ein Registrierungsformular erstellen, kann es Komponenten für Formularelemente, Warnungen und Fehler (falls vorhanden) umfassen. Die Komponente, die nach dem Absenden des Formulars gerendert wird, ist ebenfalls Teil dieser Funktionalität. Hierfür ist kein Browser-Renderer erforderlich, da wir mit einem virtuellen In-Memory-DOM testen.

Integrationstests

Integrationstests sind eine Teststrategie, bei der alle einzelnen Komponenten als Gruppe getestet werden. Bei Integrationstests wird versucht, die Benutzererfahrung zu reproduzieren, indem Tests in einem tatsächlichen Browser ausgeführt werden. Dies ist viel langsamer als Funktions- und Unit-Tests, da jede Testsuite im Live-Browser ausgeführt wird.

In React sind Unit-Tests und Funktionstests beliebter als Integrationstests, da sie einfacher zu schreiben und zu warten sind. Das ist es, was wir in diesem Tutorial behandeln werden.

Kennen Sie Ihre Werkzeuge

Sie benötigen bestimmte Tools und Abhängigkeiten, um Unit- und Funktionstests Ihrer React-Anwendung zu starten. Ich habe sie unten aufgelistet.

Verfügt über ein Test-Framework

Jest ist ein Test-Framework, das keine Konfiguration erfordert und daher einfach einzurichten ist. Es ist beliebter als Test-Frameworks wie Jasmine und Mocha, da es von Facebook entwickelt wurde. Jest ist außerdem schneller als andere Ansätze, da es eine clevere Technik verwendet, um Testläufe über Arbeitsthreads hinweg zu parallelisieren. Darüber hinaus wird jeder Test in einer Sandbox-Umgebung ausgeführt, um Konflikte zwischen zwei aufeinanderfolgenden Tests zu vermeiden.

Wenn Sie die Create-React-App verwenden, ist Jest im Lieferumfang enthalten. Wenn nicht, müssen Sie möglicherweise Jest und einige andere Abhängigkeiten installieren. Mehr darüber können Sie auf der offiziellen Jest-Dokumentationsseite lesen.

React Test Renderer

Auch wenn Sie die Create-React-App verwenden, müssen Sie dieses Paket installieren, um Snapshots zu rendern. Snapshot-Tests sind Teil der Jest-Bibliothek. Daher können Sie einen Testrenderer verwenden, um schnell eine serialisierbare HTML-Ausgabe aus einem virtuellen DOM zu generieren, anstatt die gesamte Benutzeroberfläche der Anwendung zu rendern. Sie können es wie folgt installieren:

yarn add react-test-renderer

ReactTestUtils und Enzyme

react-dom/test-utils Enthält einige vom React-Team bereitgestellte Testdienstprogramme. Alternativ können Sie das von Airbnb veröffentlichte Enzympaket verwenden. Enzyme ist viel besser als ReactTestUtils, da es die Ausgabe von React-Komponenten einfach bestätigen, manipulieren und iterieren lässt. Wir beginnen mit dem Testen mit React-Dienstprogrammen und wechseln dann zu Enzyme.

Um Enzyme zu installieren, führen Sie den folgenden Befehl aus.

yarn add enzyme enzyme-adapter-react-16

Fügen Sie den Code zu src/SetupTests.js hinzu.

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

Der Abschnitt „Testkomponenten“ auf der Seite „Create-React-App“ bietet weitere Informationen.

Demoanwendung einrichten und Tests organisieren

Wir werden einen Test für eine einfache Demoanwendung schreiben, die eine Master-/Detailansicht einer Produktliste anzeigt. Die Demoanwendung finden Sie in unserem GitHub-Repository. Die Anwendung besteht aus einer Containerkomponente namens ProductContainer und drei Präsentationskomponenten: ProductList, ProductContainer 的容器组件和三个表示组件组成：ProductList、ProductDetails 和 ProductHeader

.
├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── manifest.json
├── src
│   ├── components
│   │   ├── App.js
│   │   ├── ProductContainer.js
│   │   ├── ProductDetails.jsx
│   │   ├── ProductHeader.js
│   │   ├── ProductList.jsx
│   ├── index.js
│   └── style.css

Erstellen Sie nach dem Herunterladen der Demo ein Verzeichnis mit dem Namen __tests__ in /src/components/ . Anschließend können Sie alle Testdateien, die sich auf diese Funktion beziehen, im Verzeichnis __tests__ speichern. Tester benennen ihre Testdateien normalerweise .spec.js oder .test.js, zum Beispiel ProductHeader.test.js oder >ProductHeader.spec.js

describe('ProductHeader', () => {

  it('passing test', () => {
    expect(true).toBeTruthy();
  })

  it('failing test', () => {
    expect(false).toBeTruthy();
  })
})

expects(true).toBeTruthy();

yarn test

expects(false).toBeFalsy();

import React, {Component} from 'react';
   
class ProductHeader extends Component  {
    render() {
        return(
            <h2 className="title"> Product Listing Page </h2>
        );
    }
};
export default ProductHeader;

import React from 'react';
import ReactTestUtils from 'react-dom/test-utils'; 
import ProductsList from '../ProductsList';

describe('ProductHeader Component', () => {

    it('has an h2 tag', () => {
     //Test here
    });
  
    it('is wrapped inside a title class', () => {
     //Test here
    })
  })

 const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    

    it('has an h2 tag', () => {

      const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    
      var h2 = ReactTestUtils.findRenderedDOMComponentWithTag(
       component, 'h2'
     );
    
  });

    it('has a title class', () => {

      const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    
      var node = ReactTestUtils.findRenderedDOMComponentWithClass(
       component, 'title'
     );
    })