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
200
レガシーな開発現場にUTを入れてCIを導入した話
leko
0
6.2k
MySQLがゆるふわなのはどう考えてもSQLモードが悪い!
leko
1
270
Other Decks in Technology
See All in Technology
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
110
Zennのパフォーマンスモニタリングでやっていること
ryosukeigarashi
0
160
アジャイルでの品質の進化 Agile in Motion vol.1/20241118 Hiroyuki Sato
shift_evolve
0
170
日経電子版のStoreKit2フルリニューアル
shimastripe
1
140
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
3
630
AI前提のサービス運用ってなんだろう?
ryuichi1208
8
1.4k
Adopting Jetpack Compose in Your Existing Project - GDG DevFest Bangkok 2024
akexorcist
0
110
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
10
1.2k
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
520
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
230
Taming you application's environments
salaboy
0
190
誰も全体を知らない ~ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
230
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
327
38k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Building Applications with DynamoDB
mza
90
6.1k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
110
Faster Mobile Websites
deanohume
305
30k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
How to train your dragon (web standard)
notwaldorf
88
5.7k
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テストを回し てみた (終)