mcpField
D
detox

detox

github.com/partme-aiテスト・品質71689 回インストール3 週間前に更新
リポジトリ

detox について

React Native アプリの Detox によるエンドツーエンドテストを支援するスキルです。シミュレーター設定、テスト作成、CI 実行、同期問題の調査を扱います。

主な機能

  1. 01iOS と Android 向け Detox の設定
  2. 02マッチャーとアサーションによるテスト作成
  3. 03エンドツーエンドテストのビルドと実行
  4. 04デバッグ用の失敗時アーティファクト収集
  5. 05同期とタイミングの問題への対処

活用シーン

  1. 01React Native アプリへの Detox 導入
  2. 02シミュレーターやエミュレーターでのログインテスト
  3. 03CI でのモバイルエンドツーエンドテスト実行
  4. 04不安定なテストやタイミング問題の調査

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/detoxを入力して読み込まれたか確認します。

同梱ファイルLICENSE.txt

詳細

このスキルを使うタイミング

次のような場合に、このスキルを使います。

  • Detox を使って React Native アプリケーションのエンドツーエンドテストを作成する
  • iOS シミュレーターと Android エミュレーター向けに Detox を設定する
  • Detox テストで要素マッチャー、アクション、アサーションを使う
  • Detox テストを CI/CD パイプラインに統合する
  • モバイルテストの同期やタイミングに関する問題をデバッグする

このスキルの使い方

ワークフロー
  1. 環境をセットアップする：Detox CLI をインストールし、.detoxrc.js を設定して、Xcode／Android SDK の準備が整っていることを確認します
  2. テストケースを作成する：element(by.id(...))、tap()、typeText()、expect() を使います
  3. ビルドしてテストする：detox build を実行し、その後 detox test を実行します
  4. CI で実行する：失敗時に成果物（ログ、スクリーンショット）を保存します
1. 設定（.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. テスト例
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. テストの実行
# 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

ベストプラクティス

  • 要素を安定して識別するために testID プロパティを使い、テキストやアニメーションによるマッチングは避けます
  • ローカル開発と CI で、ビルドおよびデバイスの設定を統一します
  • デバッグ用に、失敗時は成果物（ログ、スクリーンショット、動画）を保存します
  • 機密性の高い操作には環境変数を使い、再試行と並列化の方針を設定します
  • 同期の問題を避けるため、テストビルドではアニメーションを無効にします

リソース

キーワード

detox, React Native, E2E, エンドツーエンドテスト, モバイルテスト, iOS シミュレーター, Android エミュレーター, testID, 同期, Wix Detox

コメント

Markdown 対応