Jak przetestować React komponenty natywne na więcej niż jednym poziomie głębokości?

Question

Preferowana metoda testowania komponentów natywnych React teraz wydaje się być użycie kombinacji mokka, reakcji-natywnej-makiety i enzymu do płytkich komponentów renderowania.

Problem polega na tym, że płytkie renderowanie ma tylko jeden poziom głęboki, a czasami komponenty mają zagnieżdżone widoki, które wymagają przetestowania dodatkowego lub wyższego poziomu.

W teorii enzym obsługuje mount(), aby w pełni wyrenderować komponent, ale w praktyce nie powiedzie się, ponieważ react-native-mock's View mock does not recurse into children.

W świetle tych ograniczeń, w jaki sposób użytkownicy testują swoje komponenty na poziomie niższym niż jeden?

Answer 1

udało mi się rozwiązać ten problem poprzez przełączenie moich testów komponentów z mokka na żartach i postępując zgodnie z instrukcjami tutaj testów migawka: https://facebook.github.io/jest/docs/tutorial-react-native.html

Następnie dodaje żart do mojego istniejącego cel testu w package.json:

"test": mocha … && jest"

Jedno aby mieć świadomość, że musiał postępować zgodnie z instrukcjami, aby dodać mocks rzeczy bym się spodziewał, że zostały szydzili z pudełka (np. TextInput), jak również za pomocą moduleNameMapper do mapować niektóre rodzime składniki ts, które nie zostały rozwiązane poprawnie.

Answer 2

Rozwiązaliśmy problem polegający na uzyskaniu mount() do pracy z enzymem, aby w pełni renderować komponenty React Native. Pisaliśmy o tym pod adresem https://blog.joinroot.com/mounting-react-native-components-with-enzyme-and-jsdom/

Jeśli używasz naszego widelca, react-native-mock-render i skonfigurujesz jsdom, będziesz mógł montować komponenty.