React NativeアプリでE2Eテストを回してみた

東京Node学園祭 2017 Nov 25
React Nativeアプリで「E2Eやってみよう」と思い実行に移した話
E2Eテストやってみようかな、と思っている人を想定

1. 東京Node学園祭 2017 Nov 25 れこ React NativeでE2Eテストを回し てみた
2. れこ 株式会社CureApp Leko L_e_k_o
3. • React NativeアプリのE2EをAppiumでやってみた話 • アプリのE2Eやってみようかな、と悩んでいる人を想定 • （サクセスストーリーにはならなかった） 今日話したいこと
4. CureApp禁煙（治験中） ニコチン依存症 プロダクト（医療機関向け） NASH App 非アルコール性脂肪肝炎
5. React Nativeで医療機器作って ます https://speakerdeck.com/lek o/react-nativedeyi-liao-ji-qi-z uo-tutemasu See also
6. • JavaScriptでiOS/Androidが作れるツール • JavaScriptCore / V8でjsを実行 • 開発環境がつよい • 既存のjs資源との相性が良い • Babeれるのでasync/awaitとか使える ◦ JavaScript Environment - React Native What is React Native ?
7. • 開発メンバー：5人前後 ◦ React Nativeアプリ２つ ◦ SPAのweb１つ ◦ ドメイン、BFF、Lambdaなどなど • RNアプリのユニットテストはカバレッジ50%くらい ◦ 主要ロジックはカバー済、コンポーネント（ビュー層）は書いてない とある治療アプリにて
8. • webもアプリもドメインもJS ◦ ネイティブ：React Native ◦ webアプリ：React ◦ BFF：Lambda(Node) • ドメインはUniversal JS • ドメインを介してやりとり 全部JS、DDD Copyright CureApp, Inc. All Rights Reserved. Domain React Native React MBaaS BFF
9. • ドメインの仕様変更が互いに影響しあう ◦ 確認漏れてデグレ • iOS | Android の互換性 ◦ iOSは確認したがAndroidでバグ ◦ Androidは確認したが（ry • （エミュレータ操作つらい...） ◦ 無限マウスぽちぽち ◦ 実機を指でぽちぽち とある治療アプリにて
10. • 治験開始後のアップデートは原則禁止 ◦ 治療効果が正しく測定できなくなる変更は NG ◦ リリースしてからデータ見つつ改善は通用しない ◦ 治験した意味がなくなっちゃうので、 治験終了後もおおよそ同じ • 個人の感覚 ◦ 検品の精度・コストがこれまでの経験（ webアプリ）より高い 治療アプリ
11. • 他に影響してないか ◦ そもそも何をもって「影響しているか？」 がふわっとしている • プロダクト間のデータ疎通が切れてないか ◦ ユニットテストの範疇を超えている • iOS | Android の互換性の動作確認 ◦ シミュレータ/エミュレータを動かす必要がある どうにかできないだろうか
12. E2Eテストでどうにかなるかも？
13. 　リファクタする？ ▶ E2Eやってみる？ 入門記事ばかりで経験談を聞かない E2Eの知見を持ってない、試したい 実際どうなのか試して以後の選択に役立てたい
14. スマフォアプリ • PCに比べ画面が物理的に小さい ◦ UIがシンプルなことが多い ◦ 操作する要素・画面が少ない。動線・シナリオが明確 ...？ • でもweb以上に複雑 ◦ web以上に色々できちゃう（ Bluetooth、push通知、その他ネイティブ API） ◦ テスト自動化しにくく、手で操作するのは面倒くさい • RNでアプリ作ってる ◦ js資産が活きるようなら活かしたい
15. 実機でRNアプリを動かし ユーザシナリオを模倣したテストをすれば 動作確認に相当する...？
16. • iOS：XCUITest ◦ iOSのテストしかできない ◦ jsでは書けない（Obj-C、Swift） • Android：Espresso、UI Automator ◦ Androidのテストしかできない ◦ jsでは書けない（Java） How to E2E test iOS or Android
17. • React Native x E2E wix/detox
18. 1. appium/appium ◦ JS Foundation、Seleniumのアプリ版、WebDriverベース、枯れてそう 2. wix/detox ◦ react-native-navigationなどを作ってるwix製 ◦ google/EarlGrey（iOSのUIテストツール）ベース ◦ 最近Androidも対応した模様（選定当時は非対応だった ） 3. pixielabs/cavy ◦ 製品にテスト都合のコードが混じるので今回は選外 E2Eどれを使うか
19. Appium architecture Appium Concepts & Architecture | Jayabrata Chakraborty | Pulse | LinkedIn
20. React Native + Appium(Node.js)の組み合わせなら、 1. RNアプリを作る 2. 操作対象のコンポーネントにtestIDを付与する | Used to locate this view in end-to-end tests. | View - React Native 3. wdの接続設定を書く 4. Appiumサーバ起動してmochaなどを実行 Appium導入
21. brew cask install appium | ネイティブUIのDOMInspectorが起動 • 付与したtestIDが効いてるか？ • ネイティブUI（ex. アラート）のID などに使える。困った時に Appium（GUIアプリ）
22. １シナリオ書いてみた
23. • タップ • 文字（日本語）入力 • スクロール • モーダル の操作ができた。アプリの挙動の多くは実現できる あとはシナリオを埋めていくぞ！ いけそう！
24. • 想定されうるユーザの動き全部を模倣 → 量が多すぎて一人ではリソース足りない • コンバージョンシナリオはなんだろう？ → コンバージョンに繋がるシナリオ → 同じバグでも、治療効果が出なくなるバグ、デグレを防ぐのが優先？ → 治療効果に寄与しない機能そもそもある？ 結局のところ全部必要では？ 悩ましいE2E「”シナリオ”とは」
25. • 機器の使用者に期待する、こちらが想定している使い方 • 「正常系」と言いかえてもいいと思う • 「期待通りに使ったのに使えない」を防ぐことを優先する • 想定してない使い方、異常系、バリデーションエラーetcは優先度下げる 「正常使用」
26. • E2Eの成果として定量的なデータなし • E2Eので１シナリオ書いたときすでに開発終盤だった 待ち構えるとバグが起きない...
27. Appiumは、ビルド済みのアプリを実行する • AppiumはRNに特化していない ◦ ビルドされた後の.app、.apkがテスト対象（なので RNもテストできる） ◦ ビルドフェーズで何か差し込むようなことはない • ブラウザのように動的にjsをinjectできない ◦ alertやconfirmに真面目に向き合う ... ◦ パーミッション要求も自動許可とかしたい ... ブラウザよりモックしにくい問題
28. • エージェントをビルド時に差し込み、WebSocketで操作 ◦ ReactNativeのAsyncStorageをNodeのREPLから操作する - Please Drive Faster ◦ JavaScriptCore（RN機関部）でテスト動かせると自由度上がりそう？ • Metro bundlerに対して操作 ◦ ビルドなしに動的にjsレイヤのコード差し替えできそう RNならできそうなこと（妄想）
29. E2Eを試みてよかったこと • RNxAppiumよかった ◦ 大きくハマることなくシナリオを再現できた ◦ ただし機能が足りないとは感じる、 PR投げる • なにをもって”正常使用”か？を考える機会を得た ◦ テストの元ネタ（シナリオ）は揃った、あとは書く • 有用性は示せた、社内の機運が高まった ◦ 他のプロダクト、決済サービスでも E2Eの検討が始まった
30. まとめ • E2Eテストする目的、範囲、方針を整理する ◦ E2EよりUT。UTで書けることはUTで書く ◦ “正常使用”に沿ったシナリオの優先度付け ◦ 今からE2Eを始めるなら私はdetoxを選ぶと思う • 構成に時間をかけすぎず、まずはミニマムで回す... • E2Eテスト書いただけでは品質は上がらない ◦ 結局製品を直さないと品質は上がらない。 E2Eはその下支え • 必要なリファクタに躊躇わない
31. PR
32. React NativeでE2Eテストを回し てみた （終）