Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React NativeアプリでE2Eテストを回してみた

Leko
November 25, 2017

React NativeアプリでE2Eテストを回してみた

東京Node学園祭 2017 Nov 25
React Nativeアプリで「E2Eやってみよう」と思い実行に移した話
E2Eテストやってみようかな、と思っている人を想定

Leko

November 25, 2017
Tweet

More Decks by Leko

Other Decks in Technology

Transcript

  1. • JavaScriptでiOS/Androidが作れるツール • JavaScriptCore / V8でjsを実行 • 開発環境がつよい • 既存のjs資源との相性が良い

    • Babeれるのでasync/awaitとか使える ◦ JavaScript Environment - React Native What is React Native ?
  2. • 開発メンバー:5人前後 ◦ React Nativeアプリ2つ ◦ SPAのweb1つ ◦ ドメイン、BFF、Lambdaなどなど •

    RNアプリのユニットテストはカバレッジ50%くらい ◦ 主要ロジックはカバー済、コンポーネント(ビュー層)は書いてない とある治療アプリにて
  3. • 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
  4. • ドメインの仕様変更が互いに影響しあう ◦ 確認漏れてデグレ • iOS | Android の互換性 ◦

    iOSは確認したがAndroidでバグ ◦ Androidは確認したが(ry • (エミュレータ操作つらい...) ◦ 無限マウスぽちぽち ◦ 実機を指でぽちぽち とある治療アプリにて
  5. スマフォアプリ • PCに比べ画面が物理的に小さい ◦ UIがシンプルなことが多い ◦ 操作する要素・画面が少ない。動線・シナリオが明確 ...? • でもweb以上に複雑

    ◦ web以上に色々できちゃう( Bluetooth、push通知、その他ネイティブ API) ◦ テスト自動化しにくく、手で操作するのは面倒くさい • RNでアプリ作ってる ◦ js資産が活きるようなら活かしたい
  6. • iOS:XCUITest ◦ iOSのテストしかできない ◦ jsでは書けない(Obj-C、Swift) • Android:Espresso、UI Automator ◦

    Androidのテストしかできない ◦ jsでは書けない(Java) How to E2E test iOS or Android
  7. 1. appium/appium ◦ JS Foundation、Seleniumのアプリ版、WebDriverベース、枯れてそう 2. wix/detox ◦ react-native-navigationなどを作ってるwix製 ◦

    google/EarlGrey(iOSのUIテストツール)ベース ◦ 最近Androidも対応した模様(選定当時は非対応だった ) 3. pixielabs/cavy ◦ 製品にテスト都合のコードが混じるので今回は選外 E2Eどれを使うか
  8. 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導入
  9. E2Eを試みてよかったこと • RNxAppiumよかった ◦ 大きくハマることなくシナリオを再現できた ◦ ただし機能が足りないとは感じる、 PR投げる • なにをもって”正常使用”か?を考える機会を得た

    ◦ テストの元ネタ(シナリオ)は揃った、あとは書く • 有用性は示せた、社内の機運が高まった ◦ 他のプロダクト、決済サービスでも E2Eの検討が始まった
  10. まとめ • E2Eテストする目的、範囲、方針を整理する ◦ E2EよりUT。UTで書けることはUTで書く ◦ “正常使用”に沿ったシナリオの優先度付け ◦ 今からE2Eを始めるなら私はdetoxを選ぶと思う •

    構成に時間をかけすぎず、まずはミニマムで回す... • E2Eテスト書いただけでは品質は上がらない ◦ 結局製品を直さないと品質は上がらない。 E2Eはその下支え • 必要なリファクタに躊躇わない
  11. PR