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は別の機会に

### 新規プロジェクト作成

```bash
$ react-native init detoxSample
```

### 必要なコマンドのインストール
```bash
$ brew tap wix/brew
$ brew install --HEAD applesimutils

$ npm i -g detox-cli
```

### プロジェクト内に導入
今回は`mocha`を使用するつもりなので`mocha` `detox`をインストール

```bash
$ npm i --save-dev detox mocha
```

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

```
$ detox init -r mocha
```

### package.jsonを少し修正

detoxSampleとなっているところは作成したProjectの名前に置き換えてください
今回はdetoxSampleという名前で行っていますので
iPhone 7となっているところはテストしたいデバイスを指定できます

```json
{
  "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シュミレータが起動して何やらテストが実行されると思います
テストは失敗しますがｗ

```bash
$ detox test -c ios.sim.debug
```

![スクリーンショット 2018-12-08 9.06.05.png](https://qiita-image-store.s3.amazonaws.com/0/83029/bdf089c9-812b-b30b-2590-5b417f166013.png)

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

### App.js
![スクリーンショット 2018-12-08 9.11.10.png](https://qiita-image-store.s3.amazonaws.com/0/83029/c1344ddf-fc6d-4768-4b95-75f3f9089817.png)

### e2e/firstTest.spec.js
コメントアウトしてtestID`welcome`が表示されているか確認するテストを実行します
![スクリーンショット 2018-12-08 9.13.15.png](https://qiita-image-store.s3.amazonaws.com/0/83029/611e0a9a-23fb-6c65-e42f-96eedec7cf42.png)

### テストが通ります
![スクリーンショット 2018-12-08 9.15.14.png](https://qiita-image-store.s3.amazonaws.com/0/83029/35db2a7e-05fd-7297-40e0-601f22263887.png)

## もう少し書いてみます
FlatListを追加してテストしてみます

### App.js
![スクリーンショット 2018-12-08 9.34.19.png](https://qiita-image-store.s3.amazonaws.com/0/83029/d4c6b85d-af2e-413b-2b02-4995a2ae959d.png)

### e2e/firstTest.spec.js
![スクリーンショット 2018-12-08 9.35.15.png](https://qiita-image-store.s3.amazonaws.com/0/83029/9581869b-352c-b731-c141-c6cf134e0090.png)

### テストが通ります
![スクリーンショット 2018-12-08 9.35.51.png](https://qiita-image-store.s3.amazonaws.com/0/83029/27f04978-f934-d801-2ed5-5237958fbec9.png)

## さらにもう少し書いてみます
テキストをタップしてアラートを表示してみます

### App.js
![スクリーンショット 2018-12-08 9.41.20.png](https://qiita-image-store.s3.amazonaws.com/0/83029/121d91b2-3d8a-865c-3373-62656b93c84b.png)

### e2e/firstTest.spec.js
![スクリーンショット 2018-12-08 9.42.56.png](https://qiita-image-store.s3.amazonaws.com/0/83029/6adadacb-c81a-0bbe-a1db-7846317e612c.png)

### テストが通ります
![スクリーンショット 2018-12-08 9.43.34.png](https://qiita-image-store.s3.amazonaws.com/0/83029/cb2dcb85-d192-613d-b581-1827d176f6b4.png)

## 最後にシミュレーターの様子をご覧ください
![detox.gif](https://qiita-image-store.s3.amazonaws.com/0/83029/e667be57-ffdc-607d-aad8-6336110ada3d.gif)

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

## リンク
- [detox](https://github.com/wix/Detox)