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

13fbd31a4503c352369aab017e3edef7?s=47 Leko
November 25, 2017

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

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

13fbd31a4503c352369aab017e3edef7?s=128

Leko

November 25, 2017
Tweet

Transcript

  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アプリ2つ ◦ SPAのweb1つ ◦ ドメイン、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. 1シナリオ書いてみた

  23. • タップ • 文字(日本語)入力 • スクロール • モーダル の操作ができた。アプリの挙動の多くは実現できる あとはシナリオを埋めていくぞ!

    いけそう!
  24. • 想定されうるユーザの動き全部を模倣 → 量が多すぎて一人ではリソース足りない • コンバージョンシナリオはなんだろう? → コンバージョンに繋がるシナリオ → 同じバグでも、治療効果が出なくなるバグ、デグレを防ぐのが優先?

    → 治療効果に寄与しない機能そもそもある? 結局のところ全部必要では? 悩ましいE2E「”シナリオ”とは」
  25. • 機器の使用者に期待する、こちらが想定している使い方 • 「正常系」と言いかえてもいいと思う • 「期待通りに使ったのに使えない」を防ぐことを優先する • 想定してない使い方、異常系、バリデーションエラーetcは優先度下げる 「正常使用」

  26. • E2Eの成果として定量的なデータなし • E2Eので1シナリオ書いたときすでに開発終盤だった 待ち構えるとバグが起きない...

  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テストを回し てみた (終)