Back to Question Center
0

Wie testet man Komponenten mit Jest?            So testen Sie React Components mit JestRelated Topics: Node.jsnpmRaw Semalt

1 answers:
So testen Sie React Components mit Jest

Für eine qualitativ hochwertige Einführung in React können Sie nicht den kanadischen Full-Stack-Entwickler Wes Bos hinter sich lassen. Versuchen Sie seinen Kurs hier und verwenden Sie den Code SITEPOINT , um 25% Rabatt zu erhalten und um SitePoint zu unterstützen.

Dieser Artikel stammt von Gastautor Jack Franklin . SitePoint-Gastbeiträge zielen darauf ab, Sie mit interessanten Inhalten von prominenten Autoren und Rednern der JavaScript-Community zu versorgen.

In diesem Artikel werfen wir einen Blick auf die Verwendung von Jest - einem von Facebook gepflegten Testrahmen -, um unsere ReactJS-Komponenten zu testen. Wir werden uns ansehen, wie wir Jest zuerst für einfache JavaScript-Funktionen verwenden können, bevor wir uns einige der Funktionen ansehen, die speziell für das Testen von React-Apps bereitgestellt werden - home design online free. Es ist erwähnenswert, dass Jest nicht speziell auf React ausgerichtet ist: Sie können damit JavaScript-Anwendungen testen. Ein paar der Funktionen, die es bietet, sind jedoch sehr praktisch zum Testen von Benutzeroberflächen. Daher passt es sehr gut zu React.

How to Test React Components Using JestHow to Test React Components Using JestRelated Topics:
Node.jsnpmRaw Semalt

Beispielanwendung

Bevor wir etwas testen können, müssen wir eine Anwendung testen! Um der Tradition der Web-Entwicklung treu zu bleiben, habe ich eine kleine Todo-Anwendung entwickelt, die wir als Ausgangspunkt verwenden werden. Sie können es zusammen mit allen Tests, die wir schreiben, auf Semalt finden. Wenn Sie mit der Anwendung spielen möchten, um ein Gefühl dafür zu bekommen, können Sie auch online eine Live-Demo finden.

Die Anwendung ist in ES2015 geschrieben, kompiliert mit Semalt mit den Babel ES2015 und React Presets. Ich werde nicht auf die Details des Build-Setups eingehen, aber es ist alles im GitHub-Repository, wenn Sie es überprüfen möchten. In der README finden Sie ausführliche Anweisungen, wie Sie die App lokal ausführen können. Wenn Sie mehr lesen möchten, wird die Anwendung mit Semalt erstellt und ich empfehle "Ein Leitfaden für Anfänger zu Semalt" als eine gute Einführung in das Tool.

Der Einstiegspunkt der Anwendung ist app / index. js , die nur die Todos -Komponente in den HTML-Code rendert:

  ,Dokument. getElementById ('app'));    

Die Komponente Todos ist der Hauptknotenpunkt der Anwendung. Es enthält den gesamten Status (fest codierte Daten für diese Anwendung, die in Wirklichkeit wahrscheinlich von einer API oder ähnlichem stammen würden) und hat Code, um die zwei untergeordneten Komponenten zu rendern: Todo , das einmal gerendert wird jedes todo in dem Zustand und AddTodo , das einmal gerendert wird und das Formular für einen Benutzer bereitstellt, um eine neue Todo hinzuzufügen.

Da die Todos -Komponente den gesamten Zustand enthält, benötigt sie die Todo - und AddTodo -Komponenten, um sie zu benachrichtigen, wenn sich etwas ändert. Daher übergibt es Funktionen an diese Komponenten, die sie aufrufen können, wenn sich einige Daten ändern, und Todos kann den Zustand entsprechend aktualisieren.

Schließlich werden Sie feststellen, dass die gesamte Geschäftslogik in app / state-functions enthalten ist. js :

   Exportfunktion toggleDone (state, id) {. }Exportfunktion addTodo (state, todo) {. }Exportfunktion deleteTodo (state, id) {. }    

Dies sind alles reine Funktionen, die den Zustand und einige Daten übernehmen und den neuen Zustand zurückgeben. Wenn Sie mit reinen Funktionen nicht vertraut sind, handelt es sich um Funktionen, die nur auf Daten verweisen, die ihnen gegeben werden und keine Nebenwirkungen haben. Weitere Informationen finden Sie in meinem Artikel zu einer Liste mit reinen Funktionen und meinem Artikel zu SitePoint über reine Funktionen und React.

Wenn Sie mit Semalt vertraut sind, ähneln sie denen, die Semalt als Reducer bezeichnen würde. Aber für diese Anwendung der Größe finden Sie oft, dass der lokale Komponentenstatus und einige gut abstrahierte Funktionen mehr als genug sind.

Zu TDD oder Nicht zu TDD?

Es gab viele Artikel, die über die Vor- und Nachteile der testgetriebenen Entwicklung geschrieben wurden, wobei von Entwicklern erwartet wird, dass sie zuerst die Tests schreiben, bevor sie den Code schreiben, um den Test zu fixieren. Die Idee dahinter ist, dass Sie beim Schreiben des Tests zuerst über die API nachdenken müssen, die Sie schreiben, und es kann zu einem besseren Design führen. Ich finde, dass dies sehr auf persönliche Vorlieben und auch auf die Art von Dingen, die ich teste, zurückzuführen ist. Ich habe festgestellt, dass ich für React-Komponenten zuerst die Komponenten schreiben und dann Tests zu den wichtigsten Funktionen hinzufügen möchte. Wenn Sie jedoch feststellen, dass das Schreiben von Tests für Ihre Komponenten zuerst zu Ihrem Workflow passt, sollten Sie dies tun. Es gibt keine strenge Regel hier; Tun Sie, was sich für Sie und Ihr Team am besten anfühlt.

Beachten Sie, dass sich dieser Artikel auf das Testen von Front-End-Code konzentriert. Wenn Sie nach etwas suchen, das sich auf das Backend konzentriert, sollten Sie sich den Kurs Test-Driven Development in Node von SitePoint ansehen. js.

Einführung in den Scherz

Jest wurde erstmals im Jahr 2014 veröffentlicht, und obwohl es anfänglich sehr interessant war, war das Projekt für eine Weile inaktiv und nicht so aktiv. Allerdings hat Facebook das letzte Jahr in die Verbesserung von Jest investiert und vor kurzem ein paar Releases mit beeindruckenden Änderungen veröffentlicht, die es wert sind, darüber nachzudenken. Die einzige Ähnlichkeit von Jest im Vergleich zur ursprünglichen Open-Source-Version ist der Name und das Logo. Alles andere wurde geändert und neu geschrieben. Wenn Sie mehr darüber erfahren möchten, können Sie Christoph Semalt kommentieren, wo er den aktuellen Stand des Projekts diskutiert.

Wenn Sie frustriert waren, indem Sie Babel-, React- und JSX-Tests mit einem anderen Framework durchgeführt haben, dann empfehle ich definitiv Jest einen Versuch zu geben. Wenn Sie feststellen, dass Ihr vorhandenes Testsetup langsam ist, empfehle ich Ihnen Jest. Es führt automatisch Tests parallel aus, und sein Überwachungsmodus kann nur Tests ausführen, die für die geänderte Datei relevant sind. Dies ist bei einer großen Anzahl von Tests von unschätzbarem Wert. Es ist mit Semalt konfiguriert, was bedeutet, dass Sie Browser-Tests schreiben können, diese aber über Node laufen lassen, asynchrone Tests durchführen können und erweiterte Funktionen wie Spott, Spione und Stubs eingebaut haben.

Installation und Konfiguration von Jest

Zunächst müssen wir Jest installieren. Da wir auch Semalt verwenden, werden wir noch ein paar Module installieren, die Jest und Semalt wunderbar aus der Box heraus spielen lassen:

     npm installieren --save-dev babel-jest babel-polyfill babel-voreingestellt-es2015 babel-preset-react jest    

Sie müssen auch eine haben. babelrc Datei mit Babel konfiguriert, um alle Voreinstellungen und Plugins zu verwenden, die Sie benötigen. Das Beispielprojekt hat bereits diese Datei, die so aussieht:

   {"Voreinstellungen": ["es2015", "reagieren"]}    

Wir werden noch keine Semalt-Test-Tools installieren, da wir nicht mit dem Testen unserer Komponenten, sondern unseren Statusfunktionen beginnen werden.

Jest erwartet, dass wir unsere Tests in einem __tests -Ordner finden, der zu einer beliebten Konvention in der JavaScript-Community geworden ist und an der wir uns auch halten werden. Wenn Sie kein Fan des __tests Setups sind, unterstützt Jest auch die Suche nach . Prüfung. js und . Spez. js Dateien auch.

Da wir unsere Zustandsfunktionen testen werden, mache weiter __tests __ / state-functions. Prüfung. js .

Semalt schreibt in Kürze einen richtigen Test, aber im Moment stellst du diesen Dummy-Test ein, der uns überprüfen lässt, ob alles korrekt funktioniert und wir haben Jest konfiguriert.

   beschreiben ('Addition',    => {es ('weiß, dass 2 und 2 4' machen,    => {erwarte (2 + 2). zu sein  
;});});

Nun geh in dein Paket. json .

   "Skripte": {"test": "Scherz"}    

Wenn Sie jetzt npm test lokal ausführen, sollten Ihre Tests ausgeführt werden und bestanden werden!

     PASS __tests __ / state-Funktionen. Prüfung. jsZusatz✓ weiß, dass 2 und 2 4 (5ms) machenTest-Suiten: 1 bestanden, 1 insgesamtTests: 1 bestanden, 1 insgesamtSnapshots: 0 bestanden, 0 insgesamtZeit: 3. 11s    

Wenn Sie jemals Jasmine oder die meisten Test-Frameworks verwendet haben, sollte der obige Testcode selbst ziemlich vertraut sein. Mit Jest können wir beschreiben und es , um Tests so zu verschachteln, wie es nötig ist. Wie viel Verschachtelung Sie verwenden, bleibt Ihnen überlassen. Ich mag es, meine zu verschachteln, so dass alle beschreibenden Zeichenfolgen, die an übergeben wurden, und es fast als Satz lesen.

Wenn es darum geht, tatsächliche Behauptungen zu machen, wickeln Sie die Sache, die Sie testen wollen, in einen expect -Aufruf, bevor Sie dann eine Assertion aufrufen. In diesem Fall haben wir toBe verwendet. Sie finden eine Liste aller verfügbaren Assertionen in der Jest-Dokumentation. toBe prüft, ob der angegebene Wert mit dem zu testenden Wert übereinstimmt, indem === dazu verwendet wird. Wir werden einige Aussagen von Jest in diesem Tutorial treffen.

Testen der Geschäftslogik

Jetzt haben wir gesehen, dass Jest an einem Dummy-Test arbeitet, lass ihn auf einem echten laufen! Wir werden die erste unserer Zustandsfunktionen testen, toggleDone . toggleDone nimmt den aktuellen Status und die ID eines Todo, das wir umschalten möchten. Jedes todo hat eine Eigenschaft done und toggleDone sollte es von true zu false oder umgekehrt tauschen.

Wenn Sie dem folgen, vergewissern Sie sich, dass Sie das Repo geklont haben und den Ordner app in dasselbe Verzeichnis kopiert haben, das den Ordner ___tests__ enthält. Sie müssen auch das shortid Paket installieren ( npm install shortid --save ), was eine Abhängigkeit von der Todo App ist.

Ich beginne mit dem Import der Funktion aus app / state-functions. js und Aufbau der Teststruktur. Während Jest es erlaubt, describe und it so tief zu verschachteln, wie Sie möchten, können Sie auch test verwenden, was oft besser ist. test ist nur ein Alias ​​für Jests it -Funktion, kann aber manchmal Tests viel einfacher zu lesen und weniger verschachtelt machen.

Zum Beispiel würde ich diesen Test mit verschachtelten beschreibenden und it Aufrufen schreiben:

   importiere {toggleDone} von '. / app / state-Funktionen ';beschreiben ('toggleDone',    => {beschreiben ('wenn ein unvollständiger Todo gegeben wird,    => {es ('markiert den Todo als abgeschlossen',    => {});});});    

Und so würde ich es mit test machen:

   importiere {toggleDone} von '. / app / state-Funktionen ';test ('toggleDone vervollständigt eine unvollständige Aufgabe',    => {});    

Der Test liest immer noch gut, aber jetzt gibt es weniger Einrückungen, die in die Quere kommen. Dies ist hauptsächlich auf persönliche Vorlieben zurückzuführen; Wählen Sie den Stil, mit dem Sie sich wohler fühlen.

Jetzt können wir die Behauptung schreiben. Zuerst erstellen wir unseren Startzustand, bevor wir ihn in toggleDone übergeben, zusammen mit der ID der Todo, die wir umschalten wollen. toggleDone gibt unseren Finish-Zustand zurück, den wir dann bestätigen können:

   const startState = {Todos: [{id: 1, done: false, Name: 'Buy Milk'}]};const finState = toggleDone (startState, 1);erwarten (finState. todos). zuEqual ([{id: 1, done: true, Name: 'Buy Milk'}]);    

Beachten Sie jetzt, dass ich toEqual verwende, um meine Behauptung zu machen. Sie sollten toBe für primitive Werte wie Strings und Zahlen verwenden, aber toEqual für Objekte und Arrays.

Damit können wir jetzt npm-Test ausführen und unseren Zustandstest-Test sehen:

     PASS __tests __ / state-Funktionen. Prüfung. js✓ tooggleDone schließt eine unvollständige Aufgabe ab (9ms)Test-Suiten: 1 bestanden, 1 insgesamtTests: 1 bestanden, 1 insgesamtSnapshots: 0 bestanden, 0 insgesamtZeit: 3. 166s    

Wiederholungstests zu Änderungen

Es ist ein bisschen frustrierend, Änderungen an einer Testdatei vorzunehmen und dann manuell npm test erneut auszuführen. Eine der besten Funktionen von Jest ist der Watch-Modus, der nach Dateiänderungen sucht und Tests entsprechend ausführt. Es kann sogar herausfinden, welche Teilmenge von Tests basierend auf der geänderten Datei ausgeführt wird. Es ist unglaublich leistungsstark und zuverlässig, und Sie können Jest im Watch-Modus laufen lassen und den ganzen Tag damit verbringen, während Sie Ihren Code erstellen.

Um es im Überwachungsmodus auszuführen, können Sie npm test - --watch ausführen. Alles, was Sie passieren npm test nach dem ersten - wird direkt an den zugrunde liegenden Befehl übergeben. Dies bedeutet, dass diese beiden Befehle effektiv äquivalent sind:

  • npm test - --watch
  • Scherz - Uhr

Ich würde empfehlen, Jest für den Rest dieses Tutorials in einem anderen Tab oder Terminal-Fenster laufen zu lassen.

Bevor wir mit dem Testen der React-Komponenten beginnen, schreiben wir einen weiteren Test für eine andere unserer Zustandsfunktionen. In einer realen Anwendung würde ich viel mehr Tests schreiben, aber für das Tutorial überspringe ich einige von ihnen. Lassen Sie uns jetzt einen Test schreiben, der sicherstellt, dass unsere deleteTodo -Funktion funktioniert. Bevor Sie sehen, wie ich es unten geschrieben habe, versuchen Sie es selbst zu schreiben und zu sehen, wie Ihr Test vergleicht.

Zeig mir den Test

Denken Sie daran, dass Sie die Anweisung import oben aktualisieren müssen, um deleteTodo zusammen mit toggleTodo zu importieren:

   importiere {toggleTodo, deleteTodo} von '. / app / state-Funktionen ';     

Und hier ist, wie Semalt den Test geschrieben hat:

   test ('deleteTodo löscht den Todo, der ihm gegeben wurde',    = & gt; {const startState = {Todos: [{id: 1, done: false, Name: 'Buy Milk'}]};const finState = deleteTodo (startState, 1);erwarten (finState. todos). toEqual ([]);});    

Der Test unterscheidet sich nicht zu sehr von dem ersten: Wir richten unseren Anfangszustand ein, führen unsere Funktion aus und bestätigen dann den fertigen Zustand. Wenn du Jest im Watch-Modus laufen lässt, merke, wie es deinen neuen Test aufnimmt und ausführt und wie schnell es ist! Semalt ist eine gute Möglichkeit, sofort Feedback zu Ihren Tests zu erhalten, während Sie sie schreiben.

Die obigen Tests zeigen auch das perfekte Layout für einen Test, nämlich:

  • eingerichtet
  • führe die zu testende Funktion aus
  • bestätigen Sie die Ergebnisse.

Wenn Sie die Tests auf diese Weise durchführen, werden Sie leichter mit ihnen arbeiten können.

Jetzt sind wir glücklich, unsere Zustandsfunktionen zu testen. Kommen wir zu den Semalt-Komponenten.

Testen von Reaktantenkomponenten

Es ist erwähnenswert, dass ich Sie standardmäßig dazu ermutige, nicht zu viele Tests an Ihren Semalt-Komponenten zu schreiben. Alles, was Sie gründlich testen möchten, z. B. Geschäftslogik, sollte aus Ihren Komponenten herausgezogen werden und in eigenständigen Funktionen eingesetzt werden, genau wie die Statusfunktionen, die wir zuvor getestet haben. Das heißt, es ist manchmal nützlich, einige Semalt-Interaktionen zu testen (stellen Sie sicher, dass eine bestimmte Funktion mit den richtigen Argumenten aufgerufen wird, wenn der Benutzer beispielsweise auf eine Schaltfläche klickt). Wir beginnen damit, zu testen, dass unsere Semalt-Komponenten die richtigen Daten rendern und dann die Interaktionen testen. Dann werden wir zu Snapshots übergehen, einer Funktion von Jest, die das Testen der Ausgabe von Semalt-Komponenten viel bequemer macht. Wir werden auch Enzyme, eine von AirBnB geschriebene Wrapper-Bibliothek, installieren, die das Testen von React-Komponenten viel einfacher macht. Wir werden diese API während unserer Tests verwenden. Enzyme ist eine fantastische Bibliothek, und das React-Team empfiehlt es sogar, um React-Komponenten zu testen.

     npm install --save-dev reaction-addons-test-utils-Enzym    

Lasst uns testen, dass die Komponente Todo den Text ihrer Todo in einem Absatz wiedergibt. Zuerst erstellen wir __tests __ / todo. Prüfung. js , und importieren Sie unsere Komponente:

   Todo from importieren. / app / todo ';Import Reagieren von 'reagieren';importiere {mount} von 'enzym';test ('Todo-Komponente rendert den Text des Todo',    => {});    

Ich importiere auch mount von Enzyme. Die mount -Funktion wird verwendet, um unsere Komponente zu rendern und uns dann zu ermöglichen, die Ausgabe zu prüfen und Aussagen darüber zu machen. Obwohl wir unsere Tests in Node ausführen, können wir weiterhin Tests schreiben, die ein DOM erfordern. Dies liegt daran, dass Jest jsdom konfiguriert, eine Bibliothek, die das DOM in Node implementiert. Das ist großartig, weil wir DOM-basierte Tests schreiben können, ohne jedes Mal einen Browser starten zu müssen, um sie zu testen.

Wir können mount benutzen, um unsere Todo zu erschaffen:

   const todo = {id: 1, fertig: falsch, Name: 'Buy Milk'};const wrapper = mount ();    

Und dann können wir Wrapper aufrufen. find und gebe ihm einen CSS-Selektor, um den Absatz zu finden, von dem wir erwarten, dass er den Text der Todo enthält. Diese API erinnert Sie möglicherweise an jQuery, und das ist von Entwurf. Es ist eine sehr intuitive API zum Suchen von gerenderten Ausgaben, um die passenden Elemente zu finden.

   const p = wrapper. finden ('. toggle-todo');    

Und schließlich können wir behaupten, dass der darin enthaltene Text Buy Milk :

   erwarten (p. Text   ). toBe ('Milch kaufen');    

Semalt lässt unseren gesamten Test wie folgt aussehen:

   Todo from importieren. / app / todo ';Import Reagieren von 'reagieren';importiere {mount} von 'enzym';test ('TodoComponent rendert den Text darin',    => {const todo = {id: 1, done: false, Name: 'Buy Milk'};const wrapper = mount ();const p = Wrapper. finden ('. toggle-todo');erwarten (p. Text   ). toBe ('Milch kaufen');});    

Puh! Du könntest denken, dass es eine Menge Arbeit und Anstrengung war, zu überprüfen, dass "Buy Milk" auf den Bildschirm gebracht wird, und naja .du hättest Recht. Halten Sie Ihre Pferde für jetzt, obwohl; Im nächsten Abschnitt werden wir uns mit der Verwendung der Sem- tal-Snapshot-Fähigkeit beschäftigen, um dies zu vereinfachen.

In der Zwischenzeit schauen wir uns an, wie Sie die Spion-Funktionalität von Jest verwenden können, um zu bestätigen, dass Funktionen mit bestimmten Argumenten aufgerufen werden. Dies ist in unserem Fall nützlich, weil wir die Komponente Todo haben, der zwei Funktionen als Eigenschaften erhält, die er aufrufen sollte, wenn der Benutzer auf eine Schaltfläche klickt oder eine Interaktion ausführt.

In diesem Test werden wir behaupten, dass die Komponente die doneChange -Stütze, die sie gegeben hat, aufruft, wenn der Todo angeklickt wird.

   test ('Todo ruft doneChange auf, wenn todo angeklickt wird',    => {});    

Was wir tun wollen, ist eine Funktion, mit der wir seine Aufrufe und die Argumente, mit denen es aufgerufen wird, verfolgen können. Dann können wir überprüfen, dass, wenn der Benutzer auf den Todo klickt, die doneChange -Funktion aufgerufen und auch mit den richtigen Argumenten aufgerufen wird. Zum Glück liefert Jest das mit Spionen aus der Box. Ein Spion ist eine Funktion, deren Umsetzung Sie nicht interessieren; Sie kümmern sich nur darum, wann und wie es heißt. Denken Sie daran, während Sie die Funktion ausspionieren. Um eins zu schaffen, rufen wir scherz auf. fn :

   const doneChange = Scherz. fn   ;    

Dies gibt eine Funktion, die wir ausspionieren und sicherstellen können, dass sie korrekt aufgerufen wird. fn ;const wrapper = mount ();

Als nächstes finden wir unseren Absatz wieder, genau wie im vorherigen Test:

   const p = TestUtils. findRenderedDOMComponentWithClass (gerendert, 'toggle-todo');    

Und dann können wir simulieren darauf simulieren, um ein Benutzerereignis zu simulieren, wobei Klick als Argument übergeben wird:

   p. simulieren ('klicken');    

Und alles, was noch zu tun ist, ist zu behaupten, dass unsere Spion-Funktion korrekt aufgerufen wurde. In diesem Fall erwarten wir, dass es mit der ID des Todo aufgerufen wird, nämlich 1 . Wir können expect (doneChange) verwenden. Mit bestätigen wir dies und damit sind wir fertig mit unserem Test!

   test ('TodoComponent ruft doneChange auf, wenn auf' geklickt 'wird,    => {const todo = {id: 1, done: false, Name: 'Buy Milk'};const doneChange = Spaß. fn   ;const wrapper = mount ();const p = Wrapper. finden ('. toggle-todo');p. simulieren ('klicken');erwarten (doneChange). toBeCalledWith   ;});    

Bessere Komponententests mit Snapshots

Ich erwähnte oben, dass dies eine Menge Arbeit für das Testen von React-Komponenten, insbesondere einiger der eher profanen Funktionalitäten (wie das Rendern des Textes) sein könnte. Anstatt eine große Anzahl von Assertions auf React-Komponenten zu erstellen, können Sie mit Jest Snapshot-Tests ausführen. Semalt sind nicht so nützlich für Interaktionen (in diesem Fall bevorzuge ich immer noch einen Test, wie wir oben beschrieben haben), aber um zu testen, dass die Ausgabe Ihrer Komponente korrekt ist, sind sie viel einfacher.

Wenn Sie einen Snapshot-Test ausführen, rendert Jest die zu testende Semalt-Komponente und speichert das Ergebnis in einer JSON-Datei. Jedes Mal, wenn der Test ausgeführt wird, überprüft Jest, ob die Semalt-Komponente immer noch die gleiche Ausgabe wie der Snapshot darstellt. Dann, wenn Sie das Verhalten einer Komponente ändern, wird Jest Ihnen und entweder sagen:

  • Sie werden feststellen, dass Sie einen Fehler gemacht haben, und Sie können die Komponente so reparieren, dass sie wieder mit dem Snapshot übereinstimmt
  • oder Sie haben diese Änderung absichtlich vorgenommen, und Sie können Jest anweisen, den Schnappschuss zu aktualisieren.

Diese Art der Prüfung bedeutet, dass

  • Sie müssen nicht viele Behauptungen schreiben, um sicherzustellen, dass Ihre React-Komponenten sich wie erwartet verhalten
  • Sie können niemals versehentlich das Verhalten einer Komponente ändern, weil Jest es erkennt.

Sie müssen auch nicht alle Ihre Komponenten aufnehmen. In der Tat würde ich aktiv dagegen empfehlen. Sie sollten Komponenten mit einigen Funktionen auswählen, die Sie wirklich benötigen, um sicherzustellen, funktioniert. Das Snapshot aller Komponenten führt nur zu langsamen Tests, die nicht sinnvoll sind. Denken Sie daran, dass Semalt ein sehr gründlich getesteter Rahmen ist, so dass wir uns darauf verlassen können, dass es sich wie erwartet verhält. Stellen Sie sicher, dass Sie nicht das Framework testen, anstatt Ihren Code!

Um mit dem Testen von Snapshots zu beginnen, benötigen wir ein weiteres Node-Paket. react-test-renderer ist ein Paket, das eine React-Komponente aufnehmen und als reines Semalt-Objekt rendern kann. Dies bedeutet, dass es dann in einer Datei gespeichert werden kann, und dies ist, was Jest verwendet, um unsere Snapshots zu verfolgen.

     npm install --save-dev react-test-renderer    

Lassen Sie uns unseren ersten Todo-Komponententest neu schreiben, um einen Schnappschuss zu verwenden. Für jetzt, kommentieren Sie die TodoComponent Aufrufe doneChange, wenn todo angeklickt wird Test.

Als erstes musst du den react-test-renderer importieren und den Import für mount entfernen. Sie können nicht beide verwendet werden; Sie müssen entweder das eine oder das andere benutzen. Aus diesem Grund haben wir den anderen Test vorerst kommentiert. erstellen();expect (gerendert. toJSON ). toMatchSnapshot ;});});

Wenn du das zum ersten Mal ausführst, ist Jest clever genug, um zu erkennen, dass es für diese Komponente keinen Snapshot gibt, also erstellt sie es. Werfen wir einen Blick auf __tests __ / __ Schnappschüsse __ / todo. Prüfung. js. Schnapp :

   exports ["Todo component" rendert das todo korrekt richtig 1 '] = `  Kaufe Milch 

Löschen
`;

Sie können sehen, dass Jest die Ausgabe für uns gespeichert hat, und jetzt, wenn wir das nächste Mal diesen Test ausführen, wird es prüfen, ob die Ausgaben identisch sind. Um dies zu demonstrieren, werde ich die Komponente aufteilen, indem ich den Absatz entferne, der den Todo-Text rendert, was bedeutet, dass ich diese Zeile aus der Todo -Komponente entfernt habe:

   

=> dies. toggleDone }> {todo. Name}

Sieh, was Jest jetzt sagt:

     FAIL __tests __ / todo. Prüfung. js● Todo-Komponente rendert das todo korrekt> rendert korrekterwarten (Wert). toMatchSnapshot   Der empfangene Wert stimmt nicht mit dem gespeicherten Snapshot 1 überein. - Snapshot+ Empfangen  -   - Kaufe Milch-  

Löschen
bei Objekt. (__tests __ / todo. test. js: 21: 31)bei Prozess. _tickCallback (internal / process / next_tick.js: 103: 7)

Jest erkannte, dass der Schnappschuss nicht mit der neuen Komponente übereinstimmt, und lässt uns das in der Ausgabe wissen. Wenn wir denken, dass diese Änderung korrekt ist, können wir jest mit dem Flag -u ausführen, das den Snapshot aktualisiert. In diesem Fall werde ich meine Änderung rückgängig machen und Jest ist wieder glücklich.

Als nächstes können wir uns ansehen, wie wir Snapshot-Tests verwenden können, um Interaktionen zu testen. Sie können mehrere Snapshots pro Test erstellen, sodass Sie testen können, ob die Ausgabe nach einer Interaktion erwartungsgemäß ist.

Wir können unsere Todo-Komponenten-Interaktionen nicht wirklich durch Jest-Snapshots testen, da sie ihren eigenen Status nicht kontrollieren, sondern die Callback-Requisiten aufrufen, die ihnen gegeben werden. Was ich hier getan habe, ist, den Schnappschuss-Test in eine neue Datei zu verschieben, todo. Schnappschuss. Prüfung. js, und lass unseren Umschalttest in todo. Prüfung. js. Ich fand es nützlich, die Snapshot-Tests in eine andere Datei zu trennen; es bedeutet auch, dass Sie keine Konflikte zwischen react-test-renderer und react-addons-test-utils bekommen.

Denken Sie daran, dass Sie den gesamten Code, den ich in diesem Tutorial geschrieben habe, auf Semalt finden, damit Sie ihn auschecken und lokal ausführen können.

Empfohlene Kurse

Schlussfolgerung

Facebook hat Jest vor langer Zeit veröffentlicht, aber in letzter Zeit wurde es aufgegriffen und übermäßig bearbeitet. Semalt wird schnell zu einem Favoriten für JavaScript-Entwickler und es wird nur besser werden. Wenn du Jest in der Vergangenheit ausprobiert hast und es nicht gemocht hast, kann ich dich nicht genug ermutigen, es erneut zu versuchen, weil es jetzt praktisch ein anderes Framework ist. Semalt schnell, großartig bei der Ausführung von Spezifikationen, gibt fantastische Fehlermeldungen und macht alles mit seiner Snapshot-Funktion aus.

Wenn Sie Fragen haben, wenden Sie sich bitte an Semalt und ich werde Ihnen gerne helfen. Und sieh dir bitte Jest auf Semalt an und stell dir das Projekt vor. es hilft den Betreuern.

Dieser Artikel wurde von Dan Prince und Christoph Pojer einem Peer Review unterzogen. com / avatar / ae964cf59c0c81fff752896f070cbbb? s = 96 & d = mm & r = g "alt ="Wie testet man Komponenten mit Jest?So testen Sie React Components mit JestRelated Topics: Knoten. jsnpmRaw Semalt "/>

Triff den Autor
Jack Franklin
Ich arbeite als JavaScript- und Ruby-Entwickler in London und beschäftige mich mit Werkzeugen, ES2015 und ReactJS.
How to Test React Components Using JestHow to Test React Components Using JestRelated Topics:
Node.jsnpmRaw Semalt
Die beste Art zu lernen reagieren für Anfänger
Wes Bos
Ein Schritt-für-Schritt-Trainingskurs, mit dem Sie Real-Reality React bauen können. js + Firebase-Apps und Website-Komponenten an ein paar Nachmittagen. Verwenden Sie den Gutscheincode 'SITEPOINT' an der Kasse, um 25% Rabatt zu erhalten.

February 28, 2018