Detox を Travis 上で稼働させる際の Tips

はじめに

以前の記事でも記載しましたが、私の職場では e2e テストとして Detox を導入しています。
Detox の使い方自体は慣れてきて、テストシナリオもそれなりに準備できてきました。
満を持して、Travis 上で稼働させて CI/CD のフローに組み込んでしまおう、とした時に詰まった内容と解決するための Tips を紹介したいと思います。

Detox を Travis 上で稼働させる際に詰まったこと

1. コマンドラインツールのバージョンが異なる

Travis 上で稼働させ始めた頃、 Travis の osx_image は xcode10.1 を使用していました。
すると、build でコケるという事象に直面。原因はコマンドラインツールのバージョンでした。
.travis.yml に

      before_install:
        - softwareupdate --list
        - softwareupdate --install "Command Line Tools (macOS High Sierra version 10.13) for Xcode-10.1"

を追記することで回避できるようになりました。
なお、2019/07/15現在では、 osx_image: xcode10.2 を指定することで、上述の記述なしに build は成功しています。
初歩ですが、ローカル環境と Travis 環境のアプリケーションバージョンを合わせることは重要ですね。

2. debug モードでテストを走らせていた

結論から先に言いますと、build の際に export RCT_NO_LAUNCH_PACKAGER=true を付与した config を実行します。

      "ios.sim.release": {
        "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/example.app",
        "build": "export RCT_NO_LAUNCH_PACKAGER=true && xcodebuild -workspace ios/example.xcworkspace -UseNewBuildSystem=NO -scheme 'example' -configuration Release -sdk iphonesimulator -derivedDataPath ios/build -quiet",
        "type": "ios.simulator",
        "name": "iPhone 8"
      },
      "ios.sim.debug": {
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/example.app",
        "build": "xcodebuild -workspace ios/example.xcworkspace -UseNewBuildSystem=NO -scheme 'example' -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "name": "iPhone 8"
      },

上記のような config を書いており、普段ローカルでは ios.sim.debug を稼働させていますが、 Travis 上では ios.sim.release である必要があります。
export RCT_NO_LAUNCH_PACKAGER=true がないと、 Timeout が発生してテストが全滅しました。

3. MFA 回避

私の職場で提供するアプリでは、通常と異なるデバイスでログインした際に、メールに記載されたコードを入力する必要があります。
シミュレーターで開発する際に都度コードを求められては非効率なため、開発時はその処理をスキップするようにしています。(__DEV__で判断するロジックが入っている)

前述の設定で Travis 上でテストを稼働させる場合、__DEV__ は false 扱いとなります。
その場合、多要素認証の処理が走り、テストが失敗してしまいます。
それを避けるために、e2e テスト時は __DEV__ の時と同じ判断をしてもらう必要があります。

このために導入したのが、babel-plugin-transform-inline-environment-variables です。
yarn add -D babel-plugin-transform-inline-environment-variables して .babelrc の plugins に以下のような定義を追加します。

  "plugins": [
    [
      "transform-inline-environment-variables",
      {
        "include": ["NODE_ENV", "E2E"]
      }
    ]
  ]

合わせて、前述の build の定義を以下のようにに変更します。

"build": "export RCT_NO_LAUNCH_PACKAGER=true && export E2E=true && ...

最後に、ソースコードを以下のように変更します。

  // __DEV__ ? ... : ...;
  __DEV__ || process.env.E2E ? ... : ...;

これで、 Travis 上でテストを稼働させる際も、__DEV__ と同じロジックを実行することができました。

おわりに

Detox × Travis の組み合わせで動かすという多少ニッチ(?)なケースのせいか、日本語はおろか英語でも解決策が見当たらず、かなり四苦八苦しました。
試行錯誤したおかげで色々と理解が進んだとポジティブに捉えます。

この組み合わせの利用を考えている方の参考になれば幸いです。