ReactNative detox E2E

ReactNative detox E2E:

はじめに

この記事はReact Nativeアドベントカレンダーの8日目の記事です。

今年からReactNatvieがっつり触り始めました

AdventCalendarを投稿するならReactNativeだなと思い投稿しました

ここ最近はテストばっかりやっているのでテストで使っているdetoxをご紹介しようと思います

detoxとは

ReactNativeのE2Eライブラリです

ios/androidの両方に対応しているので使っています

androidは数ヶ月前くらいに対応したのかな？

まぁ普通に使えている

環境

今回は最新Versionで試しに動かしてみます

OS: macOS

XCode: 10.1

ReactNative: 0.57.7

detox: 9.1.2

準備

iosセットアップ手順とか説明してきます

androidは別の機会に

新規プロジェクト作成

$ react-native init detoxSample 

必要なコマンドのインストール

$ brew tap wix/brew 
$ brew install --HEAD applesimutils 
 
$ npm i -g detox-cli 

プロジェクト内に導入

今回はmochaを使用するつもりなのでmocha detoxをインストール

$ npm i --save-dev detox mocha 

下記コマンドを実行すると e2eディレクトリが作成される

$ detox init -r mocha 

package.jsonを少し修正

detoxSampleとなっているところは作成したProjectの名前に置き換えてください

今回はdetoxSampleという名前で行っていますので

iPhone 7となっているところはテストしたいデバイスを指定できます

{ 
  "detox": { 
    "configurations": { 
      "ios.sim.debug": { 
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/detoxSample.app", 
        "build": "xcodebuild -project ios/detoxSample.project -scheme detoxSample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build", 
        "type": "ios.simulator", 
        "name": "iPhone 7" 
      } 
    }, 
    "test-runner": "mocha" 
  } 
} 
 

準備はこれで終了です。

では実行してみましょう

iPhoneシュミレータが起動して何やらテストが実行されると思います

テストは失敗しますがｗ

$ detox test -c ios.sim.debug 

テストを書いてみます

プロジェクトを作成してから変更は何も加えてない状態なはずなので少し付け加えていきます

App.js

e2e/firstTest.spec.js

コメントアウトしてtestIDwelcomeが表示されているか確認するテストを実行します

テストが通ります

もう少し書いてみます

FlatListを追加してテストしてみます

App.js

e2e/firstTest.spec.js

テストが通ります

さらにもう少し書いてみます

テキストをタップしてアラートを表示してみます

App.js

e2e/firstTest.spec.js

テストが通ります

最後にシミュレーターの様子をご覧ください

まとめ

• detoxはセットアップもさほど難しくないのでいい
• jestも対応はしているのだけどmochaのほうがいい
  
  
  • mochaは失敗したらテストが止まるので
  • jestはテストが失敗してもどこで失敗したのかあとで追うのが大変
• Xcodeがアップデートするとdetoxが対応していないケースがあるので待つしかないのつらみ
  
  
  • まだ対応してないときね
• detoxを使ってくれる人が増えてくれたらいいなと感じるｗ

リンク

• detox