Reagieren Sie Komponententests für Menschen

Das Erstellen effektiver React -Komponenten -Tests sollten intuitiv, unkompliziert und leicht aufrechterhalten werden. Die aktuellen Ökosysteme für die Testbibliothek fallen jedoch häufig zu kurz und behindern Entwickler, konsequent robuste JavaScript -Tests zu schreiben. Testen von React-Komponenten und das DOM erfordert häufig höhere Wrapper mit beliebten Testläufern wie Scherz oder Mokka.

Die Herausforderung: mühsame und verwirrende Tests

Aktuelle Testmethoden erweisen sich oft mühsam und verwirrend. Der jQuery-ähnliche Kettenstil zum Ausdruck von Testlogik ist umständlich und entspricht nicht der Komponentenarchitektur von React. Sogar scheinbar lesbarer Code wie diesen mit Enzym kann übermäßig ausführlich werden:

 erwarten (screen.find (". view").
erwarten (screen.find ("h3"). text ()). toequal ("Technologies:");
erwarten (screen.find ("ul"). Kinder ()). to.have.lengthof (4);
erwarten (screen.contains ([
  // ...
])). an.equal (wahr);
erwarten (screen.find ("button"). text ()). toequal ("zurück");
erwarten (screen.find ("button"). hasclass ("klein")). an.equal (true);

Dies entspricht einer relativ einfachen Dom -Struktur:

<div classname="view technologies">
  <h3 id="Technologien">Technologien:</h3>
  <ul>
<li>JavaScript</li>
<li> Reactjs</li>
<li> Nodejs</li>
<li> Webpack</li>
</ul>
  <button classname="small">Zurück</button>
</div>

Das Testen komplexerer Komponenten verstärkt diese Probleme und macht den Prozess noch unhandlicher. Die Trennung zwischen den Prinzipien von React zur Erzeugung von HTML und dem Testansatz führt zu ineffizienten und schwer zu mainten Tests. Eine einfache JavaScript-Verkettung reicht für langfristige Wartbarkeit nicht aus.

Es treten zwei wichtige Probleme auf:

• Komponentenspezifischer Testansatz: So schreiben Sie effektiv auf das Komponentenverhalten zugeschnittene Tests.
• Minimierung der Redundanz: So beseitigen Sie unnötigen Code und verbessern Sie die Lesbarkeit der Tests.

Lassen Sie uns diese ansprechen, bevor wir praktische Lösungen erkunden.

Ein fokussierter Ansatz zum Reagieren von Komponententests

Betrachten Sie eine grundlegende React -Komponente:

 Funktion Willkommen (Requisiten) {
  zurückkehren<h1 id="Hallo-props-name"> Hallo, {props.name}</h1> ;
}

Diese Funktion akzeptiert props und gibt einen DOM -Knoten mit JSX zurück. Da Komponenten im Wesentlichen Funktionen sind, beinhaltet das Testen mit der Überprüfung des Funktionsverhaltens: Wie Argumente das zurückgegebene Ergebnis beeinflussen. Für React -Komponenten führt dies zum Einrichten von props und zur Validierung des gerenderten DOM. Benutzerinteraktionen (Klicks, Mausover usw.), die die Benutzeroberfläche ändern, müssen ebenfalls programmatisch ausgelöst werden.

Verbesserung der Testerlesbarkeit: Das Muster für das ARMIM-Act-Assert

Klare, lesbare Tests sind entscheidend. Dies wird durch kurze Formulierungen und konsistente Struktur erreicht. Das AAA-Muster (arrang-act-Assert (AAA) ist ideal:

1. Anordnen: Bereiten Sie die Komponentenrequisiten vor.
2. Act: Rendern Sie die Komponente und auslösen Benutzerinteraktionen.
3. ASSERT: Überprüfen Sie die erwarteten Ergebnisse basierend auf dem Markup der Komponente.

Beispiel:

 it ("sollte auf eine große Schaltfläche klicken", () => {
  // Arrangieren
  props.size = "groß";

  // Akt
  const component = montage (send);
  Simulate (Komponente, {Typ: "klicken"});

  // Assert
  Erwarten Sie (Komponente, "Klasse haben", "geklickt");
});

Für einfachere Tests können Phasen kombiniert werden:

 it ("sollte mit benutzerdefiniertem Text rendern", () => {
  Erwarten (senden, wenn "montiert", "Text haben", "senden");
});

Verbesserung der aktuellen Testpraktiken

Die vorherigen Beispiele sind zwar konzeptionell solide, aber mit Standardwerkzeugen nicht leicht zu erreichen. Betrachten Sie diesen häufigeren Ansatz:

 it ("sollte die Technologienansicht anzeigen", () => {
  const container = document.createelement ("div");
  document.body.Appendchild (Container);

  act (() => {
    Reactdom.render (<profilecard></profilecard> , Behälter);
  });

  const button = container.querySelector ("button");

  act (() => {
    button.dispatchEvent (neues Fenster.
  });

  const details = container.querySelector (". Details");

  erwarten (details.classlist.contains ("Technologies")). tobe (true);
});

Vergleichen Sie dies mit einer abstrakteren Version:

 it ("sollte die Technologienansicht anzeigen", () => {
  const component = montage (<profilecard></profilecard> );

  Simulate (Komponente, {Typ: "Klicken", Ziel: "Schaltfläche"});

  erwarten (Komponente, "für Test -ID gefragt", "Details", "Klasse haben", "Technologies");
});

Dies ist sauberer und lesbarer. Diese Abstraktionsniveau ist mit Unerwartesjs erreichbar.

Testen mit Unerwartes

UnerwartesJs ist eine erweiterbare Assertion -Bibliothek, die mit verschiedenen Test -Frameworks kompatibel ist. Das Plugin -System und die Syntax vereinfachen die React -Komponenten -Tests. Wir werden uns auf die Verwendung und Beispiele konzentrieren, anstatt uns tief in die inneren Arbeiten von Unerwartesworfwartes zu befassen.

Beispiel: Eine Profilkartenkomponente

Wir testen eine ProfileCard -Komponente (Code für Kürze weggelassen, jedoch im referenzierten Github -Repository verfügbar).

Einrichten des Projekts

Um mitzumachen, klonen Sie das Github -Repository und befolgen Sie die Anweisungen, um das Projekt einzurichten und die Tests auszuführen.

Komponententests

Die Tests (in src/components/ProfileCard/ProfileCard.test.js ) verwenden das AAA -Muster:

1. Prop -Setup: beforeEach stellt Standard -Requisiten ein.

 vorab (() => {
  props = {
    Daten: {
      Name: "Justin Case",
      Beiträge: 45,
      CreationDate: "01.01.2021",
    },
  };
});

2. Spezifische Testfälle: Beispiele sind Testen für das Symbol "Online", Biotext, die Technologienansicht (mit und ohne Daten), Standortanzeige, Rückruffunktionsausführung und Rendern mit Standardrequisiten. Jeder Testfall zeigt deutlich das ordnungsgemäße Act-Assert-Muster. (Detaillierte Testfälle sind für Kürze weggelassen, jedoch im Github -Repo verfügbar).

3. Ausführende Tests: Alle Tests werden mit yarn test ausgeführt.

Abschluss

Dieses Beispiel zeigt einen effektiveren Ansatz für die Reaktionskomponentenprüfung. Indem Sie Komponenten als Funktionen betrachten und das AAA -Muster verwenden, können Sie wartbare und lesbare Tests erstellen. Die Wahl der Testbibliothek sollte sich an der Fähigkeit geleitet werden, die Rendering von Komponenten und DOM -Vergleiche effektiv zu verarbeiten. UnerwartesJs ist in dieser Hinsicht ein starker Anwärter. Entdecken Sie das bereitgestellte Github -Repository für ein vollständiges Verständnis und weitere Experimente.

Das obige ist der detaillierte Inhalt vonReagieren Sie Komponententests für Menschen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!