Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React NativeアプリでE2Eテストを回してみた
Leko
November 25, 2017
Technology
8
2.3k
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
520
Node.jsにContributeして一ヶ月でCollaboratorになった
leko
4
5.9k
IntersectionObserverはいいぞ
leko
3
2.4k
React Nativeで医療機器作ってます
leko
3
1.3k
趣味では使っているが 仕事には使ってないツール
leko
1
150
レガシーな開発現場にUTを入れてCIを導入した話
leko
0
5.6k
MySQLがゆるふわなのはどう考えてもSQLモードが悪い!
leko
1
200
Other Decks in Technology
See All in Technology
プログラマがオブジェクト指向しても幸せになれない理由
shirayanagiryuji
0
170
Empath Company Deck
empathpr
0
180
【SAP知らない人向け】SAP on AWS 個人学習メモ/sap-on-aws-study
emiki
3
2.4k
誰が正解を知っているのか / Who knows the right answer
takaking22
1
250
Meet passkeys
satotakeshi
1
130
MoT TechTalk #12 タクシーアプリ『GO』大規模トラフィックを捌く分析データ基盤の全容に迫る!
mot_techtalk
1
440
データエンジニアと作るデータ文化
yuki_saito
4
1.7k
令和4年資金決済法等改正を踏まえたステーブルコインに関する規制の動向
finengine
0
530
ZephyrRTOSのLongan Nanoへの移植
tokitahiroshi
0
110
AWS Cognito で開発環境を守る
mixi_engineers
PRO
0
150
Target SDK Versionを上げない Notification runtime permission対応
napplecomputer
0
150
Lessons Learned from Scaling Infrastructure as Code
joatmon08
0
800
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
Web Components: a chance to create the future
zenorocha
303
40k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Infographics Made Easy
chrislema
233
17k
Building Your Own Lightsaber
phodgson
94
4.6k
A Philosophy of Restraint
colly
192
15k
In The Pink: A Labor of Love
frogandcode
131
21k
BBQ
matthewcrist
74
7.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Gamification - CAS2011
davidbonilla
75
3.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
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テストを回し てみた (終)