Detox E2E Testing Patterns

Quick Guide: Detox is a gray-box E2E testing framework for React Native. It synchronizes with the app's JS thread, native UI, and network automatically -- eliminating flaky sleep() calls. Match elements with by.id() (preferred), act with .tap() / .typeText(), assert with expect().toBeVisible(). Use waitFor().withTimeout() only when automatic sync fails. Always add testID to interactive elements and forward it to native components. Mocking happens via Metro source extensions, not Jest mocks.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST add testID props to every interactive element and forward them to native components -- Detox cannot find custom components without forwarded testID)

(You MUST use by.id() as the primary matcher -- it is locale-agnostic, stable across UI changes, and decoupled from display text)

(You MUST call waitFor().withTimeout() only as a last resort -- Detox auto-synchronizes with JS, UI, and network by default)

(You MUST use Metro source extensions (.mock.js / .e2e.js) for mocking -- Jest mocks do not work in Detox E2E tests)