Testowanie kodu z React Testing Library. Jak tworzyć testy, które będą proste w utrzymaniu i modyfikacji - ebook

W ostatnich latach zdecydowanie wzrosła popularność frameworka React, pozwalającego w pełni skorzystać z możliwości nowoczesnych przeglądarek i urządzeń mobilnych. Nowym narzędziem służącym do testowania obiektowego modelu dokumentu (DOM) jest React Testing Library. Zostało ono zaprojektowane tak, aby ułatwiać projektantom pracę zgodną z podejściem test-driven development (TDD). Jest to bardzo cenna właściwość, gdyż prawidłowo napisane komponenty testowe znacznie obniżają ryzyko wystąpienia poważnych błędów aplikacji.

W tej książce przystępnie wyjaśniono, w jaki sposób używać nowoczesnego narzędzia, jakim jest React Testing Library (RTL), do testowania komponentów napisanych w React. Dzięki niej zrozumiesz główne aspekty działania tej biblioteki. Nauczysz się symulować interakcje użytkownika i zrozumiesz podejście TDD.

Znajdziesz tu wskazówki, jak tworzyć testy jednostkowe komponentów, które wchodzą w interakcje z interfejsami API, a także jak testować komponenty za pomocą takich bibliotek jak GraphQL i Redux. Zapoznasz się też z technikami testowania aplikacji, które podległy poważnej refaktoryzacji. Na koniec dowiesz się, jak pisać całościowe testy funkcjonalne z wykorzystaniem biblioteki Cypress i które wzorce projektowe są najbardziej przydatne do ustrukturyzowania profesjonalnego zbioru testów.

W książce między innymi:

• wprowadzenie do RTL i jego zastosowań
• użycie jest-dom do rozbudowy testów opartych na RTL
• techniki tworzenia komponentów testowych łatwych do modyfikacji
• integracja zestawów testowych z Cucumber i Cypress
• podejście TDD

React: z łatwością napiszesz doskonałe komponenty testowe!

O autorze

O recenzencie

Przedmowa

Rozdział 1. Wstęp do React Testing Library

• Wymagania techniczne
• Wprowadzenie do DOM Testing Library
  • Czym jest DOM Testing Library
  • Główne zasady
• Uruchamianie przypadków testowych z Jest
  • Uruchamianie testów z Jest
• Rozbudowanie asercji Jest dzięki jest-dom
  • Dodawanie jest-dom do projektu
  • Zalety stosowania jest-dom z Jest
• Szczegóły implementacyjne w testach
  • Problemy z testami koncentrującymi się na szczegółach implementacyjnych
  • Przykład testu szczegółów implementacyjnych
  • Czym zastąpić testowanie szczegółów implementacyjnych
• Podsumowanie
• Pytania

Rozdział 2. Praca z React Testing Library

• Wymagania techniczne
• Dodawanie React Testing Library od istniejących projektów
  • Ręczna instalacja
  • Automatyczna instalacja z create-react-app
• Nadawanie testom struktury z React Testing Library
  • Renderowanie elementów
  • Wybieranie elementów
  • Asercje dotyczące oczekiwanego zachowania
• Testowanie komponentów warstwy prezentacji
  • Tworzenie testów migawek
  • Testowanie oczekiwanych właściwości
• Zastosowanie metody debug
  • Debugowanie całego komponentu DOM
  • Debugowanie konkretnych elementów komponentu
• Podsumowanie
• Pytania

Rozdział 3. Testowanie złożonych komponentów przy użyciu React Testing Library

• Wymagania techniczne
• Testowanie zdarzeń użytkowników
  • Symulowanie akcji użytkownika za pomocą fireEvent
  • Symulowanie działań użytkownika z user-event
• Testowanie komponentów wywołujących procedury obsługi zdarzeń w izolacji
• Testowanie komponentów, które współpracują z interfejsami API
  • Żądanie danych z API poprzez fetch
  • Tworzenie atrap danych API z MSW
  • Testowanie komponentu DrinkSearch
  • Zastosowanie MSW w budowaniu oprogramowania
• Implementacja programowania sterowanego testami
  • Budowanie komponentu Vote z wykorzystaniem TDD
  • Budowanie formularza rejestracji z wykorzystaniem TDD
• Podsumowanie
• Pytania

Rozdział 4. Testy integracyjne i zewnętrzne biblioteki w Twojej aplikacji

• Wymagania techniczne
• Testowanie zintegrowanych komponentów
  • Testy integracyjne komponentu Vote
  • Planowanie scenariuszy testowych do testów w izolacji
• Testowanie komponentów z Context API
  • Testowanie kontekstu korzystającego z komponentu Retail
  • Testowanie komponentu Cart w izolacji
  • Testowanie komponentu Product w izolacji
  • Testowanie komponentu ProductDetail w izolacji
  • Testowanie błędów kontekstu z wykorzystaniem granic
  • Wykorzystanie testów integracyjnych do testowania widoku szczegółów produktu
• Testowanie komponentów wykorzystujących Redux
  • Tworzenie specjalnej metody render do testowania komponentów w Redux
  • Zastosowanie Redux Provider w testach
• Testowanie komponentów wykorzystujących GraphQL
• Testowanie komponentów zbudowanych przy użyciu Material-UI
  • Dodanie etykiety ARIA w testach komponentu Vote
  • Dodawanie testID do testowego komponentu CustomerTable
• Podsumowanie
• Pytania

Rozdział 5. Refaktoryzacja starych aplikacji z React Testing Library

• Wymagania techniczne
• Korzystanie z testów do wykrywania regresji przy aktualizacji zależności
  • Stworzenie zestawu testów regresyjnych
  • Aktualizacja zależności Material-UI
• Refaktoryzacja testów napisanych z wykorzystaniem Enzyme
• Refaktoryzacja testów wykorzystujących ReactTestUtils
• Refaktoryzacja testów pod kątem zgodności z dobrymi praktykami testowania
• Podsumowanie
• Pytania

Rozdział 6. Implementacja dodatkowych narzędzi i rozszerzeń do testów

• Wymagania techniczne
• Implementowanie dobrych praktyk z rozszerzeniami ESLint
  • Instalacja i konfiguracja rozszerzenia eslint-plugin-testing-library
  • Instalacja i konfiguracja eslint-plugin-jest-dom
• Testowanie dostępności z jest-axe
• Dobór zapytań z Testing Playground
  • Dobór zapytań z wykorzystaniem strony internetowej Testing Playground
  • Dobór zapytań z wykorzystaniem rozszerzenia Testing Playground do przeglądarki Chrome
• Zwiększanie produktywności z Wallaby.js
  • Instalacja i konfiguracja Wallaby.js
  • Pisanie testów z Interactive Test Output
• Podsumowanie
• Pytania

Rozdział 7. Testy end-to-end z Cypress

• Wymagania techniczne
• Wprowadzenie do Cypress
• Rozszerzenie metod zapytań z Cypress Testing Library
• Programowanie sterowane narzędziem Cypress
• Pisanie testów z wykorzystaniem wzorców projektowych w Cypress
  • Tworzenie obiektowych modeli stron w Cypress
  • Tworzenie specjalnych metod w Cypress
• Testowanie API z Cypress
• Testy w stylu Gherkin z Cucumber
• Korzystanie z React Developer Tools z Cypress
• Podsumowanie
• Pytania

Odpowiedzi