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:
- Anordnen: Bereiten Sie die Komponentenrequisiten vor.
- Act: Rendern Sie die Komponente und auslösen Benutzerinteraktionen.
- 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:
- Prop -Setup:
beforeEach
stellt Standard -Requisiten ein.
vorab (() => { props = { Daten: { Name: "Justin Case", Beiträge: 45, CreationDate: "01.01.2021", }, }; });
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).
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!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

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

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen











Versuchen wir, hier einen Begriff zu prägen: "Statischer Formanbieter". Sie bringen Ihre HTML

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

In der Zusammenfassung der Plattformnachrichten in dieser Woche stellt Chrome ein neues Attribut für das Laden, Zugänglichkeitspezifikationen für Webentwickler und die BBC -Bewegungen ein

Ich schaue mir das HTML -Element zum ersten Mal an. Ich habe es für eine Weile dessen bewusst, aber Haven ' Es wurde es noch nicht für einen Dreh genommen. Es hat einige ziemlich cool und

Buy or Build ist eine klassische Technologiedebatte. Das Aufbau von Dingen selbst ist vielleicht billiger, weil Ihre Kreditkartenrechnung keine Werbebuchung gibt, aber

In der Roundup in dieser Woche, einem praktischen Lesezeichen für die Inspektion von Typografie, unter Verwendung dessen, wie sich JavaScript -Module gegenseitig importieren, sowie Facebook ' s.

Für eine Weile war iTunes der große Hund im Podcasting. Wenn Sie also "Abonnieren Sie Podcast" verlinkt haben, um zu mögen:

Es gibt eine Menge Analyseplattformen, mit denen Sie Besucher- und Nutzungsdaten auf Ihren Websites verfolgen können. Vielleicht vor allem Google Analytics, das weit verbreitet ist
