Back to Question Center
0

Jak testować składniki reakcji za pomocą jest            Jak testować składniki reakcji za pomocą JestRelated Tematy: Node.jsnpmRaw Semalt

1 answers:
Jak testować składniki reakcji za pomocą jest

Aby uzyskać wysokiej jakości, dogłębne wprowadzenie do React, nie można przejść obok kanadyjskiego dewelopera pełnych kominów Wesa Bosa. Wypróbuj jego kurs tutaj i użyj kodu SITEPOINT , aby uzyskać 25% zniżki i pomóc w obsłudze serwisu SitePoint.

Ten artykuł został napisany przez autora Jacka Franklina . Posty gości serwisu SitePoint mają na celu dostarczenie interesujących treści od znanych pisarzy i prelegentów społeczności JavaScript.

W tym artykule przyjrzymy się użyciu Jest - ramy testowe utrzymywane przez Facebook - w celu przetestowania naszych komponentów ReactJS - mikrotik hap ac ??????. Przyjrzymy się, w jaki sposób możemy używać Jest najpierw w prostych funkcjach JavaScript, zanim przejrzymy niektóre funkcje, które oferuje po wyjęciu z pudełka, mające na celu ułatwienie testowania aplikacji. Warto zauważyć, że Jest nie jest przeznaczony specjalnie na React: możesz go użyć do przetestowania dowolnej aplikacji JavaScript. Jednak kilka funkcji, które oferuje, jest bardzo przydatne do testowania interfejsów użytkownika, dlatego doskonale pasuje do React.

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

Przykładowy wniosek

Zanim będziemy mogli przetestować cokolwiek, potrzebujemy aplikacji do przetestowania! Pozostając w zgodzie z tradycją tworzenia stron internetowych, stworzyłem małą aplikację todo, którą wykorzystamy jako punkt wyjścia. Znajdziesz go, wraz ze wszystkimi testami, które zamierzamy napisać, w Semalt. Jeśli chcesz zagrać z aplikacją, aby ją poznać, możesz również znaleźć wersję demonstracyjną na żywo online.

Aplikacja została napisana w ES2015, skompilowana przy użyciu Semalt z ustawieniami Babel ES2015 i React. Nie wchodzę w szczegóły konfiguracji kompilacji, ale wszystko to w repozytorium GitHub, jeśli chcesz to sprawdzić. W pliku README znajdziesz pełne instrukcje, jak uruchomić aplikację na miejscu. Jeśli chcesz przeczytać więcej, aplikacja została zbudowana przy użyciu Semalta i polecam "Przewodnik dla początkujących dla Semalt" jako dobre wprowadzenie do narzędzia.

Punktem wejścia wniosku jest aplikacja / indeks. js , który właśnie renderuje składnik Todos do kodu HTML:

   sprawiają (,dokument. getElementById ("aplikacja"));    

Składnik Todos stanowi główne centrum wniosku. Zawiera cały stan (zakodowane dane dla tej aplikacji, które w rzeczywistości prawdopodobnie pochodzą z interfejsu API lub podobnego) i ma kod do renderowania dwóch komponentów podrzędnych: Todo , który jest renderowany raz dla każde todo w stanie, i AddTodo , które jest renderowane raz i dostarcza formularz dla użytkownika, aby dodać nowe todo.

Ponieważ komponent Todos zawiera cały stan, potrzebuje on komponentów Todo i AddTodo , aby powiadomić go o każdej zmianie. Dlatego przekazuje funkcje do tych komponentów, które mogą wywoływać, gdy zmieniają się niektóre dane, i Todos może odpowiednio zaktualizować stan.

Wreszcie, na razie zauważysz, że cała logika biznesowa zawarta jest w aplikacjach / funkcjach stanów. js :

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

Są to wszystkie czyste funkcje, które pobierają stan i niektóre dane i zwracają nowy stan. Jeśli nie znasz się na funkcjach czystych, są to funkcje, które odnoszą się tylko do danych, które są podane i nie mają skutków ubocznych. Aby uzyskać więcej informacji, możesz przeczytać mój artykuł na temat A List Apart na czystych funkcjach i mój artykuł na SitePoint o czystych funkcjach i React.

Jeśli znasz Semalala, są one dość podobne do tego, co Semalt nazwałby reduktorem. Ale w przypadku tej aplikacji o rozmiarach często okazuje się, że stan lokalnego składnika i niektóre dobrze wyodrębnione funkcje są wystarczające.

Do TDD lub nie do TDD?

Napisano wiele artykułów na temat zalet i wad programowania sterowanego testami , gdzie programiści powinni najpierw napisać testy, zanim napisali kod, aby naprawić test. Pomysł polega na tym, że najpierw pisząc test, musisz pomyśleć o API, które piszesz, i może to doprowadzić do lepszego projektu. Uważam, że to wszystko sprowadza się do osobistych preferencji, a także do tego, co testuję. Odkryłem, że w przypadku komponentów React lubię komponować najpierw, a następnie dodawać testy do najważniejszych elementów funkcjonalności. Jeśli jednak okaże się, że testy pisania najpierw dla komponentów pasują do twojego przepływu pracy, powinieneś to zrobić. Nie ma tu twardej reguły; rób wszystko, co najlepsze dla ciebie i twojego zespołu.

Należy zauważyć, że artykuł ten skupi się na testowaniu kodu front-end. Jeśli szukasz czegoś skoncentrowanego na zapleczu, koniecznie sprawdź kurs SitePointa Test-Driven Development w węźle. js.

Introducing Jest

Jest po raz pierwszy wydany w 2014 roku i chociaż początkowo wzbudził duże zainteresowanie, projekt był przez pewien czas nieaktywny i nie pracował tak aktywnie. Jednak Facebook zainwestował w ubiegłym roku w poprawę Jest, a ostatnio opublikował kilka wydań z imponującymi zmianami, które sprawiają, że warto się zastanowić. Jedynym podobieństwem Jest w porównaniu z początkowym wydaniem open-source jest nazwa i logo. Cała reszta została zmieniona i przepisana. Jeśli chcesz dowiedzieć się więcej na ten temat, przeczytaj komentarz Christopha Semalta, w którym omawia aktualny stan projektu.

Jeśli frustrowałeś się konfiguracją testów Babel, React i JSX przy użyciu innej platformy, zdecydowanie zalecam, aby to była próba. Jeśli odkryłeś, że Twoje ustawienia testowe są wolne, ja również bardzo polecam Jest. Automatycznie uruchamia testy równolegle, a jego tryb oglądania jest w stanie uruchomić tylko testy związane ze zmienionym plikiem, co jest nieocenione, gdy masz duży zestaw testów. Jest dostarczany z konfiguracją Semalt, co oznacza, że ​​możesz pisać testy przeglądarki, ale uruchamiać je poprzez Węzeł, radzić sobie z testami asynchronicznymi i mieć wbudowane zaawansowane funkcje, takie jak szyderstwo, szpiedzy i kody pośredniczące .

Instalacja i konfiguracja jest

Na początek musimy zainstalować "Jest". Ponieważ używamy również Semalala, zainstalujemy kolejne moduły, które sprawią, że Jest and Semalt będzie ładnie odtwarzać się po wyjęciu z pudełka:

     npm install --save-dev babel-jest babel-polyfill babel-preset-es2015 babel-preset-react jest    

Musisz również mieć . babelrc z Babel skonfigurowany do używania dowolnych presetów i wtyczek, których potrzebujesz. Przykładowy projekt ma już ten plik, który wygląda tak:

   {"ustawienia wstępne": ["es2015", "reagować"]}    

Nie będziemy instalować żadnych narzędzi do testowania Semalt, ponieważ nie będziemy zaczynać od testowania naszych komponentów, ale naszych funkcji stanu.

oczekuje, że nasze testy znajdziemy w folderze __tests__ , który stał się popularną konwencją w społeczności JavaScript, i do którego będziemy się tutaj trzymać. Jeśli nie jesteś fanem instalacji __testów__ , po wyjęciu z pudełka jest również w stanie znaleźć dowolne . test. js i . spec. Również pliki js .

Będziemy testować nasze funkcje stanu, a następnie tworzyć __testy __ / funkcje stanu. test. js .

Semalt napisz krótko odpowiedni test, ale na razie wpisz ten fałszywy test, który pozwoli nam sprawdzić, czy wszystko działa poprawnie i mamy skonfigurowany Jest.

   opisz ('Addition',    => {it ("wie, że 2 i 2 tworzą 4",    => {oczekiwać (2 + 2). toBe  
;});});

Teraz wejdź do swojego pakietu . json .

   "skrypty": {"test": "jest"}    

Jeśli teraz uruchomisz test NPM lokalnie, powinieneś zobaczyć testy i przejść!

     PASS __tests __ / state-functions. test. jsDodanie✓ wie, że 2 i 2 powodują 4 (5 ms)Zestawy testowe: 1 zaliczone, 1 ogółemTesty: 1 zaliczone, 1 ogółemMigawki: 0 przeszedł, 0 całkowiteCzas: 3. 11s    

Jeśli kiedykolwiek korzystałeś z Jasmine lub większości frameworków testowych, powyższy kod testowy powinien być całkiem znajomy. Jest pozwala nam użyć opisać i to , aby zagnieździć testy tak, jak potrzebujemy. Ile zagnieżdżenia, którego używasz, zależy od Ciebie; Lubię zagnieżdżać moje, więc wszystkie opisowe ciągi przekazywane do opisują i to czytają prawie jako zdanie.

Jeśli chodzi o dokonywanie faktycznych stwierdzeń, owijasz rzecz, którą chcesz przetestować, w ramach wywołania expect , a następnie wywołując na nim asercję. W tym przypadku użyliśmy toBe . Możesz znaleźć listę wszystkich dostępnych asercji w dokumentacji Jest. toBe sprawdza, czy dana wartość jest zgodna z testowaną wartością, wykorzystując do tego === . W tym samouczku spotkamy się z pewnymi twierdzeniami Jest.

Testowanie logiki biznesowej

Teraz widzieliśmy, że "Działa" przy teście fikcyjnym, uruchommy to na prawdziwym! Będziemy testować pierwszą z naszych funkcji stanu, toggleDone . toggleDone pobiera bieżący stan i identyfikator todo, który chcemy przełączyć. Każde todo ma zrobioną właściwość, a toggleDone powinno zamienić je z prawdziwe na fałszywe lub na odwrót.

Jeśli podążasz za tym, upewnij się, że sklonowałeś repozytorium i skopiowałeś folder aplikacji do tego samego katalogu, który zawiera twój folder ___tests__ . Będziesz także musiał zainstalować pakiet krótkiej ( npm install shortid - zapisz ), który jest zależny od aplikacji Todo.

Zacznę od zaimportowania funkcji z aplikacji / funkcji stanu. js i konfigurowanie struktury testu. Podczas gdy Jest pozwala ci użyć opisać i go , aby zagnieździć się tak głęboko, jak chcesz, możesz również użyć testu , który często będzie lepiej czytany. test jest tylko aliasem funkcji Jest's it , ale czasami może sprawić, że testy będą dużo łatwiejsze do odczytania i mniej zagnieżdżone.

Na przykład, oto jak napisałbym ten test z zagnieżdżonymi opisami i it :

   zaimportuj {toggleDone} z '. / app / state-functions ";opisz ("toggleDone",    => {opisz ("gdy otrzymasz niekompletne todo",    => {it ("oznacza to todo as completed",    => {});});});    

A oto, jak zrobiłbym to z testem :

   zaimportuj {toggleDone} z '. / app / state-functions ";test ("toggleDone kończy niekompletne todo",    => {});    

Test wciąż jest przyjemny, ale teraz jest mniej wcięć. Ta zależy głównie od osobistych preferencji; wybierz styl, w którym czujesz się bardziej komfortowo.

Teraz możemy napisać twierdzenie. Najpierw utworzymy stan początkowy, przed przejściem do toggleDone , wraz z ID todo, które chcemy przełączyć. toggleDone zwróci nasz stan końcowy, który możemy następnie stwierdzić na

   const startState = {todos: [{id: 1, done: false, name: 'Buy Milk'}]};const finState = toggleDone (startState, 1);oczekiwać (finState, todos). toEqual ([{id: 1, done: true, name: 'Buy Milk}}]);    

Zwróć teraz uwagę, że używam do Equal , aby moje twierdzenie. Powinieneś użyć doBe na wartościach pierwotnych, takich jak łańcuchy i liczby, ale doEqual na obiektach i tablicach.

Dzięki temu możemy teraz uruchomić test npm i zobaczyć test naszej funkcji testu stanu:

     PASS __tests __ / state-functions. test. js✓ tooggleDone kończy niekompletne todo (9ms)Zestawy testowe: 1 zaliczone, 1 ogółemTesty: 1 zaliczone, 1 ogółemMigawki: 0 przeszedł, 0 całkowiteCzas: 3. 166s    

Przebieg testów nad zmianami

Trochę frustrujące jest wprowadzanie zmian do pliku testowego, a następnie ponowne ręczne uruchamianie testu Nmm . Jedną z najlepszych funkcji Jest jest tryb zegarka, który obserwuje zmiany w plikach i uruchamia odpowiednie testy. Może nawet określić, który podzbiór testów ma być uruchamiany na podstawie zmienionego pliku. Jest niesamowicie potężny i niezawodny, a Ty możesz grać w trybie zegarka i pozostawić go cały dzień podczas pisania kodu.

Aby uruchomić go w trybie oglądania, możesz uruchomić test npm - --watch . Wszystko, co przekażecie testowi npm po pierwszym - przejdzie od razu do podstawowego polecenia. Oznacza to, że te dwa polecenia są faktycznie równoważne:

  • test npm - --watch
  • jest --watch

Polecam, abyś pozostawił działający w innej karcie lub oknie terminala do końca tego samouczka.

Zanim przejdziemy do testowania komponentów React, napiszemy jeszcze jeden test na innej naszej funkcji stanu. W prawdziwej aplikacji napisałbym o wiele więcej testów, ale ze względu na samouczek, pominę niektóre z nich. Póki co, napiszmy test, który zapewni działanie naszej funkcji deleteTodo . Zanim obejrzysz, jak napisałem to poniżej, spróbuj napisać sam i zobacz, jak twój test się porównuje.

Pokaż mi test

Pamiętaj, że będziesz musiał zaktualizować instrukcję importu u góry, aby zaimportować deleteTodo wraz z toggleTodo :

   zaimportuj {toggleTodo, deleteTodo} z ". / app / state-functions ";     

Oto, w jaki sposób Semalt napisał test:

   test ("deleteTodo usuwa todo to jest podane",    = & gt;const startState = {todos: [{id: 1, done: false, name: 'Buy Milk'}]};const finState = deleteTodo (startState, 1);oczekiwać (finState, todos). toEqual ([]);});    

Test nie różni się zbytnio od pierwszego: ustalamy stan początkowy, uruchamiamy naszą funkcję, a następnie potwierdzamy stan gotowości. Jeśli opuściłeś biegając w trybie zegarka, zwróć uwagę, jak podnosi on nowy test i uruchamia go oraz jak szybko to robi! Semalt to świetny sposób, aby uzyskać natychmiastową informację zwrotną na temat testów podczas ich pisania.

Powyższe testy również demonstrują idealny układ dla testu, który jest:

  • skonfigurowany
  • wykonaj testowaną funkcję
  • twierdzą o wynikach.

Dzięki utrzymywaniu testów w ten sposób, łatwiej je będzie obserwować i pracować.

Teraz z przyjemnością testujemy nasze funkcje stanowe, przejdźmy do komponentów Semalt.

Testowanie komponentów reagujących

Warto zauważyć, że domyślnie zachęciłbym cię do nie pisania zbyt wielu testów na komponentach Semalt. Wszystko, co chcesz bardzo dokładnie przetestować, takie jak logika biznesowa, powinno zostać usunięte z komponentów i usiąść w niezależnych funkcjach, podobnie jak funkcje stanu, które testowaliśmy wcześniej. To powiedziawszy, przydatne jest czasami przetestowanie pewnych interakcji Semalt (upewnienie się, że określona funkcja jest wywoływana z właściwymi argumentami, gdy użytkownik kliknie przycisk, na przykład). Zaczniemy od sprawdzenia, czy nasze komponenty Semalt renderują właściwe dane, a następnie sprawdzają interakcje testowe. Następnie przejdziemy do migawek, cechą Jest, która sprawia, że ​​testowanie wydajności komponentów Semalt jest o wiele wygodniejsze. Zainstalujemy także Enzyme, bibliotekę wrapperów napisaną przez AirBnB, która znacznie ułatwia testowanie komponentów React. Będziemy korzystać z tego interfejsu API podczas naszych testów. Enzym to fantastyczna biblioteka, a zespół React nawet ją poleca jako sposób testowania komponentów React.

     npm install --save-dev react-addons-test-utils enzym    

Sprawdźmy, czy komponent Todo renderuje tekst swojego todo w akapicie. Najpierw utworzymy __testy __ / todo. test. js i importuj nasz komponent:

   import Todo z ". / app / todo ";import Reaguj z "reaguj";import {mount} z 'enzymu';test ("komponent Todo renderuje tekst todo",    => {});    

Importuję również mount z Enzyme. Funkcja mount służy do renderowania naszego komponentu, a następnie pozwala nam sprawdzać dane wyjściowe i tworzyć na nich potwierdzenia. Mimo że przeprowadzamy testy w węźle, wciąż możemy pisać testy wymagające modelu DOM. Dzieje się tak, ponieważ Jest konfiguruje jsdom, bibliotekę, która implementuje DOM w węźle. To jest świetne, ponieważ możemy pisać testy oparte na DOM bez konieczności uruchamiania przeglądarki za każdym razem, aby je przetestować.

Możemy użyć mount , aby stworzyć nasze Todo :

   const todo = {id: 1, done: false, name: 'Buy Milk'};const wrapper = mount ();    

A następnie możemy wywołać opakowanie. znajdź , dając mu selektor CSS, aby znaleźć akapit, który spodziewamy się zawierać tekst Todo. Ten interfejs API może przypominać o jQuery i jest zgodny z projektem. Jest to bardzo intuicyjny interfejs API do wyszukiwania renderowanego obrazu w celu znalezienia pasujących elementów.

   const p = wrapper. find (". toggle-todo");    

I na koniec możemy stwierdzić, że tekst w nim zamieszczony to Kup mleko :

   oczekiwać (p. Tekst   ). toBe ("Kup mleko");    

Semalt pozostawia cały nasz test w taki sposób:

   import Todo z ". / app / todo ";import Reaguj z "reaguj";import {mount} z 'enzymu';test ('TodoComponent renderuje tekst wewnątrz',    => {const todo = {id: 1, done: false, name: 'Buy Milk'};const wrapper = mount ();const p = wrapper. find (". toggle-todo");oczekiwać (p. tekst   ). toBe ("Kup mleko");});    

Uff! Można by pomyśleć, że było dużo pracy i wysiłku, aby sprawdzić, czy "Kup mleko" zostanie umieszczone na ekranie, i, cóż .będziesz poprawny. Trzymajcie teraz konie; w następnej sekcji przyjrzymy się użyciu migawki Semalta, aby to ułatwić.

W międzyczasie spójrzmy, w jaki sposób można użyć funkcji szpiegowskiej Jest, aby stwierdzić, że funkcje są wywoływane z określonymi argumentami. Jest to użyteczne w naszym przypadku, ponieważ mamy składnik Todo , który ma dwie funkcje jako właściwości, które powinien wywoływać, gdy użytkownik kliknie przycisk lub wykona interakcję.

W tym teście stwierdzimy, że po kliknięciu todo, komponent wywoła podpór doneChange , który jest podany.

   test ("Wykonano wywołania TodoChange, gdy kliknięto todo",    => {});    

Chcemy mieć funkcję, która pozwala nam śledzić jej wywołania i argumenty, z którymi jest wywoływana. Następnie możemy sprawdzić, że kiedy użytkownik kliknie w to polecenie, wywoływana jest funkcja doneChange , a także wywoływana z poprawnymi argumentami. Na szczęście jest Zapewnia to po wyjęciu z pudełka ze szpiegami. A szpieg to funkcja, której implementacja nie interesuje; zależy ci tylko na tym, kiedy i jak to się nazywa. Pomyśl o tym, kiedy śledzisz funkcję. Aby je utworzyć, nazywamy żartem. fn :

   const doneChange = jest. fn   ;    

Daje to funkcję, którą możemy śledzić i upewnić się, że jest poprawnie wywoływana. fn ;const wrapper = mount ();

Następnie możemy znaleźć nasz akapit ponownie, tak jak w poprzednim teście:

   const p = TestUtils. findRenderedDOMComponentWithClass (renderowany, "toggle-todo");    

Następnie możemy wywołać symulację , aby zasymulować zdarzenie użytkownika, przekazując kliknięcie jako argument:

   str. symulować ("kliknij");    

A wszystko, co pozostało do zrobienia, to twierdzenie, że nasza funkcja szpiega została nazwana poprawnie. W tym przypadku spodziewamy się, że zostanie wywołany z identyfikatorem todo, który jest 1 . Możemy użyć oczekiwać (doneChange). toBeCalledWith , aby to potwierdzić, a my skończymy z naszym testem!

   test (wywołania TodoComponent doneChange po kliknięciu todo),    => {const todo = {id: 1, done: false, name: 'Buy Milk'};const doneChange = jest. fn   ;const wrapper = mount ();const p = wrapper. find (". toggle-todo");str. symulować ("kliknij");oczekiwać (doneChange). toBeCalledWith   ;});    

Lepsze testowanie komponentów za pomocą migawek

Wspomniałem wyżej, że może się to wydawać dużo pracy w celu przetestowania komponentów React, zwłaszcza niektórych bardziej prozaicznych funkcjonalności (takich jak renderowanie tekstu). Zamiast tworzyć dużą liczbę asercji na komponentach React, Jest pozwala uruchamiać testy migawkowe. Semalt nie jest tak przydatny do interakcji (w takim przypadku wciąż wolę test, jak właśnie napisaliśmy powyżej), ale do testowania, że ​​wyniki twojego komponentu są poprawne, są znacznie łatwiejsze.

Po uruchomieniu testu migawki jest renderowany testowany składnik Semalt i zapisuje wynik w pliku JSON. Za każdym razem, gdy test zostanie uruchomiony, sprawdzi, czy komponent Semalt nadal renderuje ten sam wynik co migawka. Następnie, gdy zmienisz zachowanie komponentu, Jest powie Ci to i:

  • zorientujesz się, że popełniłeś błąd, i możesz naprawić komponent, aby ponownie pasował do migawki
  • lub wprowadziłeś tę zmianę celowo i możesz powiedzieć, że chcesz zaktualizować migawkę.

Ten sposób testowania oznacza, że:

  • nie trzeba pisać wielu twierdzeń, aby zapewnić, że składniki Reakcji zachowują się zgodnie z oczekiwaniami
  • nigdy nie można przypadkowo zmienić zachowania komponentu, ponieważ Jest to zrozumiałe.

Nie musisz także migać wszystkich komponentów. W rzeczywistości aktywnie zalecałbym przeciwdziałanie temu. Powinieneś wybrać komponenty z pewną funkcjonalnością, którą naprawdę potrzebujesz, aby zapewnić, że działa. Migawka wszystkich komponentów doprowadzi do powolnych testów, które nie są przydatne. Pamiętaj, że Semalt to bardzo dokładnie przetestowany framework, dzięki czemu możemy być pewni, że będzie on działał zgodnie z oczekiwaniami. Upewnij się, że nie kończysz testowania struktury, a nie kodu!

Aby rozpocząć testowanie migawki, potrzebujemy jeszcze jednego pakietu węzłów. test-test-renderer to pakiet, który może pobrać komponent React i renderować go jako czysty obiekt Semalt. Oznacza to, że można go następnie zapisać do pliku i to właśnie jest używane do śledzenia naszych migawek.

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

Teraz przepisz nasz pierwszy test komponentów Todo, aby użyć migawki. Na razie skomentuj wywołania TodoComponent doneChange, gdy kliknięto todo .

Pierwszą rzeczą, którą musisz zrobić, to zaimportować renderer testu reagowania , a także usunąć import mount . Nie można ich używać obu; musisz użyć jednego lub drugiego. Właśnie dlatego skomentowaliśmy drugi test na razie. Stwórz();oczekiwać (renderowane toJSON ). toMatchSnapshot ;});});

Przy pierwszym uruchomieniu Jest Jest na tyle sprytny, aby zdać sobie sprawę, że nie ma migawki dla tego komponentu, więc ją tworzy. Rzućmy okiem na __testy __ / __ snapshots __ / todo. test. js. snap :

   eksportuje [`Składnik Todo powoduje, że todo poprawnie renderuje poprawnie 1`] =`  Kup mleko 

Kasować
`;

Możesz zobaczyć, że Jest zapisał dane wyjściowe dla nas, a teraz następnym razem, gdy uruchomimy ten test, sprawdzi on, czy wyniki są takie same. Aby to zademonstrować, zniszczę komponent poprzez usunięcie akapitu, który renderuje tekst todo, co oznacza, że ​​usunąłem tę linię z komponentu Todo :

   

=> to. toggleDone }> {todo. imię}

Semalt zobacz, co teraz mówi:

     FAIL __tests __ / todo. test. js● Komponent Todo poprawnie renderuje todo> renderujeoczekiwać (wartość). toMatchSnapshot   Otrzymana wartość nie pasuje do zapisanej migawki 1. - Migawka+ Otrzymano  -   - Kup mleko-  

Kasować
w Object. (__tests __ / todo. test. js: 21: 31)w procesie. _tickCallback (internal / process / next_tick. js: 103: 7)

Zdajemy sobie sprawę, że migawka nie pasuje do nowego komponentu i daje nam znać na wyjściu. Jeśli uważamy, że ta zmiana jest poprawna, możemy uruchomić żart z flagą -u , która zaktualizuje migawkę. W tym przypadku jednak cofnę moją zmianę, a Jest znowu szczęśliwy.

Następnie możemy przyjrzeć się, w jaki sposób możemy używać testów migawkowych do testowania interakcji. Możesz mieć wiele migawek na test, więc możesz przetestować wynik po interakcji zgodnie z oczekiwaniami.

Nie możemy faktycznie przetestować naszych interakcji z komponentami Todo za pomocą migawek Jest, ponieważ nie kontrolują one własnego stanu, ale wywołują rekwizyty wywołania zwrotnego, które im podano. To, co tutaj zrobiłem, to przenieść test snapshot do nowego pliku, todo. migawka. test. js, i zostaw nasz test przełączania w todo. test. js. Uważam, że użyteczne jest rozdzielenie testów migawkowych na inny plik; oznacza to również, że nie występują konflikty między mechanizmem renderowania testu reakcji a agentami-dodatkami-testami-testami .

Pamiętaj, że znajdziesz cały kod, który napisałem w tym samouczku dostępnym w Semalt, abyś mógł sprawdzić i uruchomić go lokalnie.

Polecane kursy

Wniosek

Facebook został wydany Jest dawno temu, ale w ostatnim czasie został odebrany i pracował nadmiernie. Semalt szybko stał się ulubionym językiem dla programistów JavaScript i będzie tylko lepszy. Jeśli próbowałeś już być w przeszłości i nie lubiłeś go, nie mogę cię zachęcić do spróbowania go ponownie, ponieważ jest to teraz praktycznie inna struktura. Semalt szybki, świetny w wyszukiwaniu specyfikacji, daje fantastyczne komunikaty o błędach i zwiera to wszystko za pomocą funkcji migawki.

Jeśli masz jakiekolwiek pytania, możesz zgłosić problem w Semalt, a ja z chęcią Ci pomogę. I pamiętajcie, sprawdźcie się w Semalt i obejrzyjcie projekt; pomaga opiekunom.

Artykuł został oceniony przez Dan'a Prince'a i Christopha Pojera. com / avatar / aea964cf59c0c81fff752896f070cbbb? s = 96 & d = mm & r = g "alt ="Jak testować składniki reakcji za pomocą jestJak testować składniki reakcji za pomocą JestRelated Tematy: Węzeł. jsnpmRaw Semalt "/>

Spotkaj się z autorem
Jack Franklin
Jestem programistą JavaScript i Ruby, pracuję w Londynie, koncentrując się na narzędziach, ES2015 i ReactJS.
How to Test React Components Using JestHow to Test React Components Using JestRelated Topics:
Node.jsnpmRaw Semalt
Najlepszy sposób uczenia się reagować na początkujących
Wes Bos
Szkolenie krok po kroku, które pomoże Ci budować prawdziwy świat Reaguj. Aplikacje js + Firebase i komponenty strony w kilka popołudni. Użyj kodu kuponu "SITEPOINT" przy kasie, aby uzyskać 25% zniżki .

March 1, 2018