Pisanie testów może być żmudne i powtarzalne. Możesz mieć wrażenie, że marnujesz cenny czas, który wolisz wykorzystać na pracę nad funkcjami. Jeśli jednak chcesz dostarczać aplikacje, do których masz zaufanie, powinieneś pisać testy.

Testowanie pozwala wyłapać błędy i błędy, które w przeciwnym razie mogłyby zostać wysłane do użytkowników. W związku z tym poprawia komfort użytkowania aplikacji i pozwala uniknąć konieczności debugowania kodu produkcyjnego.

Możesz łatwo pisać testy w React za pomocą Jest i React Testing Library.

Co powinieneś przetestować w React?

Podjęcie decyzji, co przetestować, może być trudne. Chociaż testy są świetne, nie powinieneś testować każdej linii w swojej aplikacji React. W ten sposób otrzymasz kruche testy, które przerywają najmniejsze zmiany w Twojej aplikacji.

Zamiast tego należy testować tylko implementację użytkownika końcowego. Oznacza to testowanie, w jaki sposób użytkownik końcowy będzie korzystał z Twojej aplikacji, zamiast testować wewnętrzne działanie Twojej aplikacji.

instagram viewer

Ponadto upewnij się, że testujesz najczęściej używane składniki w swojej aplikacji, takie jak strona docelowa lub składnik logowania. Przetestuj także najważniejsze funkcje w swojej aplikacji. Na przykład mogą to być funkcje przynoszące pieniądze, takie jak funkcja koszyka na zakupy.

Decydując o tym, co przetestować, należy pamiętać, że nigdy nie należy testować funkcjonalności obsługiwanej przez React. Na przykład, zamiast testować poprawność właściwości, możesz użyć React PropTypes.

Testowanie komponentu przycisku

Pamiętaj, że powinieneś testować tylko implementację komponentu dla użytkownika końcowego, a nie jego wewnętrzne działanie. W przypadku komponentu przycisku oznacza to sprawdzenie, czy renderuje się bez awarii i wyświetla się poprawnie.

Utwórz nowy plik w src folder o nazwie Button.js i dodaj następujący kod.

funkcjonowaćPrzycisk({wartość}) {
zwrócić (
<przycisk>{wartość}</button>
 )
}
eksportdomyślna Przycisk

Button.js akceptuje właściwość o nazwie value i używa jej jako wartości przycisku.

Pisanie pierwszego testu

A aplikacja do tworzenia aplikacji jest preinstalowany z Jest i React Testing Library. Jest to lekka biblioteka testowa z wbudowanymi funkcjami mockingu i asercji. Działa z wieloma Frameworki JavaScript. Z drugiej strony biblioteka testów React zawiera funkcje, które pomagają testować interakcje użytkowników z komponentami.

Utwórz nowy plik o nazwie Przycisk.test.js w folderze src. Domyślnie Jest identyfikuje pliki z przyrostkiem .test.js jako pliki testowe i automatycznie je uruchamia. Inną opcją jest dodanie plików testowych do folderu o nazwie __testy__.

Dodaj następujący kod w Button.test.js, aby utworzyć pierwszy test.

import { renderowanie } z „@biblioteka-testowa/reaguj”;
import Przycisk z '../Przycisk';
opisać('Komponent przycisku', () => { 
 test('Renderuje komponent przycisku bez awarii', () => {
 renderowanie(<Przycisk />);
 }); 
})

Ten test najpierw definiuje, na czym polega test przy użyciu bloku opisu dostarczonego przez Jest. Ten blok jest przydatny do grupowania powiązanych testów. Tutaj grupujesz testy dla komponentu Button.

Wewnątrz bloku opisu masz pierwszy test w bloku testowym. Ten blok akceptuje ciąg znaków opisujący, co test powinien zrobić, oraz funkcję zwrotną, która wykonuje oczekiwanie.

W tym przykładzie test powinien renderować składnik Button bez awarii. Metoda render z React Testing Library wykonuje właściwy test. Sprawdza, czy składnik Button jest poprawnie renderowany. Jeśli tak, test przechodzi, w przeciwnym razie kończy się niepowodzeniem.

Korzystanie z ról w celu znalezienia przycisku

Czasami chcesz sprawdzić, czy element został zamontowany. Metoda screen posiada funkcję getByRole(), której można użyć do pobrania elementu z DOM.

screen.getByRole('przycisk')

Następnie możesz użyć pobranego elementu do przeprowadzenia testów, takich jak sprawdzenie, czy istnieje w dokumencie lub czy został poprawnie wyrenderowany.

getByRole() jest jednym z wielu zapytań, których możesz użyć do wybrania elementów w komponencie. Sprawdź inne rodzaje zapytań w The Biblioteka testów React Przewodnik „Którego zapytania powinienem użyć”. Również inna niż rola „przycisku”, większość semantyczne elementy HTML mieć niejawne role, których możesz użyć do wykonania zapytań. Znajdź listę ról od Dokumenty MDN.

Dodaj następujące elementy do bloku testowego, aby zweryfikować renderowanie komponentów.

test('Przycisk renderowania bez awarii', () => {
 renderowanie(<Wartość przycisku ="Zapisz się" />);
 oczekiwać (screen.getByRole('przycisk')).ByćWDokumencie()
});

Moduł dopasowujący toBeInTheDocument() sprawdza, czy element przycisku istnieje w dokumencie.

Spodziewaj się, że przycisk będzie renderował się poprawnie

Komponent Button przyjmuje wartość właściwości i wyświetla ją. Aby było poprawnie renderowane, wyświetlana wartość musi być taka sama, jak przekazana.

Utwórz nowy blok testowy i dodaj następujący kod.

test('Renderuje przycisk poprawnie', () => {
 renderowanie(<Wartość przycisku ="Zaloguj sie" />);
 oczekiwać (screen.getByRole('przycisk')).doHaveTextContent("Zaloguj sie")
})

Zwróć uwagę, że nie musisz robić porządków po testach, gdy używasz React Testing Library. W poprzednich wersjach konieczne było ręczne czyszczenie w następujący sposób:

po każdym (czyszczenie)

Teraz biblioteka testowa automatycznie odmontowuje komponenty po każdym renderowaniu.

Tworzenie testów migawek

Do tej pory przetestowałeś zachowanie komponentu Button. Napisz testy migawek, aby sprawdzić, czy dane wyjściowe składnika pozostają takie same.

Testy migawkowe porównują bieżące dane wyjściowe z przechowywanymi danymi wyjściowymi składnika. Na przykład, jeśli zmienisz styl komponentu Button, test migawki poinformuje Cię o tym. Możesz zaktualizować migawkę, aby pasowała do zmienionego komponentu, lub cofnąć zmiany stylu.

Testy migawkowe są bardzo przydatne, gdy chcesz mieć pewność, że interfejs użytkownika nie zmieni się nieoczekiwanie.

Testowanie migawek różni się od testów jednostkowych, ponieważ do utworzenia migawki potrzebny jest już działający kod.

Użyjesz metody renderera z pakietu react-test-renderer npm. Wykonaj więc następujący kod, aby go zainstalować.

npm zainstalować reagować-test-renderer

W Button.test.js napisz test migawki w następujący sposób:

test('Dopasowuje migawkę', () => {
 drzewo const = renderer.create(<Wartość przycisku ="Zaloguj sie" />).toJSON();
oczekiwać(drzewo).dopasowania do zrzutu();
})

Nie ma istniejących migawek dla komponentu Button, więc uruchomienie tego testu spowoduje utworzenie pliku migawki obok pliku testowego:

Przycisk
└─── __testy__
│ │ Przycisk.testy.js
│ └─── __migawka__
│ │ Przycisk.test.js.pstryknąć
│ 
└─── Przycisk.js

Teraz, po uruchomieniu kolejnego testu, React porówna nową migawkę, którą wygeneruje, z zapisaną.

Napisz testy dla najczęściej używanych komponentów

Ten samouczek nauczył Cię, jak pisać testy DOM i migawki w React, testując komponent Button. Pisanie testów dla wszystkich tworzonych komponentów może być żmudne. Jednak te testy oszczędzają czas, który poświęciłbyś na debugowanie już wdrożonego kodu.

Nie musisz osiągać 100-procentowego pokrycia testami, ale upewnij się, że piszesz testy dla najczęściej używanych i najważniejszych komponentów.