E-book details

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

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

Scottie Crump

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

  • Title: Testowanie kodu z React Testing Library. Jak tworzyć testy, które będą proste w utrzymaniu i modyfikacji
  • Author: Scottie Crump
  • Original title: Simplify Testing with React Testing Library: Create maintainable tests using RTL that do not break with changes
  • Translation: Katarzyna Bogusławska
  • ISBN: 978-83-283-8873-4, 9788328388734
  • Date of issue: 2022-11-14
  • Format: Ebook
  • Item ID: bibrea
  • Publisher: Helion