Testowanie React.js w Enzyme — props, state i interakcje

1. React.js: Wprowadzenie do kursu od podstaw
2. Poznaj React.js
3. Pierwszy komponent w React.js
4. Props czyli atrybuty w React.js
5. Podział na komponenty w React.js
6. Klasy jako komponenty React.js
7. Interakcja z komponentami React.js
8. Stan komponentów React.js
9. State w React.js 2
10. Metody cyklu życia komponentu w React.js
11. React.js w przykładach: filtrowanie statycznej listy
12. Tworzenie aplikacji React.js dzięki create-react-app
13. React.js na GitHub Pages dzięki create-react-app
14. Testowanie aplikacji React.js — podstawy Enzyme
15. Testowanie React.js w Enzyme — props, state i interakcje
16. Poprawne bindowanie funkcji w React.js
17. Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
18. Komunikacja pomiędzy komponentami w React.js
19. Komunikacja z API w React.js
20. Formularze w React.js — kontrolowane komponenty
21. Formularze w React.js — niekontrolowane komponenty
22. Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
23. TDD w React.js z pomocą react-testing-library
24. Flux i Redux: globalny store i jednokierunkowy przepływ danych
25. React + Redux — kurs: wprowadzenie i podstawy
26. React + Redux — filtrowanie listy, proste selektory
27. Projektowanie komponentów: Presentational & Container Components
28. Asynchroniczność w Redux: redux-thunk
29. Kiedy używać state, a kiedy Redux?
30. Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
31. Leniwe ładowanie komponentów w React dzięki import
32. Higher Order Reducers — Redux i powtarzanie kodu
33. React Hooks — wprowadzenie i motywacja
34. React Hooks: useState, czyli stan w komponentach funkcyjnych
35. React Hooks: useState — wiele stanów, callbacki i inne niuanse
36. React Hooks: useEffect — efekty uboczne w komponencie
37. React Hooks a żądania do API
38. useReducer — przenoszenie logiki poza komponent
39. useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
40. Wady React Hooks
41. React Hooks: Piszemy własne hooki!

Pokazałem już jak pisać proste testy do aplikacji React.js z użyciem Enzyme. Sprawdzanie czy coś się renderuje, czy zawiera tekst, czy dobrze pokazuje elementy… W tym wpisie idę o krok dalej. Pokazuję jak w Enzyme testować interakcje z komponentami, odczytywać i zmieniać propsy a także state.

Pobieranie i ustawianie propsów oraz state

Na elementach (selektorach) Enzyme można wywołać kilka ciekawych metod. W tym momencie interesują Cię te służące do odczytywania i ustawiania propsów i stanu:

• props() — zwraca wszystkie propsy danego elementu
• prop(key) — zwraca prop o nazwie key
• state([key]) — zwraca cały state lub (opcjonalnie) to co kryje się pod kluczem key
• setProps(nextProps) — ustawia propsy komponentu (podany obiekt zostanie połączony z istniejącymi już propsami)
• setState(nextState) — ustawia state komponentu (j.w.)

A więc przetestujmy teraz czy, w naszej ulubionej liście kontaktów, komponent <App> przekazuje do <UsersList> prop o nazwie users z tablicą imion:

it('passes all users to the UsersList', () => {
  const app = shallow(<App />);
  expect(app.find('UsersList').prop('users')).toEqual(['Michal', 'Kasia', 'Jacek', 'Marta', 'Tomek', 'Ania']);
})

Po kolei: Płytkie renderowanie komponentu App. Następnie znajdź komponent UsersList, pobierz jego prop o nazwie users i porównaj z podaną tablicą.

Następnie można by się pokusić o przetestowanie czy komponent UsersList poprawnie reaguje na zmianę propsów. A więc pierwszy render, a następnie zmiana propsów i test (jest to trochę test na siłę, ale to w tym momencie nieistotne):

describe('change props', () => {
    const users = ['Jan', 'Maria'];
    const usersList = shallow(<UsersList users={['Ktoś tam', 'Nieważne']} />);
    usersList.setProps({ users });
    
    users.forEach(user => {
        it(`includes name ${user} on the list`, () => {
            expect(usersList).toContainReact(<li>{user}</li>)
        });
    });
});

W analogiczny sposób można pobierać i ustawiać state, a następnie sprawdzać czy komponent się poprawnie renderuje.

Interakcje

Jedyny brakujący element układanki to testowanie interakcji z komponentami. W tym przykładzie chcesz sprawdzić czy wpisywanie czegoś w pole tekstowe powoduje rzeczywiście filtrowanie tablicy z imionami.

W bardziej realnym przykładzie zamockowałbym najpierw źródło danych, aby mieć 100% kontrolę nad przebiegiem testu. Tutaj ten krok pomijam i na razie zakładam, że lista imion jest mi po prostu znana i niezmienna.

Przyda się tutaj funkcja simulate z Enzyme. Przyjmuje ona dwa argumenty:

• nazwę zdarzenia np. click albo input
• mock obiektu zdarzenia (opcjonalnie)

W tym przypadku chcę przetestować wpisanie literki „M”. Muszę więc zasymulować zdarzenie input i podać obiekt zdarzenia z ustawionym value na wartość "M":

it('filters names on input', () => {
  const app = shallow(<App />);
  expect(app.find('UsersList').prop('users')).toEqual(['Michal', 'Kasia', 'Jacek', 'Marta', 'Tomek', 'Ania']);

  app.find('input').simulate('input', {currentTarget: {value: 'M'}})
  expect(app.find('UsersList').prop('users')).toEqual(['Michal', 'Marta', 'Tomek']);
});

Po kolei: Renderuje się aplikacja. Następnie upewniam się, że lista kontaktów jest taka, jak mi się wydaje, że jest (to krok w sumie zbędny). Następnie symuluję zdarzenie input i ponownie sprawdzam listę kontaktów — teraz jest już inna.

Podobnie można testować inne zdarzenia, np. click czy nawet focus.

Podsumowanie

Tym sposobem masz już pełen zestaw narzędzi potrzebny do testowania nawet najbardziej rozbudowanych komponentów. Enzyme jest świetną biblioteką i warto zapoznać się z jego pełną dokumentacją! Cały kod jest dostępny na moim GitHubie: https://github.com/mmiszy/typeofweb-kurs-react/tree/part-3

Jeśli chcesz poznać Enzyme i inne metody testowania React dogłębnie, to Poznaj React w dwa dni na szkoleniu!

Jeśli chcesz na bieżąco dowiadywać się o kolejnych częściach kursu React.js to koniecznie śledź mnie na Facebooku i zapisz się na newsletter.

Ćwiczenie

Ćwiczenie:  Przetestuj czy po skasowaniu literki „M” z inputa lista kontaktów wróci do stanu pierwotnego.