React: Czym jest JEST?

16.8.x

0:00Cześć, zanim przejdziemy do testowania naszych komponentów, chcę ci opowiedzieć

0:04czym jest jest, jest jest to stworzone przez zespół React'a test runner, który

0:09odpalamy z naszej konsoli i dzięki temu możemy właśnie uruchamiać

0:13wszystkie testy które znajdują się w naszym projekcie. Na szczęście create react app

0:17został stworzony w taki sposób, że jest już jest w niego wpisany, nie trzeba go konfigurować. Wszystko

0:22mamy gotowe. Tylko wystarczy zacząć to używać i właśnie

0:26przygotowałem tutaj plik index test js, bo tak wygląda

0:30plik z testem, to znaczy za każdym razem kiedy będziemy chcieli gdzieś dodać

0:34jakieś test to wystarczy, że dodamy na przykład do naszego button'a plik

0:39button test js i dzięki temu rozszerzeniu

0:43test js, jest będzie wiedział, który z tych plików jest testem,

0:48który należy odpalić i przetestować, ale zanim przetestujemy

0:52jakikolwiek komponent. Pokażę ci jak w ogóle pisać testy w jest'cie. Przede

0:58wszystkim mając już jeden plik z testem możemy sobie uruchomić naszego jest'a poprzez

1:02npm run test. Jak

1:08widzisz test sfail'ował, ponieważ nie ma żadnego testu. Nawet jest informuje

1:12nas, że musimy wpisać chociaż jeden test, żeby ten test przeszedł, więc teraz

1:16spróbujmy to zrobić. Generalnie są dwie konwencje, które

1:20możemy używać, żeby pisać nasze testy albo używamy it albo

1:28używamy test. Wybór należy do ciebie, znaczą

1:32one dokładnie to samo. Ja zawsze używam it z racji tego, że po

1:36prostu szybciej można to napisać i teraz jak widzisz tutaj, po

1:40lewej stronie. Tak wygląda wzór testu, ale to już jest React'owy test, a my na

1:44razie sobie przejdziemy do testów takich suchych, bez żadnego React'a

1:48bez niczego, po prostu chcę ci pokazać jakie możliwości daje nam sam jest. Załóżmy,

1:53że stworzymy sobie funkcję, która przyjmuje 2 parametry i

1:57w rezultacie te parametry zwraca dodane, chcemy

2:02taką funkcję przetestować, więc możemy wpisać it adds two numbers,

2:09po przecinku robimy funkcję strzałkową i wpisujemy

2:16ciało naszego testu, więc mamy na przykład

2:20taką metodę jak expect, która mówi wprost, że spodziewaj

2:25się że add to, po dodaniu 1

2:29i 2 wyniesie 3,

2:34czyli rezultat dodania jedynki i dwójki przez

2:38naszą funkcję add to ma wynosić 3. Jeśli

2:43jestem dobry z matematyki, a przynajmniej wiem jak dodawać podstawowe liczby

2:48to powinno działać. Okej, mój

2:52błąd expect zamykamy, czyli

2:58w expect'ie wsadzamy naszą funkcje i dopiero

3:02po zamknięciu klamry z expect dajemy to be 3 i teraz

3:07powinno przejść. Jak widzisz, nasz test przeszedł. Brawo,

3:11napisaliśmy nasz pierwszy test w jest'cie. Teraz pomyślimy nad jakimś

3:15innym testem. Powiedzmy, że mamy tutaj shopping list i mamy

3:21tutaj krakersy, chipsy, co

3:25jeszcze zawiera gluten, bułki, makaron i teraz

3:31chcemy sprawdzić czy nasza

3:35shopping lista zawiera jakieś zdrowe jedzenie. Załóżmy,

3:45że zdrowym jedzeniem w naszym rozumieniu jest Jabłko,

3:49czyli mówimy expect shopping list to

3:54contain apple i to jest

3:58nowa metoda, tak zwany nowy matcher, który pozwala nam

4:02sprawdzać czy zmienna, którą tutaj dodaliśmy, a właściwie to const zawiera chociaż

4:07jedno jabłko, czyli string'a z taką zawartością. Teraz oczywiście

4:12odpuścimy sobie ten test. To jak widzisz test

4:16nie przeszedł, bo nasza lista nie zawiera apple. Jeśli dodamy sobie tutaj, a dopiero

4:24teraz zauważyłem, że wszystkie nazwy miałem po polsku. No mniejsza o to, ale apple

4:28dodaliśmy i nasz test przeszedł pomyślnie i może napiszemy sobie jeszcze

4:32jakąś ostatnią funkcję. Mamy jakąś taką funkcję, która

4:36dodaje nam po prostu 100 do każdej ceny, którą wpiszemy i teraz chcemy,

4:41żeby każda, każda cena była

4:46większa od 100. Czyli jeśli ta funkcja działa poprawnie to

4:52powinno tak być i teraz expect, załóżmy,

5:00że dodajemy cenę 1 i mamy

5:09kolejne matcher, to be greater than. Jak widzisz, tutaj mamy tych matcher'ów trochę więcej,

5:13mamy jeszcze less then, less then or equal. Generalnie

5:18cała dokumentacja jest'a jest bardzo fajna. Polecam ci ją przejrzeć. Tutaj

5:22jest naprawdę wiele rzeczy, które możesz się dowiedzieć o tym jak pisać poprawnie testy,

5:26oczywiście nie jest to związane z React'em, to jest po prostu czysty

5:30JavaScript i skoro już masz takie podstawy

5:35tego jak pisać testy w jest'cie to przechodzimy sobie do następnej

5:39lekcji.