mcpField
D
detox

detox

github.com/partme-aiTesting & quality71689 installsUpdated 3w ago
Repository

About detox

A skill for writing and running Detox end-to-end tests for React Native apps. It covers simulator and emulator setup, test authoring, CI use, and debugging synchronization issues.

Key features

  1. 01Configure Detox for iOS and Android
  2. 02Write tests with matchers and assertions
  3. 03Build and run end-to-end tests
  4. 04Collect failure artifacts for debugging
  5. 05Address synchronization and timing issues

Use cases

  1. 01Set up Detox for a React Native app
  2. 02Test login flows on simulators or emulators
  3. 03Run mobile end-to-end tests in CI
  4. 04Investigate flaky tests and timing problems

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/partme-ai/full-stack-skills --skill detox

After installing, type/detoxin Claude Code to confirm it loaded.

Bundled filesLICENSE.txt

Details

From the project README

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

Keywords

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

Comments

Markdown supported