E2E-тестирование React Native: настройка Detox и CI
Вы запускаете CI, а тесты падают на ровном месте — то анимация не дождалась, то элемент не найден. Знакомо? Один из наших клиентов — FinTech-приложение с 50 экранами — страдал от 30% flaky-падений на каждую сборку. Разработчики тратили часы на перезапуски, а релизы задерживались на недели. После внедрения Detox мы снизили процент падений до 5% и сократили время прогона в 3 раза за счёт параллельного запуска. Detox — gray-box фреймворк, который встраивает тест-сервер прямо в процесс приложения. В отличие от Appium, Detox автоматически синхронизируется с event loop React Native, что даёт стабильные тесты без sleep(). Это особенно важно для проектов с динамическими анимациями и частыми сетевыми запросами. Наш опыт — 5+ лет и более 15 реализованных проектов — позволяет гарантировать стабильность тестов даже на сложных UI.
Почему Detox, а не Appium?
| Критерий | Detox | Appium |
|---|---|---|
| Тип доступа | Gray-box (встроенный сервер) | Black-box (внешний) |
| Синхронизация | Автоматическая с JS-потоком | Требует sleep() и ожиданий |
| Стабильность на RN | Высокая | Низкая (часто падают) |
| Поддержка анимаций | Встроенная | Через ожидания |
| Скорость выполнения | Быстрее | Медленнее из-за задержек |
| Процент flaky на CI | 5-10% | 30-50% |
Мы используем Detox, потому что это единственный фреймворк, который понимает внутреннюю работу React Native. Результат — тесты, которые не падают на ровном месте в CI.
Как мы конфигурируем Detox: первые грабли
Настройка Detox занимает больше времени, чем кажется. Особенно на iOS. Вот конфигурация, которую мы используем по умолчанию:
{ "detox": { "testRunner": { "args": { "$0": "jest", "config": "e2e/jest.config.js" }, "jest": { "setupTimeout": 120000 } }, "apps": { "ios.debug": { "type": "ios.app", "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/MyApp.app", "build": "xcodebuild -workspace ios/MyApp.xcworkspace -scheme MyApp -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build" }, "android.debug": { "type": "android.apk", "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk", "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug" } }, "devices": { "simulator": { "type": "ios.simulator", "device": { "type": "iPhone 15", "os": "iOS 17.4" } }, "emulator": { "type": "android.emulator", "device": { "avdName": "Pixel_7_API_34" } } } } } Частая проблема: APK должен быть собран с assembleAndroidTest — иначе синхронизация не работает. На iOS — только симулятор билд (-sdk iphonesimulator). Реальные устройства требуют отдельного профилирования и signing. Также важно настроить setupTimeout — для больших проектов мы ставим 120 секунд, чтобы тесты успели инициализироваться.
Как избежать flaky-тестов?
Flaky-тесты — главная боль CI. Detox снижает их количество, но полностью не исключает. Вот таблица с типичными причинами и решениями:
| Причина | Решение |
|---|---|
| Анимации зациклены | Отключить в test build через флаг detoxDisableHierarchyDump или кастомный IS_TESTING |
| Сетевые запросы не завершены | Использовать waitFor с таймаутом, или перехватывать запросы через mock |
| Состояние экрана не сброшено | Вызывать device.reloadReactNative() перед каждым тестом |
| Таймауты Jest недостаточны | Увеличить jest.setTimeout до 120 секунд |
| Разные версии iOS/Android | Тестировать на тех же версиях, что и в CI |
Также используем соглашение по testID: screen_component_action. Это упрощает поддержку и поиск элементов.
Параллельное тестирование: как ускорить CI?
Detox поддерживает параллельный запуск через шардирование Jest. Команда:
detox test --configuration android.debug --workers 3 Требует 3 эмулятора или симулятора. На macOS нужно 16 ГБ RAM для 3 симуляторов. AVD создаются автоматически при наличии прав. Параллельный запуск сокращает время полного прогона с 45 минут до 15 минут — в 3 раза быстрее.
Интеграция в CI: рецепт для GitHub Actions
Для iOS используем macOS-раннер, для Android — ubuntu вместе с reactivecircus/android-emulator-runner. Пример сборки и тестов:
jobs: e2e-ios: runs-on: macos-14 steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: { node-version: '20' } - run: npm ci - run: npx pod-install - run: npx detox build --configuration ios.debug - run: npx detox test --configuration ios.debug --headless Для Android — обязательный --headless, иначе эмулятор не найдёт дисплей. Также стоит кэшировать симуляторы и эмуляторы, чтобы не создавать их заново.
Типичные команды Detox для отладки
-
detox test —reuse— переиспользовать уже запущенное устройство. -
detox test —record-logs all— записать логи всех тестов. -
detox build —configuration ios.debug 2>&1 | tee build.log— сохранить лог сборки. -
detox test —debug— запустить с дебаг-режимом.
Что входит в работу
- Полная конфигурация Detox под iOS и Android
- Написание тестов для ключевых пользовательских флоу (авторизация, навигация, платежи)
- Документация по настройке и расширению тестов
- Интеграция в ваш CI/CD (GitHub Actions, GitLab CI, Jenkins)
- Обучение команды (2 часа + доступ к записи)
- Гарантия стабильности тестов: не более 5% flaky-падений
Сроки и стоимость
Базовая настройка конфигурации и покрытие основных флоу занимает 5 дней. При наличии сложных нативных модулей (push-уведомления, биометрия, камера) — до 7 дней. Стоимость рассчитывается индивидуально — напишите нам, и мы проанализируем ваше приложение и предложим оптимальный план.
Мы гарантируем стабильность тестов на всех этапах. Обращайтесь — поможем вашей команде забыть о flaky-тестах и ускорить релизный цикл. Получите консультацию: отправьте заявку, и мы свяжемся с вами в течение дня.