はじめに
この記事は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を使ってくれる人が増えてくれたらいいなと感じるｗ