多様なテスト-ReactNativeアプリの自動化フレームワーク

公開: 2022-03-10
クイックサマリー↬今日のモバイルアプリの基準は高く設定されています。 まず、アプリはアプリ市場が期待する品質基準を満たしている必要があります。 第二に、モバイルアプリのユーザーは非常に要求が厳しいです。 たくさんの選択肢がダウンロードできるので、ユーザーはバグのあるアプリを容認しません。 モバイルアプリは人々の生活の非常に重要な部分になっているため、ユーザーはアプリに対する愛情や憎しみを共有することを恥ずかしがらず、そのフィードバックは数百万人のユーザーの前に数秒で届きます。

今日のモバイルアプリの基準は高く設定されています。 まず、アプリはアプリ市場が期待する品質基準を満たしている必要があります。 第二に、モバイルアプリのユーザーは非常に要求が厳しいです。 たくさんの選択肢がダウンロードできるので、ユーザーはバグのあるアプリを容認しません。 モバイルアプリは人々の生活の非常に重要な部分になっているため、ユーザーはアプリに対する愛情や憎しみを共有することを恥ずかしがらず、そのフィードバックは数百万人のユーザーの前に数秒で届きます。

スマッシングに関するさらなる読み物：

  • JavaScriptを使用して最初のiOSアプリを構築する
  • モバイルアプリのReactNativeを検討する理由
  • アプリ、ゲーム、モバイルWebのテスト自動化
  • React、Node、Expressを使用したサーバーサイドレンダリング
  • クライアントがレンダリングするアクセシビリティに関する注記

モバイルはこれまで以上に重要です。 ただし、アプリを適切に作成し、さまざまなOSバージョン、ディスプレイ解像度、チップセット、その他のハードウェア特性を備えたすべての可能なデバイスで動作させ、すべての可能な構成でユーザーエクスペリエンスをスムーズにすることは困難な作業です。

モバイルプラットフォームとデバイスの断片化の増加
モバイルプラットフォームとデバイスの断片化の増加。 （拡大版を表示）
ジャンプした後もっと！ 以下を読み続けてください↓

ネイティブモバイルアプリを構築するために、数多くの優れたテクノロジー、ツール、フレームワーク、オープンソースコンポーネントを利用できます。 React Nativeはシーンにどのような価値をもたらしますか？また、React Nativeを使用して構築されたアプリが、ターゲットオーディエンスに好評であることを確認するにはどうすればよいですか？

この記事では、ReactNativeアプリのテストに利用できるものを見ていきます。 最初に、これらのテストを実装する方法を検討する前に、ReactNativeのいくつかの主要な機能について説明します。 次に、テスト方法とフレームワークを3つのレベル（ユニット、統合、機能）に分類し、それぞれの例を示します。 最後に、機能的なアプリのテストに最も一般的なオープンソースのテスト自動化フレームワークを使用してテストを実装する方法の簡単な例を示します。

ReactNativeアプリの基本アーキテクチャ

それはすべて、FacebookがそのフレームワークをWeb開発者に紹介した3年以上前にReactで始まりました。 Facebookによって作成および開発されただけでなく、Web開発者に提供された機能、特にアプリの作成方法をどのように変えたかによって、人気が出るはずです。

ただし、このタイプの「一度学習してどこにでも書く」フレームワークの概念は新しいものではありませんでした。 JavaScriptライブラリが同様のことを行うのを見たことはありますが（Sencha、PhoneGap、Appceleratorなど）、Reactには、開発者の習慣や、アプリケーションのUIを個別のコンポーネントに分解する方法に影響を与える何かがありました。

React Nativeは、レンダリングにDOMを使用しません。 代わりに、ネイティブUIビューでレンダリングされます。つまり、オペレーティングシステムによって提供されるネイティブコンポーネントを使用しています。 この種の製品作成フローでは、DOM APIをより宣言型のAPIに置き換えることで、開発者はよりまとまりのある単純化されたレベルの抽象化を実現できます。

AndroidとiOSでのReactNative開発フロー
AndroidとiOSでのReactNative開発フロー。 （画像：モバイルアプリのテスト）（拡大版を表示）

React Nativeの重要な点は、Reactプログラミングモデルをモバイルアプリ、開発、テストに導入することです。 クロスプラットフォームのツールやフレームワークとして実際に直接機能するわけではありませんが、この新しいプラットフォームでモバイルアプリを構築する傾向を加速させます。 そして、それがReact Nativeを非常に強力で、習得しやすく、この新しいプラットフォームで簡単に記述できるようにするための基礎の1つです。

ネイティブモバイルとWebの主な違いと利点は、ブラウザーでJavaScriptベースの実装を実行してHTML要素を公開する代わりに、プラットフォーム固有のアプリに埋め込まれたJavaScriptCoreに依存していることです。 UI要素。

さまざまなレベルでのテスト自動化：ユニット、統合、コンポーネント、機能

すべてのモバイルソフトウェアは、コンポジションを使用して構築されています。 AndroidとiOSでは、これは、アプリケーションの目標と要件が満たされるまで、小さなソフトウェアコンポーネントが一緒に配置されて、より優れた機能を備えたより大きな高レベルのコンポーネントを形成することを意味します。 良いテスト方法は、コンポジションのすべてのレベルで機能をカバーするテストを実行することです。

この記事では、3つのレベルでのテスト方法と自動化フレームワークについて説明します。 主な焦点は最高レベルの機能テストですが、React Nativeアプリは、少なくとも次のレベルでテストでき、テストは自動化できます。

  • ユニットテスト
    これは、コンポーネントレベルでJavaScriptオブジェクトとメソッドをテストするのと同じくらい基本的なことかもしれません。
  • コンポーネントテスト
    各コンポーネントは、視覚的または機能的にテストできます。 ReactTestUtilsは、Reactコンポーネントをテストするためのシンプルなフレームワークを提供します。
  • 統合テスト
    次に統合テストが行​​われ、さまざまなユニットのグループが通常エンティティとしてテストされるフェーズです。
  • 機能テスト
    機能テストは、ユーザーの要件と相互作用に焦点を当てたブラックボックステストの一種であり、基盤となるすべてのソフトウェア、すべてのユーザーの相互作用、およびエンティティとしてのアプリケーションを対象としています。

ReactTestUtilsに加えて、React Nativeは便利な単体テストメソッドを提供しますが、それらのどれもアプリケーションの実際のロジックを完全にカバーしていません。 したがって、React Nativeに基づいて構築されたモバイルアプリは、機能的なUIテストの恩恵を受けます。 さまざまな機能テスト自動化フレームワークが利用可能であり、この記事では最も人気のあるフレームワークのいくつかを見ていきます。

単体テストはコンポーネントレベルで実行できますが、機能テストの自動化により、ReactNativeアプリでより大きなエンティティをテストするための優れた機能が提供されます。 React Nativeを使用すると、コンポーネントロジックの単体テストを個別に実行できます。従来のJavaScriptライブラリを使用し、ReactNativeにネイティブコンポーネントではなく通常のコンポーネントを返すように強制します。 機能テスト自動化フレームワークを使用すると、UIコンポーネントはアプリの一部であり、全体として簡単にテストできます。

次の図に示すように、これらのフレームワークをクロスプラットフォームフレームワークとプラットフォーム固有のフレームワークに分けます。

ReactNativeアプリのさまざまなテスト自動化オプション
ReactNativeアプリのさまざまなテスト自動化オプション。 （画像：モバイルアプリのテスト）（拡大版を表示）

React Nativeアプリの最も優れている点は、両方の主要なモバイルプラットフォーム（AndroidとiOS）で完全にネイティブであるということです。 これは、テスト目的でより多くのフレームワーク、ツール、およびネイティブメソッドを取得することを意味します。 以下の「ReactNativeアプリでの機能テスト自動化フレームワークの使用」というタイトルのセクションで、機能テスト自動化フレームワークについて説明します。

JavaScriptテストを使用して、単体テスト機能から始めましょう。

JestとJasmineによるユニットテスト

デフォルトでは、React Nativeは単体テスト用のJestテストを提供し、これはAndroidとiOSの両方で機能します。 現在、テストカバレッジは完全ではありませんが、Facebookによると、React Nativeにはさらに多くの単体テスト機能が導入され、ユーザーはすでに独自の機能を構築できます。

Jestは、JavaScriptコードをテストするための基礎として、Jasmineの動作駆動型フレームワークを使用します。 すべてのテストケースは、JUnitがTestCaseクラスを使用する方法と同様に、 describe()関数呼び出しから始まります。 describe()関数は、テストケースの説明とタイトル、および実行される関数の2つのパラメーターを取ります。 it()関数にはすべてのテストステップが含まれ、（JUnitと同様に）一連のexpect()関数を提供します。

これは、プレーヤーアプリケーション用のJasmineテストスクリプトの例です。

 describe("Player", function() { var player; var song; beforeEach(function() { player = new Player(); song = new Song(); }); it("should be able to play a song", function() { player.play(song); expect(player.currentlyPlayingSong).toEqual(song); //demonstrates use of custom matcher expect(player).toBePlaying(song); }); describe("when song has been paused", function() { beforeEach(function() { player.play(song); player.pause(); }); it("should indicate the song is paused", function() { expect(player.isPlaying).toBeFalsy(); // demonstrates use of 'not' with a custom matcher expect(player).not.toBePlaying(song); }); it("should be possible to resume", function() { player.resume(); expect(player.isPlaying).toBeTruthy(); expect(player.currentlyPlayingSong).toEqual(song); }); }); // demonstrates use of spies to intercept and test method calls it("tells the current song whether the user has made it a favorite", function() { spyOn(song, 'persistFavoriteStatus'); player.play(song); player.makeFavorite(); expect(song.persistFavoriteStatus).toHaveBeenCalledWith(true); }); //demonstrates use of expected exceptions describe("#resume", function() { it("should throw an exception if song is already playing", function() { player.play(song); expect(function() { player.resume(); }).toThrow("song is already playing"); }); }); });

この基本的な例は、Jasmineを使用してアプリの機能をテストする方法を示していますが、メソッドレベルのテストに重点を置いています。 さらに、React Nativeは、統合されたコンポーネントをテストするためのいくつかの基本的な機能を提供します。 これは、ネイティブコンポーネントとJavaScriptコンポーネントの両方で機能し、ブリッジを介したコンポーネント間の通信を可能にします。

統合テスト

現在、React Nativeコミュニティで強調表示されている統合テストは、iOSでのみ利用可能であり、コンポーネントをテストする機能は非常に限られています。 通信はブリッジを経由し、ネイティブコンポーネントとJavaScriptコンポーネントの両方が必要です。 この機能では、カスタマイズされた統合テストを実装するために、RCTestRunnerとRCTestModuleの2つのコンポーネントを使用できます。

iOSアプリのテストスケルトンを構築するための基本的なObjective-Cの例は、次のように始まります。

 @implementation ExampleTests { RCTTestRunner *_runner; } - (void)setUp { [super setUp]; _runner = RCTInitRunnerForApp(@"IntegrationTestHarnessTest", nil); } - void()testExampleTests { [_runner runTest:_cmd module:@"ExampleTests"] } @end

ただし、統合テストを実行してAndroidとiOSに拡張する方法は他にもあります。 ユニットテストと統合テストの両方を実行するための優れた代替手段は、Node.jsで実行される機能豊富なJavaScriptテストフレームワークを提供するMochaです。 Mochaは、動作駆動開発（BDD）、テスト駆動開発（TDD）、およびテスト用のQUnitインターフェースも提供します。

関数型UIテストについては、Appium、Calabash、XCTest、その他いくつかを含む、最も著名で最も使用されているテスト自動化フレームワークについて説明します。

機能テストの使用-ReactNativeアプリでの自動化フレームワーク

アプリ開発プロセスを合理化し、テストカバレッジを最大化するために、多数のオープンソースのテスト自動化フレームワークから選択できます。

アプリが複数のOSプラットフォームで実行される場合、最良の選択は、複数のプラットフォームをサポートし、テスト自動化の堅牢な基盤を提供するフレームワークです。 モバイルでは、「クロスプラットフォーム」という用語は、AndroidとiOSの両方に同じAPI、ツール、機能を提供するフレームワークを指します。

さらに、さまざまな優れたプラットフォーム固有のフレームワークが利用可能です。 当然、各フレームワークは特定のプラットフォーム用に構築されており、ほとんどの場合、そのプラットフォームに採用する方が簡単です。 この記事では、AppiumとCalabashに加えて、Android用のRobotiumとEspresso、iOS用のXCTestとEarlGreyの4つのプラットフォーム固有のフレームワークについて説明します。

関数型UIテスト用のさまざまなテスト自動化フレームワーク
機能的なUIテストのためのさまざまなテスト自動化フレームワーク。 （画像：Testdroid）（拡大版を表示）

テスト自動化に関しては、ReactNativeで構築されたアプリはiOSとAndroidの両方で完全にネイティブであることに注意してください。 したがって、機能テスト自動化フレームワークはそれらで正常に機能します。

各フレームワークで使用する例は、非常に基本的なラジオボタンUIの実装です。

 <Radio onSelect={this.onSelect.bind(this)} defaultSelect={this.state.optionSelected - 1}> <Option color="black" selectedColor="#000000"> <Item title="First option" description="First radio button"/> </Option> <Option color="black" selectedColor="#000000"> <Item title="Second option" description="Second radio button"/> </Option> <Option color="black" selectedColor="#000000"> <Item title="Third option" description="Third radio button"/> </Option> </Radio>

以下の各フレームワークセクションに含まれるテストスニペットは、テストスクリプトが各UI要素をどのように処理し、クリックやその他のユーザー入力がどのように処理されるかを示しています。 例の目的は、ステップバイステップの説明を提供することではなく、例を比較して、今日のテスト自動化に利用できるものと、テストに使用できるプログラミング言語を示すことです。

クロスプラットフォームフレームワーク

前述のように、React Nativeは実際にはクロスプラットフォームのフレームワークではありませんが、他のプラットフォームでの採用は簡単です。 次の2つのセクションでは、モバイルテストとモバイルテスト自動化のための2つの一般的なクロスプラットフォームテスト自動化フレームワークについて説明します。

Appium

Appiumは、オープンソースのテスト自動化フレームワークであり、ネイティブ、ハイブリッド、およびモバイルのWebアプリで適切に機能する検査ツールを備えています。 内部でJSONWireProtocolを使用して、SeleniumWebDriverを使用してiOSおよびAndroidアプリと対話します。 このため、AppiumはモバイルWebでも非常にうまく機能し、SeleniumをWebテストに使用する場合のユースケースは非常に似ています。

実際、Appiumは、昨年、モバイルテスト自動化の新星でした。 もともとは、AndroidとiOSの両方の主要なプラットフォームにクロスプラットフォームサポートを提供するために構築されました。

クロスプラットフォームであるということは、フレームワークとそのスクリプトが両方のプラットフォームでまったく同じように機能することを意味します。 さらに、Appiumは素晴らしいプログラミング言語サポートを提供します。開発者は、お気に入りの言語（Java、Ruby、Python、C＃など）、ツール、および環境を使用してテストを作成できます。 また、開始、再利用可能なテストの作成と保守、および実際の物理デバイスでのそれらのテストの実行も簡単です。

React Nativeを利用したアプリの場合、JavaScriptは必ずしも必要ではありません。 テストはどの言語でも書くことができます。 たとえば、Appiumスクリプトは次のようになります。

 driver.findElement(By.id("com.example.app:id/radio0")).click(); driver.findElement(By.id("com.example.app:id/radio1")).click(); driver.findElement(By.id("com.example.app:id/radio2")).click(); driver.findElement(By.id("com.example.app:id/editText1")).click(); driver.findElement(By.id("com.example.app:id/editText1")).sendKeys("Simple Test"); driver.findElement(By.name("Answer")).click(); // or alternatively like this: driver.findElement(By.id("com.example.app:id/button1")).click();

では、これらのWebDriver関数は、デバイスで実行されているアプリにどのようにアクセスするのでしょうか。 基本的に、Appiumはデバイスまたはエミュレーターでテストスクリプトを開始します。次に、サーバーを作成し、メインのAppiumサーバーからのコマンドをリッスンします。 これは、SeleniumクライアントライブラリからHTTPリクエストを取得するSeleniumサーバーと同じです。 AndroidとiOSの違いは、次の図に示されています。

AppiumがAndroidとiOSでどのように機能するか
AppiumがAndroidとiOSでどのように機能するか。 （画像：Testdroid）（拡大版を表示）

iOSの場合、Selenium WebDriverはAppiumスクリプトからコマンドを取得し（たとえば、 click() ）、HTTPリクエストを介してJSON形式でAppiumサーバーに送信します。 Appiumは自動化コンテキストを認識しており、このコマンドをInstrumentsコマンドサーバーに送信します。Instrumentsコマンドサーバーは、Instrumentsコマンドクライアントがコマンドを取得し、iOSInstruments環境でbootstrap.jsを使用して実行するのを待ちます。 コマンドが実行されると、InstrumentsコマンドクライアントはメッセージをAppiumサーバーに送り返し、Appiumサーバーはコマンドに関連するすべてのものをコンソールに記録します。 このサイクルは、テストスクリプトが終了するまで続きます。

Androidでは、使用されるフレームワークがSelendroidとUiAutomatorであることを除いて、ほとんど同じように機能します。 つまり、AppiumはWebDriverコマンドをUiAutomator（APIレベル17以上）またはSelendroid（APIレベル16以下）コマンドに変換します。 物理デバイスでは、 bootstrap.jarはTCPクライアントからコマンドを取得するTCPサーバーを起動します。 プロセスはiOSでも同様です。

Appiumの使用を開始することに興味がある場合は、ステップバイステップの説明やAppiumチュートリアルなど、豊富な資料を利用できます。

ひょうたん

もう1つの優れたクロスプラットフォームテストフレームワークはCalabashです。これにより、誰でもモバイルアプリケーションのテストを作成できます。 主な違いは、ひょうたんテストがキュウリで書かれていることです。 この種の言語をテストに使用する背後にある考え方は素晴らしいです。テスト自体は仕様のようなものであり、すべてのテストはシンプルで読みやすく、自動化システムによって実行可能です。

Appiumと比較して、Calabashは、AndroidおよびiOS用のクロスプラットフォームテストを作成するためのより簡単な方法を提供します。 これは、単純な語彙と仕様指向の言語によるものであり、Calabashテストは両方のプラットフォームで同一になります。 実際のテストはGherkinで記述され、Cucumberで実行されます。

これらの機能により、AndroidとiOSアプリケーションで動作するCalabashの違いはわずかです。 繰り返しになりますが、すべてのコンポーネントとユーザーインターフェイスはこれらのプラットフォームに完全にネイティブであるため、ReactNativeアプリには影響はありません。

AndroidとiOSのひょうたん
AndroidとiOSのひょうたん。 （画像：Testdroid）（拡大版を表示）

ただし、基本的なテストとテスト作成のフローは同じです。 Calabash（およびGherkin）テストは、機能、シナリオ、および手順で構成されています。 推奨されるアプローチは、最初に最高レベルの説明を完了することです。機能、シナリオ、実際の手順の順になります。 経験則として、最初にCalabash機能を作成することです。

Calabashの機能、シナリオ、および手順
Calabashの機能、シナリオ、および手順。 （画像：Testdroid）（拡大版を表示）

以下の例は、アプリケーションとそのUIコンポーネント（ラジオボタン、テキストフィールド、ボタン）がCalabashでどのように実装されるかを示しています。

 Feature: Answer the question feature Scenario: As a valid user, I want to answer app question, I wait for text "What is the best way to test application on a hundred devices?" Then I press radio button 0 Then I press radio button 1 Then I press radio button 2 Then I enter text "Simple Test" into field with id "editText1" Then I press view with id "Button1"

手順は通常、 givenたキーワードの1つで始まりwhen then 、、、、 andまたはbut 。 ただし、そうする必要はありません。 代わりに*を使用できます。

Calabashは、開発者以外でも広く使用されており、言語とロジックがわかりやすいため、製品の仕様やドキュメントに使用できます。 最終的に、機能とシナリオはRubyコードにラップされます。

Calabashのセットアップと作業の開始は簡単です。 BundlerとRuby（またはrbenv）がインストールされている場合は、コンソールで次の数行を押すだけで、すぐにCalabash環境がセットアップされます。

 $ gem install calabash-android $ gem install calabash-cucumber

これにより、Calabash-AndroidとCalabash-iOSのインストールが処理され、テスト自動化の旅が始まります。

プラットフォーム固有のフレームワーク

AndroidおよびiOSアプリでのテストの自動化に関しては、クロスプラットフォームのフレームワークよりもプラットフォーム固有のフレームワークを使用することには一定の利点があります。 たとえば、一部のフレームワークはSDKおよびIDEに密接に構築されており、アプリケーションの開発中にすぐに利用できます。 AndroidおよびiOS用のこれらのタイプのフレームワークのいくつかの例を見てみましょう。

RobotiumとExtSolo（Android）

Robotiumは、ネイティブおよびハイブリッドのAndroidアプリで機能する最初のテストフレームワークの1つでした。 Robotiumで作成されたUIテストにより、Androidアプリの機能、システム、およびユーザー受け入れテストが可能になり、複数のAndroidアクティビティにまたがって処理されます。 実際、Robotiumは、APIレベル8以降の非常に初期のバージョンのAndroidをサポートしています。

最近、RobotiumはExtSoloライブラリで拡張されました。このライブラリは、アプリのテストに役立つさまざまな機能を提供します。

  • 任意のディスプレイ解像度でのxクリックとyクリックの自動スケーリング。
  • マルチパスドラッグ;
  • テスト失敗時の自動スクリーンショットキャプチャ。
  • モックロケーション（GPS座標）;
  • Androidデバイスの言語の変更。
  • Wi-Fi接続の制御。

Javaコードを使用すると、JavaSDKおよびIDEを使用してテストを簡単に構築できます。 この例で使用される主な関数はfindViewByIdであり、 id属性で識別されるビューを検索します。 UI要素は、名前、クラス、またはその他の属性によっても識別できます。 id属性を持つコード例は次のようになります。

 solo.clickOnView(solo.findViewById("com.example.app:id/radio0")); solo.clickOnView(solo.findViewById("com.example.app:id/radio1")); solo.clickOnView(solo.findViewById("com.example.app:id/radio2")); solo.enterText((EditText) solo.findViewById("com.example.app:id/editText1"), "Simple Test"); solo.clickOnView(solo.findViewById("com.example.app:id/button1"));

ここでのRobotiumは、 id 、説明、およびその他の特性に基づいてUI要素を見つけようとしています。 残念ながら、これが常に最良のアプローチであるとは限らず、Webviewコンポーネントで必ずしもうまく機能するとは限りません。 ただし、ExtSoloライブラリを使用すると、ユーザーは、解像度に応じてスケーリングするUI要素のクリックやその他のインタラクションを定義できます。 また、座標のハードコーディングが可能であり、これらはディスプレイの解像度が変化したときにスケーリングされます。

Robotiumを使用している場合、RobotiumExtSoloの使用を開始するのは簡単で簡単です。 自分用にリポジトリのクローンを作成し、ライブラリを構築するだけです。

 $ git clone https://github.com/bitbar/robotium-extensions $ ant clean instrument

この後、最近ビルドした.jarファイルをAndroid Studioプロジェクトのlibsフォルダーに配置し、プロジェクトがそれにリンクされていることを確認します。 これらの優れた追加機能とサービスはすべて、ワークスペースに含まれています。

エスプレッソ（Android）

Espressoテストフレームワークは、AndroidアプリのユーザーインタラクションをシミュレートするUIテストを作成するためのAPIを提供します。 Espresso APIは軽量で、 viewMatchers 、 viewActions 、 viewAssertionsの3つの主要コンポーネントを提供します。

Espressoの優れている点は、テスト対象のテストメソッドとUI要素の自動同期を提供することです。 たとえば、テストスクリプトがボタンを押したいが、ボタンがまだ画面に表示されていない場合、このボタンが押されるまで待機します（つまり、ボタンが表示されてクリックが発生する可能性があります）。 これにより、テストスクリプトにsleepコマンドやwaitコマンドを含める必要がないため、テストの実行が非常に高速になります。 また、開発者はタイミング関連の問題を処理するために追加のロジックを必要としません。

 // R class ID identifier for radio buttons onView(withId(R.id.radio0)).perform(click()); onView(withId(R.id.radio1)).perform(click()); onView(withId(R.id.radio2)).perform(click()); onView(withId(R.id.EditText1)).perform(click()); // Instead of R, we use getIdentifier onView(withId(getInstrumentation().getTargetContext().getResources() .getIdentifier("com.example.app:id/EditText1", null, null))).perform((typeText("Simple Test"))); onView(withId(getInstrumentation().getTargetContext().getResources() .getIdentifier("com.example.app:id/Button1", null, null))).perform(click());

Espressoには独自の長所と短所があり、軽量APIのため、開発者が利用できる追加のサービスや関数呼び出しは多くありません。 たとえば、スクリーンショットを撮ったり、テストを管理したり、テスト結果を出力したりするには、別の方法を使用する必要があります。

Google IO 2016で、GoogleはAndroidStudioの不可欠な部分としてEspressoTestRecorderを導入しました。 この機能はまだ利用できませんが、待つ価値はあります。

XCTestおよびKIF（iOS）

XCTestはXcodeと緊密に結合されていますが、実際のiOSデバイスとシミュレーターの両方で引き続き使用できます。 XCTestを使用すると、開発者は任意のレベルでコンポーネントのテストを作成でき、UIテスト機能のフレームワークも提供されます。 XCTestテストは、XCTestCaseのサブクラスにグループ化されます。 XCTestはObjective-CとSwiftの両方と完全に互換性があるため、XCTestを使用してテストを作成することはiOS開発者にとって簡単なことです。

KIF（「機能を維持する」の略）は、XCTestテストターゲットに密接に関連し、それを使用するiOS統合テストフレームワークです。 KIFテストは、XCTestCaseまたは任意のサブクラスで直接実行できます。 KIFは、OSが視覚障害を持つ人々に利用可能にするアクセシビリティ属性を活用することにより、iOSアプリケーションの簡単な自動化を可能にします。

UIコンポーネントがObjective-Cでどのように表示されるかを見てみましょう。

 - (void)testClicksOnRadioButtons { [tester tapViewWithAccessibilityLabel:@”Radio1”]; [tester tapViewWithAccessibilityLabel:@”Radio2”]; [tester tapViewWithAccessibilityLabel:@”Radio3”]; [tester enterText:@”Simple Test” intoViewWithAccessibilityLabel:@”editText1”]; [tester tapViewWithAccessibilityLabel:@”Answer”]; }

または、Swiftを使用すると、テストは次のように簡単になります。

 testClicksOnRadioButtons() { let app = XCUIApplication() app.radiobutton[0].tap() app.radiobutton[1].tap() app.radiobutton[2].tap() app.staticTexts[“Simple Test”] app.button[0].tap() }

この高レベルの擬似コードが完全に機能するには、追加のコードが必要であることに注意してください。 XCTestおよび一般的にXcodeテスト機能の使用に関する詳細情報をお探しの場合は、Appleが対応します。

アールグレイ（iOS）

GoogleがEarlGreyという名前の機能的なiOSアプリテストフレームワークをオープンソース化したのは、今年の初めのことです。 Googleが社内で使用しているため、ネイティブiOSアプリ（YouTube、Googleカレンダー、Googleフォト、Google Playミュージックなど）で比較的うまく機能し、深刻な関心を呼んでいます。 EarlGreyの使用を開始するには、Xcode環境がインストールされており、iOS開発の基本的な知識が必要です。

アールグレイとエスプレッソの間には多くの類似点があり（はい、どちらもGoogleによって開発されています）、それらの特性により、両方のフレームワークが機能し、テストを迅速に実行できます。 Espressoと同様に、EarlGreyテストは、UIとの対話を試みる前に、イベント（アニメーション、ネットワーク要求など）を自動的に待機します。 これにより、開発者はスリープや待機コマンドについて心配する必要がなくなるため、テストの作成が容易になります。 さらに、コード自体は、テストステップの手順の説明を提供するため、保守が容易です。

アールグレイには、GREYMatchersクラスから入手できるマッチャーも含まれています。 ドキュメントでは、アクセシビリティパラメータとともにUI要素を使用することを推奨しています。 UI要素を識別するために、開発者はgrey_accessibilityID()またはgrey_accessibilityLabel() ）を使用できます。

 - (void)testBasicSelectionAndAction { [[EarlGrey selectElementWithMatcher::grey_accessibilityID(@"ClickHere")] performAction:grey_tap()]; // Example of long press with EarlGrey matchers - (void)testLongPress { [[EarlGrey selectElementWithMatcher::grey_accessibilityLabel(@"Box")] performAction:grey_longPressWithDuration(0.5f)]; [[EarlGrey selectElementWithMatcher::grey_accessibilityLabel(@"One Long Press")] assertWithMatcher:grey_sufficientlyVisible()]; // Example of multi-select, visible click on items - (void)testCollectionMatchers { id visibleSendButtonMatcher = grey_allOf(grey_accessibilityID(@"Box"), grey_sufficientlyVisible(), nil); [[EarlGrey selectElementWithMatcher:visibleSendButtonMatcher] performAction:grey_tap()]; }

XCTestと同様に、ラジオボタンの実装はそれほど単純ではありません。XCTestのボタンは、クリックとユーザー操作を可能にするためにiOSでサポートされるUIElementとして定義する必要があります。

結論

React Nativeアプリケーションの基本と、さまざまなメソッドやフレームワークを使用してそれらをテストする方法について説明しました。 これは頻繁に発生しますが、機能UIレベルでのモバイルテスト自動化の業界標準は、他のネイティブアプリと同じようにReactNativeアプリでも機能します。 ここで取り上げたテスト自動化フレームワークは、ネイティブモバイルアプリ、ハイブリッドアプリ、モバイルWeb、およびReactNativeアプリで広く使用されています。

要約すると、モバイルアプリケーションが構築されているプログラミング言語を決定することは、テスト可能なテスト自動化フレームワークに影響を与えないため、重要ではありません。 すでに説明したように、今日では多くの強力なテスト自動化フレームワークが利用可能であり、ReactNativeアプリはAPKまたはIPAとしてラップされたときに動作します。

React Nativeアプリのテストに何を使用していますか？ 以下のコメントを参考にしてください。