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