Techniki Zaawansowane
6 godz. 6 min · ReactJS · Full-stack i Programowanie
Adam RomanskiFrontend developer & YouTube CreatorJeden z pierwszych i najbardziej popularnych wzorców w React, który przez lata był traktowany jako najlepszy sposób na wydzielanie logiki z komponentów i współdzielenie jej w wielu miejscach aplikacji. W kursie na przykładzie dowiesz się w jaki sposób można wykorzystać HOC, a także jak łączyć je ze sobą tworząc bardziej zaawansowane struktury.
Obecnie Render Props jest jedną z najczęściej wykorzystywanych praktyk pozwalającą, podobnie jak HOC, na tworzenie abstrakcji, z których możemy czerpać dane lub zachowania potrzebne w naszych komponentach. Na pierwszy rzut oka Render Props mogą przerażać, ale spokojnie – zaczniemy od prostego przykładu, który pozwoli Ci zrozumieć, że nie ma się czego bać.
Hooks to temat niezwykle ciekawy i populary, ale rzadko poruszany w sposób bardziej zaawansowany. W tym kursie dowiesz się nie tylko jak używać takich hooków jak useState, useReducer, useEffect, useContext czy useRef, ale też jak napisać swoje własne hooki, które niesamowicie uprzyjemnią pracę z Reactem.
Compound Components to prawdziwa "ciężka artyleria" Reacta – stosowana w zadaniach wymagających sporej złożoności. Ewoluowała przez lata i kiedyś zawsze spotykana była w formie klas, natomiast w tym kursie proponujemy nieco lżejsze podejście. Dowiesz się jak wykorzystując hooki możesz stworzyć Compound Component wyłącznie przy użyciu komponentów funkcyjnych.
Testy to hasło, które potrafi wzbudzić lęk u osób uczących się Reacta, lub jakiejkolwiek innej technologii. Rzadko kto jednak mówi to głośno – testy są przyjemne! Wystarczy tylko zrozumieć w jaki sposób środowisko testowe działa i jakimi rządzi się zasadami. Przerobimy to wszystko wspólnie, a na koniec kursu przekonasz się, że to faktycznie ciekawe i przyjemne zagadnienie.
W kursie przygotowana jest też garść dobrych praktyk, które pozwolą Ci spojrzeć krytycznie na niektóre fragmenty kodu i ulepszać je w taki sposób, aby stanowiąc część większej całości miały więcej sensu i wdzięku. Dowiesz się czym jest Single Responsibility Principle, jak wydzielać odpowiednio logikę z komponentów i paru innych ciekawych wskazówek.
Ten kurs został stworzony z myślą o programistach swobodnie poruszających się po podstawach i nieco bardziej skomplikowanych partiach Reacta, ale nadal czujących, że brakuje im czegoś, aby wynieść swoje aplikacje na jeszcze wyższy poziom. Rzeczy związane z zaawansowanym JavaScriptem będziemy tu wykorzystywać intuicyjnie, bez zbędnego tłumaczenia, dlatego zanim przystąpisz do tego kursu, upewnij się, że treści React od Podstaw oraz React w Praktyce są dla Ciebie jasne i zrozumiałe.
16.8.x
Cześć skoro nasz axios już działa poprawnie upewniliśmy
się przez sprawdzanie to w naszym ui w naszym app w naszej
aplikacji to teraz przyszła część na testowanie tego wszystkiego i
tak jak już mówiłem testowanie axios'a jest o tyle specyficzne że my tutaj będziemy udawać
że ten axios istnieje w tych testach i zrobimy to za pomocą takiej bardzo sprytnej
metody która się nazywa mock i jest to część specyfikacji jest'a gdzie
mamy nawet taki podobny przykład który będziemy robić tutaj pokazany nasz
test wygląda wtedy w taki sposób że importujemy faktycznie bibliotekę axios do naszego
testu ale za chwilę później mówimy słuchaj wszystko co mamy w
tym axios'ie wszystkie metody zmockuj aby były funkcjami jest'owymi
to znaczy takimi które możemy śledzić które możemy resetować które możemy
dodawać wartość która normalnie jest obsługiwana przez tego axiosa
w komponentach i zaraz wytłumaczę to trochę szerzej o co w tym chodzi ale będziemy
właśnie wykorzystywać te metody mock resolved value jest bardzo
ciekawe jak to wszystko się ze sobą teraz łączy przejdźmy zatem do
naszego testu i spróbujmy to wszystko napisać pierwsze co musimy zrobić to
zaimportować axiosa kolejną
rzeczą którą musimy wykonać to powiedzieć testowi słuchaj mamy
tutaj co prawda bibliotekę axios ale my chcemy żeby każda metoda z tego axiosa
została zmockowana przez jest'owe funkcje i ta metoda nam
to gwarantuje kolejną rzeczą jest po
prostu napisanie testu w którym napiszemy że displays
user data i
w odróżnieniu od naszego poprzedniego testu ten test będzie asynchroniczny
to znaczy że musimy tutaj dodać async teraz
tym console logiem się nie przejmujemy ponieważ jest to console log wywołany
przez to że mam tutaj tego catch'a z error'em na chwilę
możemy go sobie wywalić żeby nie psuł nam widoku a
teraz wróćmy do naszego testu i wyciągnijmy sobie jak zwykle get by
text z metody
render okej
i teraz spójrzmy co robi nasz komponent nasz komponent wykorzystuje
axios get podaję url z którego zaciągnie sobie dane
i te dane które docierają jakby do naszej
aplikacji w postaci promise'a są później rezerwowane są później otwierane
odpakowywane trzymane później w tej zmiennej data
którą sobie tutaj stworzyliśmy i teraz to
co jest tutaj kluczowe to że just będzie sprawdzał co
tak naprawdę dzieje się podczas właśnie wykonywania spełniania
tego promise'a i w tym momencie on będzie wstrzykiwał
swoją wartość do tego komponentu za pomocą mock resolved value
więc to co chcemy teraz zrobić to powiedzieć słuchaj jeśli
w naszym komponencie zostanie wykonany axios get to
my chcemy żeby to w wyniku jakby wykonania tej metody nie dostał
się żaden element pobrany z api tylko my
podmienimy te dane w locie jakby przez to co
tutaj podamy i
wiemy że w odpowiedzi z naszego serwera dostajemy data
a w środku mamy tablice z użytkownikami teraz
pewnie zauważysz że po prawej o ile jeszcze u ciebie tego nie naprawili kiedy robisz
ten kurs pojawił się taki bardzo brzydki błąd i
tym błędem na razie się nie przejmuj za chwilę pokażę ci jak możemy go naprawić
on w żaden sposób nie psuje naszych testów więc na chwilę możemy go po
prostu zignorować i teraz wracając do naszego testu tutaj
musimy wykorzystać pewną metodę która
jest w naszym testing library nazywa się wait i pozwala na zaczekanie aż
pewien element pojawi się asynchronicznie właśnie w naszym
komponencie to znaczy że najpierw testujemy czy
jest on loading ten loading zawsze jest na samym początku inicjalnie pokazywany a
później musimy zaczekać chwilkę aż załadują się nasze dane musimy
poczekać co najmniej 300 milisekund bo tyle zmockowaliśmy sobie w naszym linku tutaj czas
oczekiwania to jest minimalny czas oczekiwania na ten request więc
teraz zróbmy sobie tak że stworzymy sobie consta userinfo
w którym powiemy że
będziemy właśnie wykonywać jakąś akcję asynchroniczną i jakby
sygnalizujemy to właśnie za pomocą await następnie wykorzystujemy
ten wait który tutaj zaimportowaliśmy podajemy do niego funkcję strzałkową wykorzystujemy
get by text i wpisujemy po prostu w regex'ie adam
wiem że jest z wielkiej litery więc po prostu możemy tak to wpisać i
teraz tak naprawdę żeby wiedzieć żeby mieć pewność że to zapytanie
do api poszło poprawnie rozwiązało poprawnie jakby to
co otrzymało i też że ta funkcja została wywołana odpowiednią
ilość razy to sprawdzamy trzy rzeczy pierwsza spodziewamy
się że userinfo znajduje się w dokumencie zgadza
się nie zgadza się mamy
jakiś błąd zaraz znajdziemy co jest jego przyczyną wydaje mi się
że po prostu używają złej funkcji z tego co pamiętam w react testing library
mamy wait ale mamy też wait for element i tutaj mamy właśnie
napisane że to jest funkcja która pozwala na zaczekanie aż jakiś
element pojawi się w naszym domie więc teraz jeśli wpiszę wait for element to
wydaje mi się to naprawi naszą sytuację tak nasz test teraz przechodzi
czyli element o nazwie adam to znaczy
z tekstem adam w środku pojawił się w naszym dokumencie drugą
rzeczą którą chcemy sprawdzić to czy axios get został
wywołany raz to
jest bardzo ciekawe bo widzimy że ta
funkcja to zapytanie axios get został wywołany trzy razy ale
nie martw się to jest bardzo ciekawy case i bardzo łatwo możemy go rozwiązać
jeden wynika z dość poważnej takiej luki optymalizacyjnej
use effect odpala nam się kilka razy dlatego
że nie podaliśmy tutaj dependencies use effect jako ten drugi argument przyjmuje
listę rzeczy które ma brać pod uwagę żeby wywołać się po raz
kolejny żeby zapdejtować komponent więc jeśli tutaj wpiszemy na
przykład users data to wtedy za każdym
razem kiedy wywoła się ta funkcja zmieni
się users data wywoła się znowu znowu się zmieni users data
prawdopodobnie i mogłoby się nam to zapętlić więc cokolwiek tutaj
wpiszemy to jest jakby w scope'ie naszego komponentu to się zmieni to wtedy wyrenderuje
nam się na nowo ten komponent wpisując tutaj pustą tablicę mówimy słuchaj masz
się zamontować tylko raz więc ten drugi argument jest
odpowiednikiem metody should component update teraz jeśli
zapiszę to to zobaczysz że nasz test odpali ten
axios get tylko dwa razy i
tak się stało mamy teraz info że ta funkcja
axios get odpaliła się dwa razy i pewnie zastanawiasz się dlaczego się tak cieszę cieszę
się z tego względu że teraz wystarczy tylko wykorzystać
jest reset all mocks które
wrzucimy dodatkowo do takiej specjalnej metody która się nazywa after each
w niej musimy stworzyć sobie funkcję strzałkową i
to co ona robi jak sama nazwa zresztą wskazuje to po każdym wykonanym teście
po każdym tym it wywołuje te funkcje ten callback który tutaj ma wpisane
a ten callback zawiera reset all mocks który działa podobnie jak to co
wcześniej ci pokazywałem z funkcją jest fn która się nazywa mockup reset
to robi dokładnie to samo wszystkie funkcje zresztą sama nazwa na to wskazuje wszystkie
funkcje zmockowane w naszym teście zostają zresetowane ale
czemu to się działo dwa razy pewnie się domyślasz dlatego że
nasz komponent jest renderowany dwa razy w tym teście w tym miejscu i w tym miejscu więc
ta funkcja use effect została wywołana de facto
dwa razy w naszym komponencie bez tego uprzątnięcia tego pierwszego wykonania
tego pierwszego renderu i pierwszego de facto wywołania
tej funkcji ten test by nam nie przychodził i do brzegu
ostatnia rzecz którą musimy sprawdzić to to have
been called with i tutaj musimy wpisać nasz
url więc to co najlepiej zrobić i
to jest też taka powiedzmy rada optymalizacyjna to
trzymać sobie ten url w jakimś pliku typu api
js możemy
to nazwać jak chcemy ale może się to nazwać na przykład root
api i teraz zaimportujemy to sobie tutaj
i dodatkowo
jeszcze w naszym teście i
wpiszemy to po prostu tutaj wtedy zarówno nasz komponent jak i nasz test
mają dostęp do tego linka okej teraz ostatnia sprawa czyli ten paskudny
błąd tutaj on wynika generalnie z tego że
twórcy reacta przeoczyli parę rzeczy i dodali
update do react dom niedawno w wersji alpha więc w momencie
kiedy oglądasz ten kurs ja muszę zrobić tutaj takiego małego haka ale możliwe że jak będziesz
robić już ten kurs możliwe że już to naprawią tak że będzie w oficjalnej wersji w nowym
realease'ie react'a natomiast ja teraz muszę podmienić dwie paczki aby ten
błąd zniknął to jest react i react dom więc teraz odpalę sobie nowe
okno w terminalu przejdę do katalogu w którym jest mój projekt w
moim przypadku jest to numer cztery i
tutaj dodam npm install react małpa 16
9 0 alfa kropka 0 i
react myślnik dom małpa i tutaj dokładnie ta sama wersja
alfa kropka 0 po zainstalowaniu tych
paczek ten błąd powinien zniknąć ponieważ te paczki
a właściwie ta wersja dokładnie ta wersja naprawia właśnie ten błąd
który się pojawia w testach więc teraz jeśli odpalimy sobie test na nowo
to nasze testy są wolne od błędów ten
błąd zniknął i wszystko działa jak należy