Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React NativeアプリでE2Eテストを回してみた
Search
Leko
November 25, 2017
Technology
8
2.7k
React NativeアプリでE2Eテストを回してみた
東京Node学園祭 2017 Nov 25
React Nativeアプリで「E2Eやってみよう」と思い実行に移した話
E2Eテストやってみようかな、と思っている人を想定
Leko
November 25, 2017
Tweet
Share
More Decks by Leko
See All by Leko
エンジニアと治療アプリ®
leko
0
1.1k
Node.jsにContributeして一ヶ月でCollaboratorになった
leko
5
7k
IntersectionObserverはいいぞ
leko
3
3k
React Nativeで医療機器作ってます
leko
4
1.6k
趣味では使っているが 仕事には使ってないツール
leko
1
190
レガシーな開発現場にUTを入れてCIを導入した話
leko
0
6.2k
MySQLがゆるふわなのはどう考えてもSQLモードが悪い!
leko
1
270
Other Decks in Technology
See All in Technology
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
180
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
580
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.6k
Forget efficiency – Become more productive without the stress
ufried
0
110
Nix入門パラダイム編
asa1984
2
200
サイバーエージェントにおける生成AIのリスキリング施策の取り組み / cyber-ai-reskilling
cyberagentdevelopers
PRO
2
200
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
160
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
310
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
500
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
470
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
YesSQL, Process and Tooling at Scale
rocio
167
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
RailsConf 2023
tenderlove
29
880
Faster Mobile Websites
deanohume
304
30k
GitHub's CSS Performance
jonrohan
1030
460k
Side Projects
sachag
452
42k
How GitHub (no longer) Works
holman
311
140k
Transcript
東京Node学園祭 2017 Nov 25 れこ React NativeでE2Eテストを回し てみた
れこ 株式会社CureApp Leko L_e_k_o
• React NativeアプリのE2EをAppiumでやってみた話 • アプリのE2Eやってみようかな、と悩んでいる人を想定 • (サクセスストーリーにはならなかった) 今日話したいこと
CureApp禁煙(治験中) ニコチン依存症 プロダクト(医療機関向け) NASH App 非アルコール性脂肪肝炎
React Nativeで医療機器作って ます https://speakerdeck.com/lek o/react-nativedeyi-liao-ji-qi-z uo-tutemasu See also
• JavaScriptでiOS/Androidが作れるツール • JavaScriptCore / V8でjsを実行 • 開発環境がつよい • 既存のjs資源との相性が良い
• Babeれるのでasync/awaitとか使える ◦ JavaScript Environment - React Native What is React Native ?
• 開発メンバー:5人前後 ◦ React Nativeアプリ2つ ◦ SPAのweb1つ ◦ ドメイン、BFF、Lambdaなどなど •
RNアプリのユニットテストはカバレッジ50%くらい ◦ 主要ロジックはカバー済、コンポーネント(ビュー層)は書いてない とある治療アプリにて
• 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
• ドメインの仕様変更が互いに影響しあう ◦ 確認漏れてデグレ • 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 E2E wix/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 architecture Appium 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 Native 3. wdの接続設定を書く 4. Appiumサーバ起動してmochaなどを実行 Appium導入
brew cask install appium | ネイティブUIのDOMInspectorが起動 • 付与したtestIDが効いてるか? • ネイティブUI(ex.
アラート)のID などに使える。困った時に Appium(GUIアプリ)
1シナリオ書いてみた
• タップ • 文字(日本語)入力 • スクロール • モーダル の操作ができた。アプリの挙動の多くは実現できる あとはシナリオを埋めていくぞ!
いけそう!
• 想定されうるユーザの動き全部を模倣 → 量が多すぎて一人ではリソース足りない • コンバージョンシナリオはなんだろう? → コンバージョンに繋がるシナリオ → 同じバグでも、治療効果が出なくなるバグ、デグレを防ぐのが優先?
→ 治療効果に寄与しない機能そもそもある? 結局のところ全部必要では? 悩ましいE2E「”シナリオ”とは」
• 機器の使用者に期待する、こちらが想定している使い方 • 「正常系」と言いかえてもいいと思う • 「期待通りに使ったのに使えない」を防ぐことを優先する • 想定してない使い方、異常系、バリデーションエラーetcは優先度下げる 「正常使用」
• E2Eの成果として定量的なデータなし • E2Eので1シナリオ書いたときすでに開発終盤だった 待ち構えるとバグが起きない...
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テストを回し てみた (終)