Тестирование приложений React Native с помощью Jest

Как писать модульные и e2e-тесты для приложений React Native с помощью Jest в рабочем пространстве Nx

В своем предыдущем блоге я наконец-то закончил написание своего потрясающего Nx React Native приложения. Приложение работает нормально. Могу ли я просто зафиксировать свои изменения и завершить работу?

Нет. Как дисциплинированный разработчик, я знаю, что завершение написания кода приложения — это только половина работы; вторая половина — это написание тестов.

В этом блоге мы рассмотрим:

• Как писать модульные тесты для компонентов React Native
• Как писать e2e тесты

Пример репозитория: https://github.com/xiongemi/studio-ghibli-search-engine

Юнит-тестирование с помощью Nx React Native

Чтобы запустить модульные тесты, просто запустите их:

nx test <your app or lib>

Если вы используете Visual Studio Code, вы можете использовать Nx Console для запуска команды тестирования:

Вы должны увидеть результаты юнит-тестов в терминале:

Test Suites: 10 failed, 1 passed, 11 total
Tests:       9 failed, 1 passed, 10 total
Snapshots:   0 total
Time:        9.84 s, estimated 21 s
Ran all test suites.

Вот как выглядит начальный юнит-тест:

Технологический стек

• Фреймворк для тестирования: jest
• Библиотека для тестирования: @testing-library/react-native

Чтобы написать модульный тест:

В свой компонент добавьте testID:

<Headline testID='title'>{film.title}</Headline>

Затем в файле теста вы можете использовать функцию getByTestId для запроса testID:

const { getByTestId } = render(<your component>);
expect(getByTestId('title')).toHaveTextContent(...);

Другие запросы можно посмотреть здесь: https://callstack.github.io/react-native-testing-library/docs/api-queries.

Первый запуск модульных тестов вряд ли пройдет успешно. Обычно я сталкиваюсь с несколькими ошибками, мне нужно либо исправить код и тесты, либо поиздеваться над какой-нибудь библиотекой.

Устранение неполадок

Ошибка: Jest не смог разобрать файл

Если вы используете библиотеки, содержащие нативный код, такие как react-native-paper или @react-navigation/native, вы, скорее всего, столкнетесь со следующей ошибкой:

Jest встретил неожиданный токен
Jest не смог разобрать файл. Это происходит, например, когда ваш код или его зависимости используют нестандартный синтаксис JavaScript, или когда Jest не настроен на поддержку такого синтаксиса.

Чтобы исправить это, добавьте имя библиотеки в transformIgnorePatterns в jest.config.js.

Например:

transformIgnorePatterns: [
  'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base)',
],

Ошибка: Анимированный

Если вы используете библиотеку Animated от React Native или используете библиотеку материалов, например react-native-paper или react-native-elements, вы, скорее всего, получите следующее предупреждение:

console.warn
Анимированный: useNativeDriver не поддерживается, поскольку отсутствует нативный модуль анимации. Приходится возвращаться к анимации на основе JS. Чтобы решить эту проблему, добавьте модуль RCTAnimation в это приложение или удалите useNativeDriver. Обязательно сначала запустите bundle exec pod install. Подробнее об автолинковке: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md.

В файл test-setup под вашим приложением или lib добавьте нижеприведенный mock:

jest.mock(
  '../../node_modules/react-native/Libraries/Animated/NativeAnimatedHelper'
);

Ошибка: Ваш компонент находится внутри экрана в навигаторе?

Если вы используете библиотеку @react-navigation для навигации, и внутри вашего компонента есть хуки из этой библиотеки, такие как useNavigation и useRoute, вы, скорее всего, получите эту ошибку:

Couldn’t find a route object. Находится ли ваш компонент внутри экрана в навигаторе?

Самый простой способ исправить это — подружить библиотеку @react-navigation/native, как показано ниже, в файле test-setup под вашим приложением или lib:

Error: Could not find «store»

Если ваш компонент является интеллектуальным компонентом, который использует Redux Store, вы получите эту ошибку при тестировании компонента:

Could not find «store» in the context of «Connect(Results)». Либо оберните корневой компонент в , либо передайте пользовательский поставщик контекста React и соответствующий потребитель контекста React в Connect(Results) в опциях connect.

Чтобы исправить это, вам нужно обернуть ваш компонент внутри <Provider store={store}>.

Сначала вам нужно установить redux-mock-store:

# npm
npm install redux-mock-store @types/redux-mock-store --save-dev

# yarn
yarn add redux-mock-store @types/redux-mock-store --dev

Тест будет выглядеть следующим образом:

Пример модульного теста с различными состояниями магазина:

Вот как писать модульные тесты для компонентов React Native и некоторые распространенные ошибки, с которыми вы можете столкнуться.

Теперь, когда все модульные тесты готовы, вам нужно написать e2e-тесты.

E2E-тестирование с помощью Nx React Native

При генерации приложения Nx React Native вы должны увидеть папку с именем e2e.

Чтобы запустить e2e-тесты на Debug-сборке:

• В одном терминале запустите nx start <your app>.
• В другом терминале выполните:

# iOS
nx test-ios <your app-e2e>

# Android
nx test-android <your app-e2e>

Если вы хотите запустить тест e2e на сборке Release, выполните следующие действия:

# iOS
nx test-ios <your app-e2e> --prod

# Android
nx test-android <your app-e2e> --prod

Технологический стек

• Тестовый фреймворк: Detox
• Прогонщик тестов: jest

Как правило, тесты e2e должны соответствовать приведенной ниже схеме:

Например, стартовая страница моего приложения выглядит следующим образом:

Вот мой e2e-тест, проверяющий, отображает ли он заголовок:

Для своего компонента я добавил testID, чтобы e2e-тесты могли его запросить:

<SafeAreaView testID="search-page">
...
<Headline testID="heading">Studio Ghibli Search Engine</Headline>

Например, в моем приложении есть поток, в котором пользователи могут искать текст типа totoro и переходить к деталям фильма:

Тест e2e выглядит следующим образом:

Вы можете прочитать больше о матчерах и действиях в Detox здесь: https://wix.github.io/Detox/docs/api/matchers.

Заключение

Вот как тестировать приложения Nx React Native. С Nx вам не нужно явно устанавливать какие-либо библиотеки тестирования, такие как Jest или Detox. Поэтому вы можете сразу же приступить к работе и сосредоточиться на написании тестов, а не тратить время на настройку.

Ознакомьтесь с моим предыдущим блогом о Nx React Native:
https://dev.to/nx/share-code-between-react-web-react-native-mobile-with-nx-12eb

Куда двигаться дальше?

• присоединяйтесь к сообществу Slack
• следите за Nx в Twitter
• узнайте больше о Nx на https://nx.dev
• подписывайтесь на канал Nx на Youtube