detox

When to use this skill

Use this skill whenever the user wants to:

• Write end-to-end tests for React Native applications using Detox
• Configure Detox for iOS simulators and Android emulators
• Use element matchers, actions, and assertions in Detox tests
• Integrate Detox tests into CI/CD pipelines
• Debug synchronization and timing issues in mobile tests

How to use this skill

Workflow

1. Set up the environment: install Detox CLI, configure .detoxrc.js, ensure Xcode/Android SDK are ready
2. Write test cases: use element(by.id(...)), tap(), typeText(), and expect()
3. Build and test: detox build then detox test
4. Run in CI: save artifacts (logs, screenshots) on failure

1. Configuration (.detoxrc.js)

module.exports = {
  testRunner: { args: { config: 'e2e/jest.config.js' } },
  apps: {
    'ios.debug': {
      type: 'ios.app',
      binaryPath: 'ios/build/MyApp.app',
      build: 'xcodebuild -workspace ios/MyApp.xcworkspace -scheme MyApp -configuration Debug -sdk iphonesimulator',
    },
    'android.debug': {
      type: 'android.apk',
      binaryPath: 'android/app/build/outputs/apk/debug/app-debug.apk',
      build: 'cd android && ./gradlew assembleDebug',
    },
  },
  devices: {
    simulator: { type: 'ios.simulator', device: { type: 'iPhone 15' } },
    emulator: { type: 'android.emulator', device: { avdName: 'Pixel_6' } },
  },
  configurations: {
    'ios.sim.debug': { device: 'simulator', app: 'ios.debug' },
    'android.emu.debug': { device: 'emulator', app: 'android.debug' },
  },
};

2. Test Example

describe('Login Flow', () => {
  beforeAll(async () => {
    await device.launchApp();
  });

  it('should login successfully', async () => {
    await element(by.id('username-input')).typeText('testuser');
    await element(by.id('password-input')).typeText('secret');
    await element(by.id('login-button')).tap();
    await expect(element(by.id('welcome-message'))).toBeVisible();
  });
});

3. Running Tests

# Build the app
detox build --configuration ios.sim.debug

# Run tests
detox test --configuration ios.sim.debug

# With artifacts on failure
detox test --configuration ios.sim.debug --artifacts-location ./artifacts

Best Practices

• Use testID props for stable element identification; avoid matching on text or animations
• Keep build and device configurations consistent between local development and CI
• Save artifacts (logs, screenshots, videos) on failure for debugging
• Use environment variables for sensitive operations; configure retry and parallelization strategies
• Disable animations in test builds to avoid synchronization issues

Resources

• Official documentation: https://wix.github.io/Detox/
• GitHub: https://github.com/wix/Detox

Keywords

detox, React Native, E2E, end-to-end testing, mobile testing, iOS simulator, Android emulator, testID, synchronization, Wix Detox