Dieser Artikel ist für den EDOCODE-Adventskalender 2024, veröffentlicht am 16. Dezember 2024.
Der vorherige Artikel wurde von Taiji Yamada geschrieben, einem Produktmanager bei EDOCODE: Automated Email System Using Notion Webhooks and the No-Code Tool „Make“ (Der Artikel ist auf Japanisch).
Schauen Sie sich auch den Wano-Adventskalender unserer Muttergesellschaft an!
Unsere App Gojiberry ist eine Shopify-Umfrage-App, die Händlern hilft, wertvolles Feedback von ihren Kunden zu sammeln.
Von Anfang an haben wir Gojiberry mit testgetriebener Entwicklung (TDD) entwickelt, um sicherzustellen, dass unsere App fehlerfrei ist und wir sicher neue Funktionen veröffentlichen können, ohne bestehende Funktionen zu beeinträchtigen. Diese Grundlage hat es uns ermöglicht, umfangreiche Änderungen, wie die Migration von Create React App (CRA) zu Vite, mit minimaler Unterbrechung vorzunehmen.
Als CRA veraltet war und seine Abhängigkeiten veraltet waren, entschieden wir, dass es an der Zeit war, auf ein modernes Build-Tool zu aktualisieren, das unsere wachsende App besser unterstützen würde. Die große Größe unserer Codebasis erhöhte die Komplexität, aber der Wechsel zu Vite erwies sich als die Mühe wert.
Unser Ziel war die Migration unserer beiden React-Projekte:
Wenn Sie ein Shopify-Shop-Inhaber sind und umsetzbares Kundenfeedback sammeln möchten, probieren Sie Gojiberry noch heute im Shopify App Store aus!
CRA hat uns in der Vergangenheit gute Dienste geleistet, wird aber nicht mehr gepflegt und seine Abhängigkeiten sind veraltet. Dies stellte mehrere Herausforderungen dar:
Eine der größten Verbesserungen in User-Events v14 ist die Anforderung, „await“ für alle Interaktionsmethoden zu verwenden. Dadurch entfällt die Notwendigkeit, Aktionen in „await waitFor“ einzuschließen, wodurch der Testcode sauberer und einfacher zu warten ist.
Vorher (Benutzerereignisse v13):
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyComponent from './MyComponent';
test('updates state on click', async () => {
render(<MyComponent />);
userEvent.click(screen.getByRole('button'));
await waitFor(() => {
expect(screen.getByText('Updated state')).toBeInTheDocument();
});
});
Nach (Benutzerereignisse v14):
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyComponent from './MyComponent';
test('updates state on click', async () => {
render(<MyComponent />);
userEvent.click(screen.getByRole('button'));
await waitFor(() => {
expect(screen.getByText('Updated state')).toBeInTheDocument();
});
});
Diese Änderung vereinfacht Tests, indem die Notwendigkeit entfällt, Statusänderungen explizit mit waitFor zu verwalten. Entwickler müssen nicht mehr darüber nachdenken, wann „await waitFor“ eingebunden werden soll, da die Bibliothek dies automatisch verarbeitet.
Die Verbesserungen in User-Events v14 und Vitest haben viele dieser Probleme behoben und ein saubereres, schnelleres und konsistenteres Entwicklungserlebnis geboten.
Bevor wir uns für Vite entschieden haben, haben wir Next.js und Remix evaluiert. Obwohl es sich bei beiden um leistungsstarke Frameworks handelt, erforderten sie erhebliche Änderungen an unserer Codebasis und Infrastruktur:
Next.js und Remix:
Warum wir uns für Vite entschieden haben:
Durch die Wahl von Vite haben wir die Komplexität der Einführung eines vollwertigen Frameworks vermieden und gleichzeitig die Vorteile eines modernen, leichten Build-Tools genutzt.
Wir sind die Migration systematisch angegangen, da unser Monorepo zwei separate npm-Projekte enthält. So haben wir die Migration durchgeführt:
Beginnen Sie mit dem kleineren Projekt:
Migrationsschritte:
Der Prozess für jedes Projekt folgte diesen Schritten:
Wiederholen Sie den Vorgang für das größere Projekt:
Die Migration von CRA zu Vite hat zusammen mit dem Übergang zu Vitest und User-Events v14 zu erheblichen Verbesserungen unseres Entwicklungsworkflows geführt:
Die Migration hat das Spiel verändert, da sie es uns ermöglicht, schneller zu iterieren und gleichzeitig das Vertrauen in unsere Codebasis aufrechtzuerhalten.
Hier sind einige Erkenntnisse aus unserer Erfahrung:
Die Migration von CRA zu Vite und Vitest hat unseren Arbeitsablauf erheblich verbessert. Wir genießen jetzt schnellere Builds, saubereren Testcode mit User-Events v14 und eine robustere Codebasis dank strengerer TypeScript-Regeln.
Einer der Schlüsselfaktoren, die diesen Übergang reibungsloser machten, war unsere frühe Investition in testgetriebene Entwicklung (TDD). Mit einer umfassenden Testsuite konnten wir sicher massive Änderungen vornehmen, ohne die bestehende Funktionalität zu beeinträchtigen.
Wenn Sie eine ähnliche Migration in Betracht ziehen, hoffen wir, dass unsere Erfahrung wertvolle Erkenntnisse für Ihre Reise liefert.
Morgen, 17. Dezember 2024, wird der Artikel Wechsel von B2C zu B2B: ein Geständnis eines Vermarkters von Amee Xu, einer Produktmarketingmanagerin bei Gojiberry, sein.
Bei der Wano Group stellen wir ein! Wenn Sie interessiert sind, schauen Sie sich bitte unsere offenen Stellen über den untenstehenden Link an:
JOBS | Wano-Gruppe
Das obige ist der detaillierte Inhalt vonErkenntnisse aus der Migration von React CRA & Jest zu Vite & Vitest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
