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











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

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

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

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

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

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

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

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