MaestroとMSWを使用したReact Nativeの結合テストを書く

## ログインとログアウトのテスト

appId: host.exp.Exponent # Expo Goの場合
env:
  LOGIN_ID: loginId
  PASSWORD: password1234
---
# localhostで起動しているアプリに直接接続する
- openLink: exp://127.0.0.1:8081

# ログインボタンをタップ
- tapOn: 'ログイン'

# バリデーションチェック
# トップ画面とは違う2つめのログインボタンを取得
- tapOn:
    text: 'ログイン'
    index: 1
- assertVisible: 'ログインIDは必須入力です'
- assertVisible: 'パスワードは必須入力です'

# 間違ったログイン情報を入力
- tapOn: 'ログインID'
- inputText: 'a'
- tapOn: 'パスワード'
- inputText: 'pass'
- tapOn:
    text: 'ログイン'
    index: 1
- assertVisible: 'ログインできませんでした'

# 正しいログイン情報を入力
- tapOn: 'ログインID'
- eraseText
- inputText: '${LOGIN_ID}'
- tapOn: 'パスワード'
- eraseText
- inputText: '${PASSWORD}'

# フォーム送信のログインボタンをタップ
# トップ画面とは違う2つめのログインボタンを取得
- tapOn:
    text: 'ログイン'
    index: 1

# iOS:SystemのSavePasswordのアラートを閉じる
- runFlow:
    when:
      visible: 'Save Password'
    commands:
      - tapOn: 'Not now'

# ホーム画面に遷移し、設定ボタンをタップ
- tapOn: '設定'
- tapOn: 'アカウント情報'
- tapOn: 'ログアウト'
- assertVisible: 'ログアウトしますか？'
- tapOn:
    text: 'ログアウト'
    index: 1

# トップ画面に遷移していることを確認
- assertVisible: 'ログイン'

class SimpleEventTarget {
  constructor() {
    this._listeners = {};
  }

  addEventListener(type, callback) {
    if (!this._listeners[type]) {
      this._listeners[type] = [];
    }
    this._listeners[type].push(callback);
  }

  removeEventListener(type, callback) {
    if (!this._listeners[type]) return;
    const index = this._listeners[type].indexOf(callback);
    if (index !== -1) {
      this._listeners[type].splice(index, 1);
    }
  }

  dispatchEvent(event) {
    if (!this._listeners[event.type]) return true;
    const callbacks = [...this._listeners[event.type]];
    for (const callback of callbacks) {
      callback.call(this, event);
    }
    return !event.defaultPrevented;
  }
}

// 簡易的なEventの実装
class SimpleEvent {
  constructor(type, eventInitDict = {}) {
    this.type = type;
    this.bubbles = eventInitDict.bubbles || false;
    this.cancelable = eventInitDict.cancelable || false;
    this.composed = eventInitDict.composed || false;
    this.currentTarget = null;
    this.defaultPrevented = false;
    this.eventPhase = 0;
    this.isTrusted = false;
    this.target = null;
    this.timeStamp = Date.now();
  }

  preventDefault() {
    if (this.cancelable) {
      this.defaultPrevented = true;
    }
  }

  stopPropagation() {
    // 実装は不要
  }

  stopImmediatePropagation() {
    // 実装は不要
  }
}

// 必要なグローバルオブジェクトを定義
global.EventTarget = SimpleEventTarget;
global.Event = SimpleEvent;

// MessageEventが存在しない場合はポリフィル
if (typeof MessageEvent === 'undefined') {
  global.MessageEvent = class MessageEvent extends SimpleEvent {
    constructor(type, options = {}) {
      super(type, options);
      this.data = options.data || null;
      this.origin = options.origin || '';
      this.lastEventId = options.lastEventId || '';
      this.source = options.source || null;
      this.ports = options.ports || [];
    }
  };
}

// BroadcastChannelが存在しない場合はポリフィル
if (typeof BroadcastChannel === 'undefined') {
  global.BroadcastChannel = class BroadcastChannel extends SimpleEventTarget {
    constructor(channelName) {
      super();
      this.channelName = channelName;
      this._subscribers = [];
    }
    postMessage(message) {
      const event = new global.MessageEvent('message', {
        data: message,
      });
      setTimeout(() => {
        this.dispatchEvent(event);
      }, 0);
    }
    close() {
      this._subscribers = [];
    }
  };
}

export default {};

import 'fast-text-encoding';
import 'react-native-url-polyfill/auto';

function defineMockGlobal(name) {
  if (typeof global[name] === 'undefined') {
    global[name] = class {
      constructor(type, eventInitDict) {
        this.type = type;
        Object.assign(this, eventInitDict);
      }
    };
  }
}

['MessageEvent', 'Event', 'EventTarget', 'BroadcastChannel'].forEach(
  defineMockGlobal
);

import { setupServer } from 'msw/native';
import type { SetupServer } from 'msw/node';
import { handlers } from './handlers';

export const server: Omit<SetupServer, 'boundary'> = setupServer(...handlers);

const AXIOS_INSTANCE = Axios.create({
  adapter: 'fetch',
  baseURL: process.env.EXPO_PUBLIC_API_URL,
});

export async function setupMSW() {
  if (process.env.EXPO_PUBLIC_USE_MSW !== 'true') return;

  await import('../../msw.polyfills');
  const { server } = await import('../mocks/server');
  server.listen();
}

import { Slot } from 'expo-router';
import { setupMSW } from '../lib/msw';

setupMSW();

function RootLayout() {
  return <Slot />;
}

"scripts": {
  "yarn start-test": "EXPO_PUBLIC_USE_MSW=true npx expo start --localhost",
  "test": "maestro test .maestro/run-all-flow.yaml"
}