Migration von der Enzym- zur Reaktionstestbibliothek

InfoQ-Homepage News Migration von der Enzym- zur Reaktionstestbibliothek – Sentry-Fallstudie

2. März 2023 3 Minuten Lesezeit

von

Bruno Couriol

Das Sentry-Engineering-Team berichtete kürzlich in seinem Blog über die Treiber und Erkenntnisse aus der Migration seiner Front-End-Tests von Enzyme zur React Testing Library. Auslöser der Migration war, dass Enzyme neuere Versionen von React nicht unterstützte. Die Migration dauerte etwa 20 Monate und umfasste 17 Ingenieure, die rund 5.000 Tests überprüften.

Die Entwicklungsabteilung von Sentry hat sich mehrfach gegen die Migration ihrer Testbasis auf die React Testing Library (RTL) entschieden, weil es an ausreichenden Vorteilen mangelte. Das Team erinnerte sich:

Wir werfen Dinge nicht einfach weg, weil sie neu sind. Wir bewerten neue Technologien sorgfältig, um zu verstehen, welche Vorteile sie unserem Team bringen. RTL war uns damals bekannt, aber wir hatten keine stichhaltigen Argumente dafür, warum wir es in unsere Codebasis integrieren sollten. Enzyme, die Bibliothek, die wir zum Testen unserer Komponentenbibliothek verwendet haben, erfüllte weiterhin unsere Anforderungen.

Einerseits war Sentry bereits mit einer umfangreichen Migration zu TypeScript beschäftigt, die zusammen mit der regulären Produktarbeit das Engineering-Team beschäftigte.

Andererseits dauerten Enzymtests oft sehr lange und das Team hatte ein starkes Interesse daran, die Testgeschwindigkeit zu verbessern.

(Quelle: Sentrys Technik-Blog)

Ein Proof of Concept zeigte eine Leistungsverbesserung von 12 %, was als unzureichend erachtet wurde, um ein weiteres langes Migrationsprojekt in Angriff zu nehmen. Der Proof of Concept bewies jedoch, dass RTL erkennbare Vorteile gegenüber Enzyme hatte. Wie das Team berichtet, hat Enzyme die Barrierefreiheit nicht getestet, die Testumgebung nicht automatisch bereinigt und oft direkt auf die Komponente im Teststatus zugegriffen. Im Gegensatz dazu ist RTL näher am Integrationstest und strebt danach, Anwendungsfälle aus der Perspektive des Benutzers zu testen. RTL ist insbesondere bestrebt, die Prüfung von Implementierungsdetails zu vermeiden. Implementierungsänderungen sollten einen Test nur dann zum Scheitern bringen, wenn sie tatsächlich einen Fehler verursacht haben.

Die Kompromissanalyse änderte sich, nachdem Sentry auf TypeScript migriert und mit dem Upgrade auf React 17 (einschließlich React Hooks) begonnen wurde. Das Team erinnert sich:

Die [RTL]-Migration erregte noch nicht viel Aufmerksamkeit, bis wir an der Aktualisierung von React auf Version 17 arbeiteten. Das React-Kernteam hatte die Interna der Bibliothek komplett neu geschrieben und Enzyme nutzte direkt eine Reihe interner React-Funktionen.[…] Enzyme tat dies nicht funktionieren zu 100 % mit dieser neuen Version von React, aber es gab einen Adapter auf dem Markt, der dieses Problem umging, und den haben wir verwendet. Allerdings würde diese Lösung auf lange Sicht nicht funktionieren, da React 18 eine komplette Neufassung erfordern würde, was angesichts der Tatsache, dass Airbnb die Unterstützung für Enzyme eingestellt hatte, unwahrscheinlich war.[…] RTL verlässt sich nicht auf die Interna von React. und würde mit React 18 weiterhin genauso funktionieren wie mit 16 und 17.

Sobald grünes Licht gegeben wurde, verlagerte sich der Fokus auf die Minimierung der Risiken des Migrationsprojekts (technische Schätzungen unter verschiedenen Hypothesen, iterativer Ansatz vs. Big-Bang-Migration, Fortschrittsverfolgung, RTL-Schulung, Bekanntmachung von Best Practices, tägliche Codeüberprüfungen und mehr). ).

Die Migration war nach 18 Monaten abgeschlossen (gegenüber geschätzten 14 Monaten). Dadurch konnte das Team veraltete Tests entfernen, die Zugänglichkeit verbessern – ein zuvor übersehener Aspekt – und Tests basierend auf Anwendungsfällen statt auf Implementierungsdetails schreiben.

Das Team erläuterte unerwartete Leistungsprobleme, die bei der buchstabengetreuen Befolgung einiger RTL-Empfehlungen auftraten (z. B. sollten Sie zusätzlich zur Verspottung von Web-APIs den Benutzer so weit und so realistisch wie möglich verspotten). Obwohl es keine dramatischen Verbesserungen bei der Testleistung gab (der Hauptproblempunkt, der das Interesse am ersten Proof of Concept weckte), zog das Team eine positive Schlussfolgerung:

Obwohl sich die Leistung unserer Tests nicht wie erhofft verbessert hat, hat die Einführung der Bibliothek viele andere Vorteile mit sich gebracht, beispielsweise Tests, die nicht mehr auf Implementierungsdetails angewiesen sind, sondern stattdessen testen, was der Benutzer sieht und mit ihm interagiert. Und letztendlich kommt es darauf an.

Im Originalartikel diskutiert das Sentry-Team interessante technische Details, begleitet von quantitativen Daten und qualitativen Illustrationen, die für andere Ingenieurteams von Interesse sein könnten. Interessierte Entwickler können hier weitere Informationen finden.

Die React Testing Library gehört zu einer Reihe von Bibliotheken zum Testen von Benutzeroberflächen (z. B. DOM Testing Library, Vue Testing Library, Svelte Testing Library, Puppeteer Testing Library) mit einer ähnlichen Antriebsphilosophie:

Sie möchten, dass Ihre Testbasis auf lange Sicht wartbar ist, damit Umgestaltungen Ihrer Komponenten (Änderungen an der Implementierung, aber nicht an der Funktionalität) Ihre Tests nicht beeinträchtigen und Sie und Ihr Team ausbremsen. Die DOM-Testbibliothek [stellt Dienstprogramme bereit, um] das DOM auf eine Art und Weise nach Knoten abzufragen, die der Art und Weise ähnelt, wie der Benutzer Elemente auf der Seite findet […] Je mehr Ihre Tests der Art und Weise ähneln, wie Ihre Software verwendet wird, desto mehr Vertrauen können sie Ihnen geben .

Präsentiert von: Michal Svec – Lead Solutions Engineer bei Apollo GraphQL

Sichern Sie sich Ihren Platz

Das Schreiben für InfoQ hat viele Türen geöffnet und die Karrierechancen erhöht Für mich. Ich konnte mich intensiv mit Experten und Vordenkern austauschen, um mehr über die von mir behandelten Themen zu erfahren. Und ich kann meine Erkenntnisse auch an die breitere Tech-Community weitergeben und verstehen, wie die Technologien in der realen Welt eingesetzt werden.

Ich habe das Mitwirkendenprogramm von InfoQ Anfang dieses Jahres entdeckt und es seitdem genossen! Das Peer-to-Peer-Review-System von InfoQ bietet mir nicht nur eine Plattform, auf der ich meine Erkenntnisse mit einer globalen Community von Softwareentwicklern teilen kann, sondern hat auch mein Schreiben erheblich verbessert . Wenn Sie nach einem Ort suchen, an dem Sie Ihr Software-Know-how teilen können, beginnen Sie mit der Mitarbeit bei InfoQ.

Ich habe angefangen, Nachrichten für die InfoQ .NET-Warteschlange zu schreiben, um auf dem neuesten Stand der Technik zu bleiben, aber ich habe so viel mehr daraus gemacht. Ich habe sachkundige Leute kennengelernt, weltweite Sichtbarkeit erlangt und meine Schreibfähigkeiten verbessert.

Redakteur für InfoQ zu werden war eine der besten Entscheidungen meiner Karriere . Es hat mich herausgefordert und mir in vielerlei Hinsicht geholfen, zu wachsen . Wir würden uns über mehr Leute freuentrete unserem Team bei.

InfoQ sucht einen Chefredakteur in Vollzeit dem internationalen, stets remote arbeitenden Team von C4Media beizutreten. Entdecken Sie mit uns die innovativsten Technologien unserer Zeit, arbeiten Sie mit den besten Software-Experten der Welt zusammen und helfen Sie mehr als 1,6 Millionen Entwicklerteams bei der Einführung neuer Technologien und Praktiken, die die Grenzen dessen erweitern, was Software und Teams leisten können!

Jeden Dienstag wird eine Zusammenfassung der Inhalte der letzten Woche auf InfoQ verschickt. Treten Sie einer Community von über 250.000 erfahrenen Entwicklern bei. Sehen Sie sich ein Beispiel an

Wir schützen Ihre Privatsphäre.

Sie müssen ein InfoQ-Konto registrieren oder sich anmelden oder anmelden, um Kommentare zu posten. Aber hinter der Registrierung steckt noch viel mehr.

Holen Sie das Beste aus dem InfoQ-Erlebnis heraus.

Zulässiges HTML: a,b,br,blockquote,i,li,pre,u,ul,p

Zulässiges HTML: a,b,br,blockquote,i,li,pre,u,ul,p

Zulässiges HTML: a,b,br,blockquote,i,li,pre,u,ul,p