React component-basierte Entwicklung und DOM-Tests Monorepo
Willkommen zum React-Komponenten-basierten Entwicklungs- und DOM-Testmonorepo! Dieses Repository enthält alle Code und Beispiele für einen umfassenden Vortrag über die Erstellung von React-Anwendungen mithilfe der Testentwicklung (TDD) und DOM-Tests. Hier ist ein Link zum Gespräch selbst. Der Monorepo wurde mit PNPM und Turborepo organisiert, um die Paketverwaltung zu rationalisieren und Prozesse zu erstellen.
Wenn Sie mit dem Konzept eines Monorepo nicht vertraut sind, ist es ein einzelnes Repository, das mehrere Projekte enthält. In diesem Fall enthält der Monorepo eine gemeinsame UI -Bibliothek und einige React -Anwendungen. Die gemeinsame UI -Bibliothek enthält wiederverwendbare und zugängliche React -Komponenten sowie ihre Tests und Geschichten. Die React -Anwendung zeigt die Verwendung und Integration von Komponenten. Die nächste Anwendung von.Js zeigt die Leistungsfähigkeit der Zusammensetzung bei der modalen Komponente der mantinen UI -Bibliothek.
Sie können hier mehr über Monorepos lesen.
Überblick
Das Hauptziel dieses Monorepo ist es, Best Practices für den Aufbau wiederverwendbarer und zugänglicher React -Komponenten zu demonstrieren und sie mithilfe von Tools wie React Testing Library und Storybook effektiv zu testen. Darüber hinaus zeigt es die Verwendung von Mock Service Worker, um externe Abhängigkeiten in Tests zu verarbeiten und das Backend-for-Frontend-Muster (BFF) in Aktion zu veranschaulichen. Der Vortrag ist auf ein Publikum mit einer Mischung aus Front-End- und Back-End-Erfahrung zugeschnitten, wobei die Kraft der Komposition bei React betont wird und wie sie sowohl für die Entwicklung als auch für die Tests von Komponenten gilt.
Letztendlich sehen wir, wie wir diese Schnittstelle erstellen und testen können:
Inhalt
Der Monorepo ist wie folgt strukturiert:
Apps
-
frontend : Eine React -Anwendung, die mit React -App erstellt wurde, um die Verwendung und Integration von Komponenten zu demonstrieren. -
mantine-example : Eine nächste Anwendung, die die Leistung der Zusammensetzung im Reagieren mit der Modalkomponente der Mantinen-UI-Bibliothek demonstriert. Diese App wird als Einführung in den Vortrag verwendet, wobei die Vorteile der Zusammensetzung beim Aufbau und beim Testen von Reaktionskomponenten hervorgehoben werden.
Pakete
-
ui : Ein Beispiel für eine gemeinsame UI -Bibliothek mit wiederverwendbaren und zugänglichen React -Komponenten sowie deren Tests und Geschichten. -
types : Eine freigegebene Bibliothek, die Typ -Skriptypen enthält, die von den anderen Paketen verwendet werden. -
mocks : Eine gemeinsame Bibliothek mit Scheindaten, die von den anderen Paketen verwendet werden.
Erste Schritte
Sie müssen PNPM global installieren, um den Monorepo auszuführen.
Die Version von PNPM, die bei der Entwicklung dieses Monorepo verwendet wird, ist 8.2.0 und Knotenversion 18.16.0 .
Die Version des installierten Storybooks hat Probleme, wenn frühere Versionen von Knoten ausgeführt werden. Bitte verwenden Sie mindestens Knotenversion 18.16.0 .
Führen Sie den folgenden Befehl aus, um die Abhängigkeiten für den Monorepo zu installieren:
Der Monorepo kann mit den folgenden Befehlen ausgeführt werden:
-
pnpm run dev : Läuft den Monorepo im Entwicklungsmodus. -
pnpm run build : Erstellt das Monorepo für die Produktion. -
pnpm run start : FIRT den Monorepo im Produktionsmodus. -
pnpm run test : Führen Sie die Monorepo -Tests aus.
Um das Storybook auszuführen, führen Sie den folgenden Befehl aus:
Auslauftests
Sie können entweder alle Tests für das Repo ausführen oder Tests für ein bestimmtes Paket ausführen.
Führen Sie den folgenden Befehl aus, um alle Tests auszuführen:
Um Tests für ein bestimmtes Paket, CD in das Verzeichnis auszuführen und den folgenden Befehl auszuführen:
Führen Sie den folgenden Befehl aus, um die Anwendungstests auszuführen:
cd apps/frontend
pnpm run test -- --watch
Führen Sie den folgenden Befehl aus, um die Komponententests auszuführen:
cd packages/ui
pnpm run test -- --watch
Ich hoffe, Sie finden dieses Monorepo nützlich, um die Best Practices für React-Komponentenentwicklung und DOM-Tests zu verstehen. Fühlen Sie sich frei, den Code zu erkunden, die Beispiele auszuführen und zum Repository beizutragen. Happy Coding!
Zusätzliche Notizen
Eine vorgeschlagene API -Architektur für ein modernes Frontend ist das Backend für Frontend -Muster:
Hier können Sie mehr darüber lesen.
KI erzeugte Notizen für den Vortrag
Hier finden Sie eine Zusammenfassung und wichtige Erkenntnisse aus der Präsentation:
Zusammenfassung: Paul Hammond, Direktor bei Pack Software, präsentiert eine Komponentenentwicklung mit React- und DOM-Tests, die Themen wie Testentwicklung, Zugänglichkeit und moderne Front-End-Praktiken abdecken.
Ideen:
- Komponentenorientierte Entwicklung hilft dabei, wiederverwendbare, konsistente UI-Elemente aufzubauen
- Testen gegen Verhalten und Implementierungsdetails liefert mehr Wert
- Die Zugänglichkeit sollte eine wichtige Überlegung bei der Erstellung von Front-End-Komponenten sein
- Tools wie Storybook ermöglichen eine interaktive Entwicklung und Dokumentation von Komponenten
- Mock Service Worker ermöglicht die Verspottung von API -Forderungen sowohl Tests als auch Entwicklung
- Backend for Frontend (BFF) -Muster kann die Front-End-Architektur vereinfachen
- Gute Tests geben Vertrauen, Änderungen im Laufe der Zeit vorzunehmen
- React Testing Library fördert das Testen aus der Sicht eines Benutzers
- TDD kann zu einem wartbaren und flexibleren Code führen
- Komponenten ermöglichen eine einfachere Anpassung und Wiederverwendung
Einsichten:
- Das Testverhalten anstelle der Implementierung ermöglicht eine leichtere Refactoring und Wartung
- Zugrunde Selektoren in Tests können die allgemeine Zugänglichkeit der Anwendungen verbessern
- Komponentenforscher wie Storybook ermöglichen die Zusammenarbeit zwischen Designern und Entwicklern
- Das Verspotten auf Netzwerkebene ermöglicht konsistente Mocks über Tests und Entwicklung hinweg
- TDD kann zu schnelleren Rückkopplungsschleifen und höherer Vertrauen in Codeänderungen führen
- Die Konzentration auf die Lieferungsergebnisse kann dazu beitragen, Teams davon zu überzeugen, TDD -Praktiken zu übernehmen
- Die Verwendung des DOM zum Testen nachahmt die echte Benutzerinteraktionen nachzuahmen
- Die Trennung von UI -Bedenken aus der Geschäftslogik verbessert die gesamte Anwendungsarchitektur
- Durch kontinuierliche Lieferpraktiken wie "Walking Skelette" können das Projekt -Setup verbessert werden
- Balancing Unit -Tests mit Integration/E2E -Tests deckt verschiedene Testszenarien ab
ZITATE:
- "Der Zweck guter Tests ist es, uns das Vertrauen zu geben, im Laufe der Zeit Änderungen vorzunehmen."
- "Wenn Tests bestehen, sollten wir uns sicher genug fühlen, um direkt zur Produktion zu gehen."
- "Moderne Frontenden werden mit Komponenten und nicht mit Seiten gebaut."
- "Komponentengetriebene Entwicklung hilft uns, wiederverwendbare Komponenten zu erstellen, die die Duplikation verringern."
- "Wir möchten sehen, wie wir im Laufe der Zeit Änderungen vornehmen, wie Tests uns helfen, Änderungen im Laufe der Zeit vorzunehmen."
- "Gute Tests sollten uns das Vertrauen geben, im Laufe der Zeit Änderungen vorzunehmen."
- "Die Freude an TDD ist der richtige Weg, es zu sagen, weil es eine so befreiende Erfahrung ist."
- "Ich habe seit 10 Jahren nicht mehr zu spät gearbeitet, und weil ich es nicht brauche, und Sie sollten es nicht brauchen, wenn Sie in einem Test-ersten-Stil schreiben."
- "Wenn es um Tests geht, ist eines der Dinge, die ich normalerweise tue, ... Ich würde den Zweig eines Menschen nach unten ziehen, die Tests durchführen, absichtlich etwas versagen und die Tests sehen."
- "Ich muss Vertrauen haben, so wie es funktioniert."
GEWOHNHEITEN:
- Schreiben Sie Tests vor dem Implementierungscode, um die ordnungsgemäße Testabdeckung sicherzustellen
- Verwenden Sie zugängliche Selektoren in Tests, um die Gesamterfolgsgrad zu verbessern
- Arbeiten Sie eng mit Designern zusammen, die Tools wie Storybook verwenden
- Refactor Code mit einer starken Testsuite zuversichtlich
- Führen Sie Tests im Uhrenmodus für sofortige Feedback während der Entwicklung aus
- Verwenden Sie Mock -Service -Mitarbeiter, um die API -Antworten in Tests zu simulieren
- Bauen Sie wandeln
- Überprüfen Sie die Pull -Anfragen, indem Sie den Code absichtlich durchbrechen, um die Testabdeckung zu überprüfen
- Priorisieren Sie das Testverhalten gegenüber Implementierungsdetails in Front-End-Tests
- Lernen Sie kontinuierlich Best Practices in der Front-End-Entwicklung und wenden Sie sie an
Fakten:
- Die React -Testbibliothek ist auf der DOM -Testbibliothek aufgebaut
- Scherz verwendet eine In-Memory-Dom-Darstellung, die als JSDOM bezeichnet wird, um Tests zu testen
- Mock Service Worker kann API -Anrufe auf Netzwerkebene abfangen und verspotteten
- Storybook ist ein Werkzeug, um UI -Komponenten isoliert zu entwickeln
- Die Zugänglichkeit betrifft 30-40% der Bevölkerung in irgendeiner Form
- Komponentengetriebene Entwicklung ist Framework-Agnostic und gilt für Reaktionen, Vue, Winkel usw.
- Die testgetriebene Entwicklung kann zu weniger Fehler und mehr wartbaren Code führen
- Das Backend für Frontend-Muster kann die Performance Front-End verbessern und die Architektur vereinfachen
- Cypress und Dramatiker sind Tools für End-to-End-Tests von Webanwendungen
- Mutationstests können verwendet werden, um die Qualität von Testsuiten zu überprüfen
Referenzen:
- Reagieren Sie die Testbibliothek
- Storybook
- Mock Service Worker
- Scherz
- Zypresse
- Dramatiker
- Redux -Toolkit
- Reaktieren Sie die Abfrage
- Testen von JavaScript (von Kent C. Dodds)
- W3C Web Accessibility Initiative (WAI)
- Ian Coopers Gespräch "TDD: Wo ist alles schief gelaufen?"
- GitHub Primer (UI -Komponentenbibliothek)
- Bibliotheksspielplatz testen
- Backend für Frontend (BFF) Muster
TakeAway: Test-gesteuerte Entwicklung mit der React-Testbibliothek ermöglicht einen zuversichtlichen, startbaren Front-End-Code, indem sie sich auf Verhalten und Zugänglichkeit konzentriert.
Empfehlungen:
- Übernehmen Sie eine Komponentenentwicklung, um die Wiederverwendbarkeit und Konsistenz in Front-End-Anwendungen zu verbessern
- Verwenden Sie Storybook oder ähnliche Tools, um UI -Komponenten zu entwickeln und zu dokumentieren
- Implementieren Sie testgesteuerte Entwicklungspraktiken für Front-End-Code, um die Qualität zu verbessern
- Konzentrieren Sie sich eher auf Testverhalten als auf Implementierungsdetails, um widerstandsfähigere Tests
- Verwenden Sie einen Mock Service Worker für eine konsistente API -Verpackung in Tests und Entwicklung
- Erwägen Sie die Implementierung eines Backend für Frontend-Muster, um die Front-End-Architektur zu vereinfachen
- Priorisieren Sie die Barrierefreiheit in der Konstruktion und Prüfung von Komponenten von Anfang an
- Verwenden Sie die zugänglichen Selektoren der React -Testbibliothek, um die allgemeine Anwendungszugänglichkeit zu verbessern
- Implementieren Sie kontinuierliche Integrations- und Lieferpraktiken frühzeitig in Projekten
- Balance Unit-Tests mit Integration und End-to-End-Tests für umfassende Abdeckung
