Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Leko
November 25, 2017

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

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

Leko

November 25, 2017
Tweet

More Decks by Leko

Other Decks in Technology

Transcript

  1. 東京Node学園祭 2017 Nov 25
    れこ
    React NativeでE2Eテストを回し
    てみた

    View Slide

  2. れこ
    株式会社CureApp
    Leko
    L_e_k_o

    View Slide

  3. ● React NativeアプリのE2EをAppiumでやってみた話
    ● アプリのE2Eやってみようかな、と悩んでいる人を想定
    ● (サクセスストーリーにはならなかった)
    今日話したいこと

    View Slide

  4. CureApp禁煙(治験中)
    ニコチン依存症
    プロダクト(医療機関向け)
    NASH App
    非アルコール性脂肪肝炎

    View Slide

  5. React Nativeで医療機器作って
    ます
    https://speakerdeck.com/lek
    o/react-nativedeyi-liao-ji-qi-z
    uo-tutemasu
    See also

    View Slide

  6. ● JavaScriptでiOS/Androidが作れるツール
    ● JavaScriptCore / V8でjsを実行
    ● 開発環境がつよい
    ● 既存のjs資源との相性が良い
    ● Babeれるのでasync/awaitとか使える
    ○ JavaScript Environment - React Native
    What is React Native ?

    View Slide

  7. ● 開発メンバー:5人前後
    ○ React Nativeアプリ2つ
    ○ SPAのweb1つ
    ○ ドメイン、BFF、Lambdaなどなど
    ● RNアプリのユニットテストはカバレッジ50%くらい
    ○ 主要ロジックはカバー済、コンポーネント(ビュー層)は書いてない
    とある治療アプリにて

    View Slide

  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

    View Slide

  9. ● ドメインの仕様変更が互いに影響しあう
    ○ 確認漏れてデグレ
    ● iOS | Android の互換性
    ○ iOSは確認したがAndroidでバグ
    ○ Androidは確認したが(ry
    ● (エミュレータ操作つらい...)
    ○ 無限マウスぽちぽち
    ○ 実機を指でぽちぽち
    とある治療アプリにて

    View Slide

  10. ● 治験開始後のアップデートは原則禁止
    ○ 治療効果が正しく測定できなくなる変更は NG
    ○ リリースしてからデータ見つつ改善は通用しない
    ○ 治験した意味がなくなっちゃうので、 治験終了後もおおよそ同じ
    ● 個人の感覚
    ○ 検品の精度・コストがこれまでの経験( webアプリ)より高い
    治療アプリ

    View Slide

  11. ● 他に影響してないか
    ○ そもそも何をもって「影響しているか?」 がふわっとしている
    ● プロダクト間のデータ疎通が切れてないか
    ○ ユニットテストの範疇を超えている
    ● iOS | Android の互換性の動作確認
    ○ シミュレータ/エミュレータを動かす必要がある
    どうにかできないだろうか

    View Slide

  12. E2Eテストでどうにかなるかも?

    View Slide

  13.  リファクタする?
    ▶ E2Eやってみる?
    入門記事ばかりで経験談を聞かない
    E2Eの知見を持ってない、試したい
    実際どうなのか試して以後の選択に役立てたい

    View Slide

  14. スマフォアプリ
    ● PCに比べ画面が物理的に小さい
    ○ UIがシンプルなことが多い
    ○ 操作する要素・画面が少ない。動線・シナリオが明確 ...?
    ● でもweb以上に複雑
    ○ web以上に色々できちゃう( Bluetooth、push通知、その他ネイティブ API)
    ○ テスト自動化しにくく、手で操作するのは面倒くさい
    ● RNでアプリ作ってる
    ○ js資産が活きるようなら活かしたい

    View Slide

  15. 実機でRNアプリを動かし
    ユーザシナリオを模倣したテストをすれば
    動作確認に相当する...?

    View Slide

  16. ● iOS:XCUITest
    ○ iOSのテストしかできない
    ○ jsでは書けない(Obj-C、Swift)
    ● Android:Espresso、UI Automator
    ○ Androidのテストしかできない
    ○ jsでは書けない(Java)
    How to E2E test iOS or Android

    View Slide


  17. React Native x E2E
    wix/detox

    View Slide

  18. 1. appium/appium
    ○ JS Foundation、Seleniumのアプリ版、WebDriverベース、枯れてそう
    2. wix/detox
    ○ react-native-navigationなどを作ってるwix製
    ○ google/EarlGrey(iOSのUIテストツール)ベース
    ○ 最近Androidも対応した模様(選定当時は非対応だった )
    3. pixielabs/cavy
    ○ 製品にテスト都合のコードが混じるので今回は選外
    E2Eどれを使うか

    View Slide

  19. Appium architecture
    Appium Concepts & Architecture | Jayabrata Chakraborty | Pulse | LinkedIn

    View Slide

  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導入

    View Slide

  21. brew cask install appium |
    ネイティブUIのDOMInspectorが起動
    ● 付与したtestIDが効いてるか?
    ● ネイティブUI(ex. アラート)のID
    などに使える。困った時に
    Appium(GUIアプリ)

    View Slide

  22. 1シナリオ書いてみた

    View Slide

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

    View Slide

  24. ● 想定されうるユーザの動き全部を模倣
    → 量が多すぎて一人ではリソース足りない
    ● コンバージョンシナリオはなんだろう?
    → コンバージョンに繋がるシナリオ
    → 同じバグでも、治療効果が出なくなるバグ、デグレを防ぐのが優先?
    → 治療効果に寄与しない機能そもそもある? 結局のところ全部必要では?
    悩ましいE2E「”シナリオ”とは」

    View Slide

  25. ● 機器の使用者に期待する、こちらが想定している使い方
    ● 「正常系」と言いかえてもいいと思う
    ● 「期待通りに使ったのに使えない」を防ぐことを優先する
    ● 想定してない使い方、異常系、バリデーションエラーetcは優先度下げる
    「正常使用」

    View Slide

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

    View Slide

  27. Appiumは、ビルド済みのアプリを実行する
    ● AppiumはRNに特化していない
    ○ ビルドされた後の.app、.apkがテスト対象(なので RNもテストできる)
    ○ ビルドフェーズで何か差し込むようなことはない
    ● ブラウザのように動的にjsをinjectできない
    ○ alertやconfirmに真面目に向き合う ...
    ○ パーミッション要求も自動許可とかしたい ...
    ブラウザよりモックしにくい問題

    View Slide

  28. ● エージェントをビルド時に差し込み、WebSocketで操作
    ○ ReactNativeのAsyncStorageをNodeのREPLから操作する - Please Drive Faster
    ○ JavaScriptCore(RN機関部)でテスト動かせると自由度上がりそう?
    ● Metro bundlerに対して操作
    ○ ビルドなしに動的にjsレイヤのコード差し替えできそう
    RNならできそうなこと(妄想)

    View Slide

  29. E2Eを試みてよかったこと
    ● RNxAppiumよかった
    ○ 大きくハマることなくシナリオを再現できた
    ○ ただし機能が足りないとは感じる、 PR投げる
    ● なにをもって”正常使用”か?を考える機会を得た
    ○ テストの元ネタ(シナリオ)は揃った、あとは書く
    ● 有用性は示せた、社内の機運が高まった
    ○ 他のプロダクト、決済サービスでも E2Eの検討が始まった

    View Slide

  30. まとめ
    ● E2Eテストする目的、範囲、方針を整理する
    ○ E2EよりUT。UTで書けることはUTで書く
    ○ “正常使用”に沿ったシナリオの優先度付け
    ○ 今からE2Eを始めるなら私はdetoxを選ぶと思う
    ● 構成に時間をかけすぎず、まずはミニマムで回す...
    ● E2Eテスト書いただけでは品質は上がらない
    ○ 結局製品を直さないと品質は上がらない。 E2Eはその下支え
    ● 必要なリファクタに躊躇わない

    View Slide

  31. PR

    View Slide

  32. React NativeでE2Eテストを回し
    てみた
    (終)

    View Slide