Cześć wszystkim, ostatnio widziałem kilka pytań dotyczących testowania w ekosystemie JavaScript. Oto niektóre pytania:

• Jak przetestować wywołania API?
• Jak przetestować axios?
• Jak przetestować wywołania API uruchomione z hooka useEffect?
• Jak przetestować wywołania API z React Query?

Scenariusz

Wyobraźmy sobie, że mamy komponent, który będzie uruchamiał żądanie API, korzystając z useEffectpodpięcia lub useQueryniestandardowego podpięcia. Po otrzymaniu danych niszczymy z nich nazwę i renderujemy. Oto możliwa realizacja

Teraz typowym sposobem na przetestowanie tego byłoby wyrenderowanie naszego komponentu i oczekiwanie, aż nazwa zwrócona przez wywołanie API zostanie wyświetlona na ekranie. Korzystając z React Testing Library, oczekiwany test powinien wyglądać następująco:

Teraz pytanie brzmi, jak upewnić się, że żądania w naszych testach zwracają oczekiwane dane?

Korzystanie z adaptera axios-mock-adapter

axios-mock-adapterto pierwsze rozwiązanie. Pozwala na kpiny z axios, jednocześnie dając bardziej czytelną składnię do jawnego zadeklarowania tego, co chcesz zrobić. W poniższym przykładzie pobieramy odwołanie do axios i tworzymy nową MockAdapter instance. Using this instance, we then use themetodę onGet`, aby upewnić się, że kiedy odpalimy żądanie GET do naszego oczekiwanego adresu URL, zwrócimy żądane dane.

Ręczne kpienie z axiosów

Możesz użyć Jest do samodzielnego wyśmiewania axiosów i unikania instalowania zewnętrznych bibliotek. W poniższym podejściu używamy jest.mockdo mockowania axios, a następnie w naszym teście mockujemy implementację metody get, aby zwrócić nasze oczekiwane dane dla oczekiwanego adresu URL.

Jeśli nie podoba ci się podejście, możesz utworzyć axios.jsplik w __mocks__katalogu i dodać tam następujący fragment.

Kiedy uruchomisz swój test, Jest automatycznie pobierze ten plik i udaje ci axios.

Korzystanie z MSW

MSW zmieniło sposób, w jaki wszystko testuję. Mimo że mamy wszystkie inne podejścia, o których wspomniałem powyżej, utrzymywanie makiet może szybko eskalować i po pewnym czasie otrzymasz ich kilka. Aby zaoszczędzić czas i scentralizować wszystko, używam MSW.

W tym scenariuszu wszystko, co musimy zrobić, to utworzyć procedurę obsługi dla naszego żądania, która zwraca dane, których oczekujemy. Następnie albo dodajemy procedurę obsługi do naszej listy programów obsługi, albo wywołujemy server.usew naszym teście, aby przesłonić nasze funkcje obsługi .

Jeśli chcesz dowiedzieć się więcej o MSW, przeczytaj mój wpis na blogu o tym.

Podsumowując

Jak widać, podczas testowania wywołań API istnieje kilka opcji, z których możesz skorzystać. Chociaż teraz wolę używać MSW, w przeszłości korzystałem ze wszystkich innych opcji.

Mam nadzieję, że ten wpis na blogu okazał się przydatny. Czekajcie na więcej i do zobaczenia następnym razem!

Pierwotnie opublikowane pod adresem https://www.danieljcafonso.com .