テストの実行と作成方法

テストの実行

このセクションは、コントリビューターとしてReact Nativeへの変更をテストする方法についてです。まだの場合は、ネイティブコードを含むプロジェクトのビルドのための開発環境のセットアップ手順を完了してください。

JavaScriptテスト

JavaScriptのテストスイートを実行する最も簡単な方法は、React Nativeチェックアウトのルートで次のコマンドを使用することです。

bash
yarn test

これにより、Jestを使用してテストが実行されます。

また、コードがFlowおよびリントテストに合格することも確認する必要があります。

bash
yarn flow
yarn lint

iOSテスト

packages/rn-testerディレクトリにあるREADME.mdの指示に従ってください。

その後、React Nativeチェックアウトのルートに戻り、yarnを実行します。これにより、JavaScriptの依存関係がセットアップされます。

この時点で、React Nativeチェックアウトのルートから次のスクリプトを呼び出すことでiOSテストを実行できます。

bash
./scripts/objc-test.sh test

Xcodeを使用してiOSテストを実行することもできます。RNTester/RNTesterPods.xcworkspaceを開き、Command + Uを押すか、メニューバーからProduct、次にTestを選択して、ローカルでテストを実行します。

Xcodeでは、テストナビゲーターを通じて個別のテストを実行することもできます。Command + 6ショートカットも使用できます。

注記

objc-test.shは、テスト環境がすべてのテストを実行できるように設定されていることを保証します。また、不安定または壊れていることが知られているテストを無効にします。Xcodeを使用してテストを実行する際には、この点に留意してください。予期しない失敗が発生した場合は、まずobjc-test.shで無効にされていないか確認してください。

iOS Podfile/Rubyテスト

Podfileの設定を変更している場合は、これらを検証できるRubyテストがあります。

Rubyテストを実行するには

bash
cd scripts
sh run_ruby_tests.sh

Androidテスト

Androidのユニットテストはエミュレーターでは実行されませんが、ローカルマシンのJVM上で実行されます。

Androidのユニットテストを実行するには、React Nativeチェックアウトのルートから次のスクリプトを呼び出します。

bash
./gradlew test

テストの作成

React Nativeでバグを修正したり、新しい機能を追加したりする際には、それをカバーするテストを追加することをお勧めします。行っている変更に応じて、適切なテストの種類が異なります。

JavaScriptテスト

JavaScriptテストは、テスト対象のファイルの隣にある__test__ディレクトリ内にあります。基本的な例については、TouchableHighlight-test.jsを参照してください。詳細については、JestのReact Nativeアプリのテストチュートリアルを参考にしてください。

iOSインテグレーションテスト

React Nativeは、ブリッジを介して通信する必要があるネイティブコンポーネントとJSコンポーネントの両方を必要とする統合コンポーネントのテストを容易にする機能を提供します。

主な2つのコンポーネントはRCTTestRunnerとRCTTestModuleです。RCTTestRunnerはReact Native環境をセットアップし、XcodeでXCTestCaseとしてテストを実行する機能を提供します（最も簡単なメソッドはrunTest:moduleです）。RCTTestModuleはJavaScriptにNativeModules.TestModuleとしてエクスポートされます。

テスト自体はJSで書かれており、完了したらTestModule.markTestCompleted()を呼び出す必要があります。そうしないと、テストはタイムアウトして失敗します。

テストの失敗は、主にJS例外をスローすることで示されます。runTest:module:initialProps:expectErrorRegex:またはrunTest:module:initialProps:expectErrorBlock:を使用してエラー条件をテストすることも可能です。これらはエラーがスローされることを期待し、エラーが提供された基準と一致することを検証します。

使用例とインテグレーションポイントについては、以下を参照してください。

iOSスナップショットテスト

インテグレーションテストの一般的なタイプはスナップショットテストです。これらのテストはコンポーネントをレンダリングし、TestModule.verifySnapshot()を使用して画面のスナップショットを参照画像と比較検証します。内部的にはFBSnapshotTestCaseライブラリが使用されています。参照画像は、RCTTestRunnerでrecordMode = YESに設定してからテストを実行することで記録されます。

スナップショットは32ビットと64ビット、およびさまざまなOSバージョンでわずかに異なるため、テストが正しい設定で実行されるように強制することをお勧めします。

また、すべてのネットワークデータをモックアウトし、その他の潜在的に問題のある依存関係も同様に扱うことを強くお勧めします。基本的な例については、SimpleSnapshotTestを参照してください。

プルリクエストでスナップショットテストに影響を与える変更（スナップショットされる例に新しいケースを追加するなど）を行った場合は、スナップショット参照画像を再記録する必要があります。

これを行うには、RNTester/RNTesterSnapshotTests.mでrecordModeフラグを_runner.recordMode = YES;に変更し、失敗したテストを再実行してから、recordModeをNOに戻してプルリクエストを送信/更新し、CircleCIビルドがパスするかどうかを確認します。

Androidユニットテスト

Java/Kotlinコードだけでテストできるコードを扱っている場合は、Androidユニットテストを追加することをお勧めします。Androidユニットテストはpackages/react-native/ReactAndroid/src/test/にあります。

良いユニットテストがどのようなものかを知るために、これらを閲覧することをお勧めします。

継続的テスト

オープンソースのテストを自動的に実行するために、CircleCIを使用しています。CircleCIは、コードの変更がリグレッションを引き起こすかどうかをメンテナーが理解するのを助ける方法として、プルリクエストにコミットが追加されるたびにこれらのテストを実行します。テストはまた、mainおよび*-stableブランチの健全性を追跡するために、これらのブランチへのコミットでも実行されます。

Metaの内部テストインフラストラクチャ内で実行される別のテストセットがあります。これらのテストの一部は、React Nativeの内部コンシューマーによって定義されたインテグレーションテストです（例：Facebookアプリ内のReact Nativeサーフェスのユニットテスト）。

これらのテストは、Facebookのソース管理でホストされているReact Nativeのコピーへのすべてのコミットで実行されます。また、プルリクエストがFacebookのソース管理にインポートされたときにも実行されます。

これらのテストのいずれかが失敗した場合、Metaの誰かに見てもらう必要があります。プルリクエストはMetaの従業員のみがインポートできるため、プルリクエストをインポートした人が詳細を仲介できるはずです。

注記

CIテストをローカルで実行する：ほとんどのオープンソース協力者は、これらのテストの結果を見るためにCircleCIに依存しています。CircleCIと同じ設定を使用してローカルで変更を検証したい場合は、CircleCIがコマンドラインインターフェースを提供しており、ジョブをローカルで実行する機能があります。

よくある質問 (F.A.Q.)

CIテストで使用されるXcodeのバージョンをアップグレードするにはどうすればよいですか？

新しいバージョンのXcodeにアップグレードする際は、まずそれがCircleCIでサポートされていることを確認してください。

また、テスト環境の設定を更新して、テストがCircleCIマシンにインストールされているiOSシミュレーターで実行されるようにする必要があります。

これもCircleCIのXcodeバージョンリファレンスで、目的のバージョンをクリックし、Runtimesの下を見ることで確認できます。

その後、これら2つのファイルを編集できます

.circleci/config.yml

macos:の下にあるxcode:の行を編集します（_XCODE_VERSIONを検索してください）。
scripts/.tests.env

IOS_TARGET_OS環境変数を目的のiOSランタイムに合わせて編集します。

この変更をGitHubにマージする予定がある場合は、Metaの従業員に通知してください。彼らがあなたのプルリクエストをインポートする際に、react_native_oss.py内のSandcastle RN OSS iOSテストで使用される_XCODE_VERSIONの値を更新する必要があります。