React Native Testing Library (RNTL) jest prostym rozwiązaniem, które służy do testowania komponentów React Native. Niedawne wydanie wersji React Native Testing Library 2.0 zapewnia nowe, przydatne funkcje. Dopracowane interfejsy API czy poprawa zgodności z innymi implementacjami biblioteki testowej są efektem ciężkiej pracy członków zespołu.

Czym jest React Native Testing Library?

Przede wszystkim RNTL zapewnia funkcje użytkowe react-test-renderer, dlatego programiści są zawsze na bieżąco z najnowszymi funkcjami React.

Nowa wersja — React Native Testing Library 2.0

W celu ułatwienia przejścia do nowej wersji wydany został przewodnik migracji, w którym znajduje się opis wszystkich wprowadzonych zmian. Poniżej opiszemy najważniejsze ulepszenia nowej wersji.

Wprowadzone ulepszenia i poprawki

Ze względu na przekroczenie daty wsparcia dla Node 8, cały ekosystem przeniósł się do wersji Node 10.

Wśród najistotniejszych zmian jest także usunięcie renderowania shallow. Ze względu na pomijane błędy aplikacji, nie jest najlepszym sposobem na renderowanie komponentów React.

Następną poprawką jest domyślne wzywanie cleanup po każdym teście. Warunkiem jest obsługa przez platformę hooka afterEach. Pozwoli to usunąć z plików testowych wszelkie wywołania afterEach(cleanup).

W poprzedniej wersji formuły getByTestId (a także queryByTestId), pozwalały zapytaniom znajdować komponenty niestandardowe. Nie były one przekazywane do testID komponentów rodzimych. Błąd powodował, że znajdowano więcej testID niż w natywnej hierarchii.

Automatycznie zapakowane są teraz połączenia waitFor i dalej – findBy do narzędzia act. Celem jest unikanie ostrzeżenia act w testach obejmujących asynchroniczną mutację stanu.

Inne przełomowe zmiany

Godne uwagi jest wprowadzenie zapytania findBy. Jest to kombinacja wspomnianego wcześniej zapytania waitFor oraz getBy. Podstawowe argumenty są dokładnie takie same jak odpowiednie zapytania getBy. Jednak, zamiast rzeczywistego elementu zwracają Promise. Poniżej znajduje się przykładowy kod, z zastosowaniem tego zapytania.

```js

await expect(findByText('Some Text')).resolves.toBeTruthy();

await expect(findByText('Some Text', { timeout: 1000 })).resolves.toBeTruthy();

```

Następnym wprowadzonym operatorem jest within. Korzysta się z niego w przypadku zapytań elementów o konkretną listę powtarzających się elementów. Jego celem jest pozwolenie na wykonywanie zapytań o wybranym elemencie, a także jego elementach potomnych.

Niebezpieczne oznaczenia

Z pewnością należy zwrócić uwagę na oznaczenie zapytań byType oraz byProps jako niebezpieczne. Całą rodzinę tych formuł oznaczono przedrostkiem UNSAFE_. Nie zaleca się korzystać z nich, dlatego, że często powodują mniej wiarygodne testy. Podczas gdy te funkcje są oznaczone jako niebezpieczne, wciąż są zachowane te interfejsy API. Jest tak dlatego, że autorzy nie są jeszcze w stanie zapewnić prostej ścieżki migracji, a są użytkownicy, którzy prawdopodobnie spędzili wiele godzin na napisanie testów.

Podsumowanie

Autorzy biblioteki React Native Testing v.2.0 pracują dalej, także nad dostarczeniem wysokiej jakości przewodników i przykładów testowania rodzimych modułów React Navigation, Redux czy JS. Mają oni nadzieję, że powyższe aktualizacje poprawią komfort codziennej pracy.

Źródła:

• https://callstack.com/blog/react-native-testing-library-2-0
• https://callstack.github.io/react-native-testing-library/