Inhaltsverzeichnis
Die Herausforderung: mühsame und verwirrende Tests
Technologien:
Ein fokussierter Ansatz zum Reagieren von Komponententests
Hallo, {props.name}
Verbesserung der Testerlesbarkeit: Das Muster für das ARMIM-Act-Assert
Verbesserung der aktuellen Testpraktiken
Testen mit Unerwartes
Beispiel: Eine Profilkartenkomponente
Einrichten des Projekts
Komponententests
Abschluss
Heim Web-Frontend CSS-Tutorial Reagieren Sie Komponententests für Menschen

Reagieren Sie Komponententests für Menschen

Mar 27, 2025 am 11:48 AM

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);
Nach dem Login kopieren

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>
Nach dem Login kopieren

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> ;
}
Nach dem Login kopieren

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");
});
Nach dem Login kopieren

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

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

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);
});
Nach dem Login kopieren

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");
});
Nach dem Login kopieren

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",
    },
  };
});
Nach dem Login kopieren
  1. 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).

  2. 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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial
1657
14
PHP-Tutorial
1257
29
C#-Tutorial
1229
24
Google -Schriftarten variable Schriftarten Google -Schriftarten variable Schriftarten Apr 09, 2025 am 10:42 AM

Ich sehe, dass Google -Schriftarten ein neues Design (Tweet) ausgelöst haben. Im Vergleich zur letzten großen Neugestaltung fühlt sich dies viel iterativer an. Ich kann den Unterschied kaum erkennen

So erstellen Sie einen animierten Countdown -Timer mit HTML, CSS und JavaScript So erstellen Sie einen animierten Countdown -Timer mit HTML, CSS und JavaScript Apr 11, 2025 am 11:29 AM

Haben Sie jemals einen Countdown -Timer für ein Projekt benötigt? Für so etwas ist es möglicherweise natürlich, nach einem Plugin zu greifen, aber es ist tatsächlich viel mehr

HTML -Datenattributehandbuch HTML -Datenattributehandbuch Apr 11, 2025 am 11:50 AM

Alles, was Sie schon immer über Datenattribute in HTML, CSS und JavaScript wissen wollten.

Warum werden die lila abgeschnittenen Bereiche im Flex -Layout fälschlicherweise als 'Überlaufraum' betrachtet? Warum werden die lila abgeschnittenen Bereiche im Flex -Layout fälschlicherweise als 'Überlaufraum' betrachtet? Apr 05, 2025 pm 05:51 PM

Fragen zu lila Schrägstrichen in Flex -Layouts Bei der Verwendung von Flex -Layouts können Sie auf einige verwirrende Phänomene stoßen, wie beispielsweise in den Entwicklerwerkzeugen (D ...

Wie wähle ich ein untergeordnetes Element mit dem erstklassigen Namen über CSS aus? Wie wähle ich ein untergeordnetes Element mit dem erstklassigen Namen über CSS aus? Apr 05, 2025 pm 11:24 PM

Wenn die Anzahl der Elemente nicht festgelegt ist, wählen Sie das erste untergeordnete Element des angegebenen Klassennamens über CSS aus. Bei der Verarbeitung der HTML -Struktur begegnen Sie häufig auf verschiedene Elemente ...

Wie wir eine statische Site erstellt haben, die Tartan -Muster in SVG erzeugt Wie wir eine statische Site erstellt haben, die Tartan -Muster in SVG erzeugt Apr 09, 2025 am 11:29 AM

Tartan ist ein gemustertes Tuch, das normalerweise mit Schottland verbunden ist, insbesondere mit ihren modischen Kilts. Auf Tartanify.com haben wir über 5.000 Tartan gesammelt

Ein Beweis für das Konzept, um Sass schneller zu machen Ein Beweis für das Konzept, um Sass schneller zu machen Apr 16, 2025 am 10:38 AM

Zu Beginn eines neuen Projekts erfolgt die SASS -Zusammenstellung im Blinzeln eines Auges. Dies fühlt sich gut an, besonders wenn es mit Browsersync kombiniert ist, das nachlädt

Warum können benutzerdefinierte Stilblätter auf lokalen Webseiten in Safari, nicht jedoch auf Baidu -Seiten wirksam? Warum können benutzerdefinierte Stilblätter auf lokalen Webseiten in Safari, nicht jedoch auf Baidu -Seiten wirksam? Apr 05, 2025 pm 05:15 PM

Diskussion über die Verwendung benutzerdefinierter Stylesheets in Safari heute Wir werden eine Frage zur Anwendung von benutzerdefinierten Stylesheets für Safari Browser diskutieren. Front-End-Anfänger ...

See all articles