React NativeのUIテストを行うためにwix/detoxを使ってみましょう的なお話

React Nativeでテストをするとなるとjestなど色々とあるわけで。
けどそれはどちらかというとコンポーネントにデータが通ったかとかAPIの通信とかうんちゃらとか。
視覚的にそもそも遷移だとか、例えばログイン画面でメールアドレスとパスワードを入力して、エラーだったらアラートが出るかどうかをテストしたいとかあるわけで。
もちろん視覚的じゃなくてもできるわけだけど視覚的にちゃんと出てるのかなとか見てみたいわけで。

そういうときにwixから出てるdetoxを使えばできるよ的な。
ということで今日はそのお話をば。

とりあえず例を作ったのでそのリポジトリはこちらから。
https://github.com/watanabeyu/expo-detox-example

これはかなり簡素な画面にしているのであれだけども。
TouchableOpacityをクリックしたらTextInputが出てくるので、そこにemail_is_hereという文字を入れたらテストが通るような仕組み。
こうやって視覚的に判別できるとすごくよいよね。

ちなみにこれはexpoで走らせているので、通常のreact-nativeの場合だとまた設定はわずかに変わってくるっていう。

手順

リポジトリにも書いているけど以下のような感じ。
１：npm installをして、さらにdependenciesにdetox detox-expo-helpers mochaをいれる

２：expoのclientアプリをbinというディレクトリを作って入れる
※ちなみにどういうこっちゃという場合は~/.expo/ios-simulator-app-cacheを開くとシミュレータにインストールされているexpoのクライアントアプリのappがあるので、これを持ってくればよい

3:package.jsonにdetoxっていう設定を入れる

{
  ...
  "detox": {
    "configurations": {
      "ios.sim": {
        "binaryPath": "bin/Exponent-xxx.app", //latest expo client app
        "type": "ios.simulator",
        "name": "iPhone 7" //select iPhone 7, iPhone 8, other...
      }
    }
  }
}

ここのbinaryPathだけど~/.expo/ios-simulator-app-cache/Exponent-xxx.appみたいな感じでしても大丈夫な気がする。

４:testファイルをe2eフォルダの中に作成する

5:npm run e2eでテストを走らせる

Cannot find UI Element.エラーについてはexpoが立ち上がってる最中にテストをしようとしているので。
testファイルの中でawait reloadApp()している後にawait timeout(30000)としているところがあるので、ここの数字をいじってみれば大丈夫。

ってな感じでやれば大丈夫。
細かく何ができるどうこうとかは本家(wix/detox)のdocsをみた方がよいかと。
とりあえずこんな感じだけど、正直自分あまりテストかかないんだよなぁと…
書かないといけないと思っているんだけども。
けどTextInputに文字入れられるとか色々とクリックできるとかそもそも視覚的に確認ができるっていうのは便利だよね的なみたいな。