05. JestとE2Eテストで主要導線を守る

AIが生成した画面は、表示できるだけでは十分ではありません。習慣を追加する、完了にする、アプリを再起動する、通信に失敗する、といった状態を繰り返しても、期待した動作を保つ必要があります。

1. テストを3層に分ける

層	確認すること	例
ロジック	入力と出力の関係	日付の判定、並び替え、保存データの変換
コンポーネント	操作と表示	ボタン、入力、空状態、エラーメッセージ
E2E	実際の主要導線	起動、追加、完了、再起動、削除

Expo公式では、Jestとjest-expoを使ったユニットテストが案内されています。また、画面全体の確認ではスナップショットだけに頼らず、E2Eテストを使う方法も案内されています。ExpoのJestガイド

2. Jestを設定する

npx expo install jest-expo jest @types/jest --dev
npx expo install @testing-library/react-native --dev

package.jsonに最小構成を追加します。

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "preset": "jest-expo"
  }
}

最初は画面そのものより、純粋な関数をテストします。

export function countCompleted(items: Array<{ completed: boolean }>) {
  return items.filter((item) => item.completed).length;
}

test('完了した習慣の数を数える', () => {
  expect(countCompleted([
    { completed: true },
    { completed: false },
    { completed: true },
  ])).toBe(2);
});

テストでは実装の内部変数を直接確認せず、ユーザーが見る結果と入力に対する出力を確認します。

3. 主要導線をE2Eで確認する

E2Eテストは、次のようなユーザー操作を一つのシナリオにします。

アプリを起動する
習慣を追加する
完了ボタンを押す
アプリを終了して再起動する
完了状態が残っていることを確認する
習慣を削除する

このほかに、次の失敗シナリオを一つずつ用意します。

必須入力が空のまま保存する
通知やカメラなどの権限を拒否する
ネットワークを切った状態で保存する
APIがエラーを返す
既存データが0件の状態で画面を開く

E2Eの実行環境は、ローカル端末、シミュレータ、またはEAS Workflowsのいずれかに固定せず、プロジェクトの費用と速度に合わせて選びます。ExpoにはMaestroを使ったE2E実行例もあります。ExpoのE2Eテスト例

4. テストデータと本番データを分ける

Firebaseを使うアプリでは、E2Eテストから本番Firestoreへ接続しないようにします。可能ならFirebase Emulatorへ接続し、テスト開始前にデータを初期化します。実サービスを使う場合は、テスト専用プロジェクト、テストユーザー、削除可能なデータを用意します。

テストが落ちたときに、アプリの不具合なのか、Emulatorや端末の状態なのかを判断できるよう、テスト対象のアプリバージョンと接続先も記録します。

完了条件

ロジックテストを一つ追加して実行できる
主要導線を実機またはシミュレータで一周できる
空、権限拒否、通信失敗、再起動後の状態を確認できる
E2Eテストが本番データを変更しない構成になっている