React: Piszemy pierwszy test

16.8.x

0:00Cześć, skoro już pokazałem ci jest'a, to teraz czas na bibliotekę,

0:04która bardzo ułatwi nam pracę z React'em, generalnie mamy takie

0:08dwa nurty w React'cie, wcześniejszy jest enzyme, to

0:12jest taka biblioteka stworzona przez airbnm właśnie do testowania React'a. Natomiast

0:16nowszym podejściem jest dom testing library, który ma swoją taką

0:21odnogę, nazywa się React testing library i obecnie jest to

0:25najpopularniejsza biblioteka do testowania aplikacji React'owych i

0:29zanim napiszemy pierwszy test, używając tej biblioteki to najpierw zainstalujmy

0:34sobie ją w naszym projekcie. Okej, skoro nasza biblioteka została zainstalowana, to

0:38teraz spróbujmy napisać jakiś taki najprostszy test na świecie, może heading'u

0:43na przykład stworzymy sobie heading test js, zaimportujemy

0:49sobie React'a, zaimportujemy też sobie

0:53render z react testing library i

0:59musimy jeszcze do naszego testu zaimportować oczywiście nasz heading i teraz

1:07przyjęło się, że taki element oplatający wszystkie inne

1:11testy nazywa się describe. Działa to w

1:15taki sposób, że tutaj piszemy heading component czyli nazywamy wszystkie

1:20testy, które będą dotyczyć jakiegoś elementu w naszym pliku, właśnie opisujemy

1:24tutaj. Stąd jakby nazwa tej metody describe, a teraz

1:30jako funkcję strzałkową podajemy sobie dalsze testy. Załóżmy,

1:35że chcemy sprawdzić czy heading renderuje tekst,

1:39który mu podajemy. Możemy to zrobić pobierając, destruktyzując

1:46właściwie taką wartość jak get by text, którą

1:50wyciągamy właśnie z metody render, która renderuje

1:54nam nasz heading. Odpalmy sobie teraz nasze testy

1:59i zobaczymy, że on failure, a wynika to z tego, że on nie

2:03rozumie czym jest theme provider, więc w naszym teście, żeby nasz komponent

2:07działał poprawnie musimy zaimportować sobie theme provider ze styled components

2:14i dodatkowo musimy jeszcze zaimportować sobie nasz theme theme main

2:23theme i teraz ten heading, który

2:27mamy tutaj musimy opleść dodatkowo w theme provider, któremu

2:34podamy właśnie theme w taki sposób. Nasz

2:39heading wtedy możemy wrzucić do naszego theme providera i nagle nasz komponent

2:43rozumie o co chodzi, ale teraz jak przetestować to czy ten tekst, który się tutaj pojawia

2:48jest faktycznie renderowany, możemy to zrobić poprzez get by text,

2:52który pobiera sobie z wyrenderowanego testu nasze elementy

2:57i sprawdza czy zawierają one to co podajemy tutaj w nawiasie w tej metodzie, więc

3:04jeśli na przykład chcielibyśmy, żeby zawierał Hello Roman, to nasz test failuje. Wynika

3:12to z tego, że mam teraz to pokazuje, nasz komponent zawiera hello a nie hello

3:16roman i w ten sposób napisaliśmy pierwszy

3:20test komponentu React'owego i z racji, że w tym kursie chciałem tylko

3:24z zajawić jak wyglądają takie bardzo podstawowe testy w javascripcie i w React'ie

3:30to na tym sobie skończymy. Masz zainstalowane wszystko co potrzebujesz,

3:34żeby zacząć testować inne komponenty. Zachęcam cię do tego żeby

3:38poeksperymentować z tymi bibliotekami, tak naprawdę w praktyce pisanie

3:43testów wygląda tak, że nikt tego nie robi z głowy. Raczej wszyscy siedzimy

3:47po prostu w dokumentacji, sprawdzamy jak możemy coś przetestować, sprawdzamy różne

3:51matcher'y, metody, które umożliwiają testowanie tych komponentów i ciebie

3:55zachęcam do tego samego i jeszcze raz zanim się pożegnamy

3:59spójrzmy z dumą na aplikację, która stworzyliśmy. Mamy tutaj naprawdę kawał

4:04dobrej roboty za nami. Mamy mechanizm,

4:08który pozwala nam na dodawanie do naszego backend'u nowych notatek. Możemy

4:12je usuwać, możemy podglądać jak one wyglądają wewnątrz. Stworzyliśmy

4:18tutaj storybook'a style components system atomów, molekuł i organizmów. Stworzyliśmy

4:23dość zaawansowaną strukturę redux'a i co więcej to

4:28wszystko czeka na ciebie, żeby to dopracować, żeby te aplikacje po prostu

4:32doprowadzić do samego końca, bo jest tutaj wiele rzeczy, które specjalnie

4:36dla ciebie zostawiłem, żeby zostawić ci po prostu pole do manewru do

4:40eksperymentów. Ta aplikacja jeśli zostanie skończona pozwoli

4:44ci na zrozumienie praktycznie wszystkiego. Jeśli chodzi o taki średnio

4:49zaawansowany poziom korzystania z React'a. Jeszcze raz bardzo ci

4:53dziękuję za udział w tym kursie. Mam nadzieję, że pozwolił ci zrozumieć bardzo wiele aspektów

4:57związanych właśnie z tym średnio zaawansowanym React'em, a ja zapraszam

5:01cię już wkrótce na bardziej zaawansowany kurs React'a gdzie

5:05właśnie dopracujemy metody typu autoryzacja gdzie sprawdzimy

5:10jak możemy bardziej w zaawansowany sposób testować nasze komponenty

5:14i wiele, wiele, wiele innych rzeczy, które React jeszcze przed

5:18nami ukrywa. Do zobaczenia w następnym kursie.