Automate React Native E2E Testing with Detox

This skill provides expertise in Detox, the gray box end-to-end testing framework for React Native applications, with deep knowledge of test automation, mobile testing strategies, device management, and integrating Detox into CI/CD pipelines. Core Detox principles cover synchronization and timing (Detox automatically syncs with the React Native bridge, animations, and network requests; use waitFor() for explicit waits when automatic sync isn't enough; prefer toBeVisible() over toExist() for reliability; leverage gray box testing to access internal app state when needed) and test structure/organization (the Arrange-Act-Assert pattern, beforeEach()/afterEach() for proper test isolation, describe() blocks with clear naming conventions, and the Page Object pattern for complex UI interactions).

Configuration best practices cover a .detoxrc.json configuration defining iOS simulator and Android emulator build/run configurations (device type, binary path, build command) and a Jest configuration (e2e/config.json) setting maxWorkers: 1, a 120-second test timeout, and Detox's Jest runner adapters for global setup/teardown. Test writing patterns cover a basic Authentication Flow test structure launching the app in beforeAll, reloading React Native in beforeEach, and following Arrange-Act-Assert to fill in credentials and assert the home screen becomes visible. Advanced element interactions cover scrolling to an element with whileElement().scroll(), disambiguating multiple matches with .withAncestor(), swipe gestures, long press, and multi-touch pinch gestures.

The Page Object pattern implementation is demonstrated through a LoginPage class encapsulating element references and login/waitForError/isVisible methods. Debugging and troubleshooting covers verbose logging via detoxPrintBusyIdleResources, automatically taking screenshots on failed test expectations, and element hierarchy inspection via getAttributes(), plus common issue resolutions - device.disableSynchronization() for non-RN screens or complex animations, custom matchers for complex element states, handling permission dialogs via device.launchApp({permissions:...}), and device.shake() to trigger the dev menu in debug builds.

CI/CD integration is demonstrated through a GitHub Actions workflow that sets up Node.js, boots an iOS Simulator via xcrun simctl, builds the app with detox build, runs detox test --cleanup, and uploads test artifacts on failure. Performance optimization covers preferring device.reloadReactNative() over device.launchApp() between tests, test sharding for parallel execution across devices, caching built apps in CI, using --headless for faster CI execution, and --record-videos failing to reduce artifact storage. Advanced capabilities cover custom actions/matchers, platform-specific test execution via device.getPlatform(), and mocking/stubbing integrations (mocking APIs via a custom launch URL, deep-linking tests with custom URL schemes, and testing push notifications via device.sendNotification()).

Use this skill when writing or configuring Detox end-to-end tests for a React Native app - test structure, Page Object implementation, gesture interactions, or CI/CD pipeline integration. It is well suited to React Native apps needing reliable, gray-box E2E test coverage across iOS and Android. It is not meant for non-React-Native mobile apps, or for unit/component-level testing where a lighter test framework would suffice.

Input: the React Native app's screens/flows to test and the target iOS/Android build configuration.

Output: Detox configuration files, E2E test suites, Page Object classes, and CI/CD pipeline integration. Example test using Arrange-Act-Assert:

it('should login with valid credentials', async () => {
  await waitFor(element(by.id('loginScreen'))).toBeVisible().withTimeout(5000);
  await element(by.id('emailInput')).typeText('user@example.com');
  await element(by.id('loginButton')).tap();
  await waitFor(element(by.id('homeScreen'))).toBeVisible().withTimeout(10000);
});

Works with Jest as the test runner, iOS Simulator and Android Emulator, and GitHub Actions for CI/CD pipeline integration.

Mobile QA and React Native engineers writing end-to-end test suites with Detox, and teams that need reliable gray-box mobile testing integrated into CI/CD rather than manual regression testing.