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.6k
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
1k
Node.jsにContributeして一ヶ月でCollaboratorになった
leko
5
6.9k
IntersectionObserverはいいぞ
leko
3
2.9k
React Nativeで医療機器作ってます
leko
4
1.6k
趣味では使っているが 仕事には使ってないツール
leko
1
190
レガシーな開発現場にUTを入れてCIを導入した話
leko
0
6.1k
MySQLがゆるふわなのはどう考えてもSQLモードが悪い!
leko
1
260
Other Decks in Technology
See All in Technology
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
Featured
See All Featured
Thoughts on Productivity
jonyablonski
64
4.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Practical Orchestrator
shlominoach
185
10k
GitHub's CSS Performance
jonrohan
1026
450k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Visualization
eitanlees
139
14k
Become a Pro
speakerdeck
PRO
15
4.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
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テストを回し てみた (終)