ReactNativeでE2EテストをするDetoxをちょっとだけ触ってみた（iOS）

ReactNative JavaScript アプリ開発

Detoxというライブラリを使ってE2Eテストを書いてみる

github.com

前提

準備

シミュレーターを動かすのに必要なのでインストールする

$ brew tap facebook/fb
$ export CODE_SIGNING_REQUIRED=NO && brew install fbsimctl
$ brew tap wix/brew
$ brew install --HEAD applesimutils
$ npm install -g detox-cli

テストしたいプロジェクトに導入する

$ npm install detox mocha --save-dev

初期化コマンドを実行すと

./e2e フォルダが生成されます

続いてビルドコマンドで成功すれば準備完了

$ detox init
$ detox build

動かす

$ detox test を実行すると ./e2e/xxx.spec.js ファイルが検出されてテストされる

適当な画面を書いて動かしてみた

テストを実行すると、画面が勝手に動き出して

書いたとおりにUIが変更されるかチェックされる

f:id:rskull:20170815182823g:plain

デモ： GitHub - rskull/detoxDemo

こんな感じのコード

describe('Example', () => {
  beforeEach(async () => {
    await device.reloadReactNative();
  });
  
  it('テキスト入力', async () => {
    await expect(element(by.id('welcome'))).toBeVisible();
    await element(by.id('textInput')).typeText('Hello!');
    await element(by.id('textInput')).clearText();
    await element(by.id('scrollview')).tap();
  });

  it('スクロールしてメニュー開閉', async () => {
    await element(by.id('scrollview')).scrollTo('bottom');
    await element(by.id('menuButton')).tap();
    await expect(element(by.id('menu'))).toBeVisible();
    await element(by.id('menuCloseButton')).tap();
    await expect(element(by.id('menu'))).toNotExist();
  });
})

操作対象とのヒモ付は testID を付ける

対応してるのは View, Text, TextInput, Switch, ScrollView で、ラップしてる場合は自分で渡せるようにしないといけない

例えば

<View testID='welcome'>
  <Text>Hello</Text>
<View>
describe('Example', () => {
  beforeEach(async () => {
    await device.reloadReactNative();
  });
  it('初期画面が表示されてる', async () => {
    await expect(element(by.id('welcome'))).toBeVisible();
  });
})

また、要素に対してタップやスクロールというような操作も実行できる

<TouchableOpacity testID='button' onPress={() => {}}>
  <Text>Touch</Text>
</TouchableOpacity>
  it('sample', async () => {
    await element(by.id('button')).tap() // onPressが実行される
  });

タップ以外の操作もだいたい出来る

  • .tap()
  • .longPress()
  • .multiTap()
  • .tapAtPoint()
  • .typeText()
  • .replaceText()
  • .clearText()
  • .scroll()
  • .scrollTo()
  • .swipe()

詳しくはドキュメントへ： https://github.com/wix/detox/blob/master/docs/APIRef.ActionsOnElement.md#methods

所感

  • testID 埋め込むのがちょっとめんどくさいのと、書き方によって埋め込みが難しいところもある
  • OSSのアプリに組み込んでみたらビルドエラーで動かなかったり、まだ安定してない感があった
  • 動いてる様子を見るのが楽しかった（たぶん最初だけ）
  • 使うとしたらコアで操作の多い重要な部分だけ書くのが良さそう
  • Androidはまだサポートしてないみたい

参考リンク