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ść w poprzedniej lekcji poustawialiśmy sobie kilka rzeczy związanych z testowaniem
naszej aplikacji w react na szczęście korzystamy
z create react app więc nie musieliśmy konfigurować
całego środowiska od podstaw bo naprawdę to jest katorga przechodziłem
przez to i naprawdę nie polecam ale wróćmy sobie do tego jedynego testu
który na razie mamy w naszej aplikacji i przypomnijmy sobie kilka rzeczy związanych z testowaniem
przede wszystkim odpalmy sobie testy żeby one po prostu się za każdym razem kiedy coś
zmienimy wywalmy wszystko co mamy tutaj na razie i
jak zobaczysz nasz test nadal będzie przechodził tutaj zmieńmy ten
napis żeby nie był mylący pierwsza
podstawowa zasada jeśli chcemy napisać test to piszemy albo it
z nawiasem albo test to
oczywiście visual studio code chce mi podpowiadać coś co napisać a ja wiem
co chcę napisać i
efekt tego będzie dokładnie taki sam czy napiszemy it czy napiszemy test to się
stosuje zamiennie często widzę właśnie it pierwszym argumentem który podajemy
do tej funkcji jest string w którym piszemy opis tego jak czym
jest nasz test co ma robić a to oczywiście funkcja w
której piszemy nasz test i dopóki nie napiszemy tutaj
jakichś założeń czegoś co ten test ma sprawdzać to on będzie
zawsze przechodził mogę tutaj napisać roman w stringach na przykład i
on nadal będzie przechodził ale załóżmy że stworzymy sobie funkcję
która będzie dodawać dwie liczby do siebie ona będzie nam
zwracać sumę tych liczb teraz
jeśli wykorzystamy tę funkcje nawet logując
ją po prostu to
uzyskamy w console logu sumę którą ta funkcja
zwraca ale oczywiście testy nie służą do tego żeby robić
console logi tylko do tego żeby sprawdzać czy coś przechodzi jeśli przechodzi to test
przechodzi też a jeśli coś nie przechodzi to testy failure
jak to się mówi czyli nie przechodzą i teraz żeby
tego dokonać możemy wykorzystać metodę expect w
której podajemy jakąś wartość w
tym przypadku chcemy żeby to była wartość zwrócona z naszej metody a
następnie możemy wykorzystać szereg tak zwanych match'erów które pozwalają nam
na to żeby sprawdzić właśnie czy na przykład wynik tego
równania wynosi 20 jeśli sobie przejdziemy do jest'a to zobaczymy że
mamy tutaj faktycznie dokładnie taką samą notację z tym że tutaj
nie ma funkcji tylko jest po prostu dwa plus dwa moglibyśmy tak napisać ale jednak
chciałem przetestować jakiś taki żywy kod więc wpisałem tutaj po prostu
moją funkcje ale tutaj mamy faktycznie taką metodę która się nazywa
to be która sprawdza czy wynik tego co mamy tutaj w nawiasach
jest równy temu co wpiszemy tutaj w nawiasach w tym przypadku chcemy
żeby to było 20 ale najpierw wpiszę coś innego na przykład 11 w ten
sposób zobaczymy że test nie przejdzie i to co ciekawe to od razu dostajemy informację
słuchaj chciałeś mieć 11 a dostałeś 20 coś tutaj jest nie tak z tym testem
albo z tą funkcją o co chodzi jeśli wpiszę teraz
20 to nasza funkcja przechodzi
i w poprzednim kursie właśnie pokazywałem kilka takich matcherów kilka sposobów
na to co tutaj można zrobić z tym jestem żeby po prostu testować
funkcje i nie będę do tego wracał bo możesz spokojnie sobie wrucić po
prostu do tej części kursu react w praktyce w której
opowiem o tych matcherach teraz przejdźmy do tego przykładu cofnijmy
się do momentu w którym ten test wyglądał tak jak przed chwilą na
samym początku i sprawdźmy co tutaj się dzieje tak
naprawdę nie dzieje się nic czego byśmy nie znali ponieważ jak
spojrzymy sobie na przykład na app js a właściwie na index js to
zobaczymy że tutaj również importujemy react dom i po prostu dodajemy do
niego nasz zaimportowany komponent app oraz
wskazujemy element który znajduje się w index html który ma klasę
a właściwie id root i to do niego montujemy naszą
aplikację teraz jak sobie zerkniemy na nasz test to robimy dokładnie to samo importujemy app
importujemy react dom tworzymy taki sztuczny komponent
właściwie element html div i to do
niego montujemy naszą aplikację warto tutaj od razu powiedzieć
że testowanie generalnie aplikacja testowanie kodu to
jest w gruncie rzeczy takie udawanie rzeczy takie makietowanie
takie po prostu stawianie struktur z kartonu które udają pewne
rzeczy i to na nich testujemy pewne rozwiązanie i w dalszej części kursu
to będzie bardzo widoczne ale to jest właśnie jeden z takich elementów nazwijmy to kartonowych
jak ja to nazywam czyli właśnie sztuczny div do którego montujemy naszą aplikację
i to jakby w takiej właśnie przestrzeni w takim sandbox'ie zawieszony
zostanie nasz komponent który chcemy przetestować i w trzeciej linijce tekstu po
prostu odmontowujemy nasz komponent po to żeby uprzątnąć po prostu
nasze testy ponieważ jeśli mielibyśmy trzy testy obok siebie i żaden
element nie zostałby odmontowany to one pozostałyby w tym dokumencie testowym
nikt ich by tam nie od montował za nas więc po to właśnie jest
tego typu metoda która odnotowuje nasz komponent
i teraz spróbujmy sobie coś zrobić z tym załóżmy
że w naszym app jak sobie zerkniemy to
mamy na przykład div który ma klasę app ona
co prawda jest zaimportowana jako moduł z tego pliku docelowo to jest klasa
app ale w javascripcie widzimy że jest to tak
naprawdę css modules na szczęście create react app
wspiera to że my importujemy sobie css modules i
tłumaczy to też tam że słuchaj to nie jest jakaś tam klasa która
zostanie później zamontowana której nie da się odczytać ponieważ dostaje to takie unikalne
id to będzie po prostu klasa która będzie wyglądała tak jak tutaj czyli
app wcześniej trzeba było robić kilka trików żeby to wszystko pokonfigurować
na szczęście w create react app nie musimy tego robić i te klasy są czytelne dla
naszych testów więc jeśli sobie odpalimy ten
test to możemy sobie na przykład z tego diva do
którego montujemy naszą aplikację wyciągnąć ten
oto element może podzielę teraz ekran na dwa żeby było łatwiej tutaj
sobie zostawimy ten element a tutaj odpalimy sobie ten test więc
to co chcę zrobić to wyciągnąć za
pomocą query selector'a tak jak to robimy normalnie przy manipulacji domem
po prostu wpisując document któryquery selector tak jak tutaj wpisujemy div bo tak
naprawdę ten div stał się naszym dokumentem do niego zamontowaliśmy naszą aplikację podajemy
tutaj nazwę klasy i w ten sposób złapaliśmy
sobie ten element po czym to poznać po tym że możemy sobie wylogować
app div inner html i
co nam się ukaże w console logu zawartość
tego co w domyślnym root'cie czyli w
komponencie users tutaj pamiętaj o bardzo istotnej rzeczy
żeby ta linijka na samym końcu naszego testu ponieważ jeśli odmontujemy
nasz element wcześniej niż będziemy chcieli go złapać naszym query selectorem
to on po prostu nie będzie istniał będzie nullem więc odmontowanie
zawsze dzieje się na końcu nie musisz o tym jakoś super pamiętać ponieważ w
dalszej części kursu w ogóle nie będziemy z tego korzystać to będzie dla nas robione automatycznie
właśnie przez paczkę którą skonfigurowaliśmy sobie wcześniej w pliku
setup test o właśnie to miejsce odpowiadać
będzie za uprzątanie naszego domu po wykonaniu testu moglibyśmy
w tym momencie stworzyć sobie na przykład test który nazywa
się app renders default route oczywiście
nie mówię że to jest jakaś dobra praktyka że tak się powinno to testować ale możemy to tak zrobić
po prostu wpisując expect app div inner html i
tutaj używając match'era to contain i widzimy
że tutaj mamy users czyli może wypisać users po tym poznamy że nasz test
wyrenderował właśnie domyślną ścieżkę czyli users jeśli chcemy
żeby ten test nie przeszedł to możemy wpisać contact czyli
inną ścieżkę i wtedy nasz test będzie failował co
więcej dostaniemy informację co tak naprawdę dostaliśmy a
czego oczekiwaliśmy i tutaj zobacz że to
co podajemy tutaj w tym stringu w contain niekoniecznie musi być idealnym odwzorowaniem
tego jak wygląda dokładnie ten strings inner html ponieważ tutaj jeszcze mamy
diva mamy h2 z klasą a tak naprawdę my sprawdzamy tylko czy jest users
i to właśnie tak działa to contain że on tylko sprawdza czy ten fragment który wpisaliśmy
znajduje się w tym stringu na zasadzie po prostu
regex'a jeśli wrócę do users to nasz test przechodzi
ale nie ukrywajmy że tego typu pisanie testów jest
dość łopatologiczne i po to właśnie powstały abstrakcje
typu enzyme albo jak react testing library żeby trochę ułatwić nam życie żebyśmy
nie musieli pisać tego typu rzeczy żebyśmy mogli łatwiej łapać
nasze elementy żebyśmy łatwiej mogli sprawdzać co one zawierają i tak dalej więc
w następnej lekcji zaczniemy sobie korzystać już z react testing library