React Native自動化テスト

ソフトウェア開発を行うと、多くのテスト、ローカルテスト、Junitテスト、使用例テストなどに関わるに違いありません.今日はRNのテストについてお話しします.
React Nativeの公式コード倉庫にはいくつかのテストコードがあります.貢献コードの後、テストに戻って、他の問題が発生したかどうかを検出することができます.これらのテストは、Travis持続的な統合システムによって実行され、コミットされたコードに対して自動的にテスト結果が与えられます.
もちろん、私たちのテストには完全なカバー率(特に複雑なユーザーのインタラクション)はありません.そのため、多くの変更も綿密な手動審査が必要です.テストのオーバーライド率を向上させ、より多くのテストコードやテスト例を提供することを期待しています.

Jestを使用してテスト

Jestは、コマンドラインでnodeを介して実行される純粋なjsテストツールです.テストコードは__tests__ディレクトリの下に配置されます.いくつかの機能はまだシミュレーションを完了していない(jestではいくつかのインタフェースをシミュレートする必要がある)ため、テストに組み込まれていません.テストが不合格になり、テスト速度が向上することを避けていますが、これらの機能のシミュレーションを徐々に補完するために最善を尽くしています.react-nativeソースコードのルートディレクトリで、既存のjestテストコードを実行するには、次のコマンドを使用します.

npm test

貢献コードの時にも自分のテストコードを追加することをお勧めします.この簡単な例getImageSource-test.jsを参照してください.
注意:自分のテストコードを実行するには、まずjestの公式サイトに行って指導ドキュメントを読み、package.jsonにjestオブジェクトを追加します.この中には、予備テスト環境のスクリプトが含まれています.次の例を示します.

...
"scripts": {
  ...
  "test": "jest"
},
...
"jest": {
  "scriptPreprocessor": "node_modules/react-native/jestSupport/preprocessor.js",
  "setupEnvScriptFile": "node_modules/react-native/jestSupport/env.js",
  "testPathIgnorePatterns": [
    "/node_modules/",
    "packager/react-packager/src/Activity/"
  ],
  "testFileExtensions": [
    "js"
  ],
  "unmockedModulePathPatterns": [
    "promise",
    "source-map"
  ]
},
...

注意:Nodeをインストール、更新、またはリンクする必要がある場合があります.jsや他のツールは、テストが正常に動作しない可能性があります.ここをクリックして最新のテストプロファイルを表示します.travis.yml.

ユニットテスト(Android)

React NativeはBuckコンパイルツールを使用してテストを実行します.ユニットテストセクションは、シミュレータを必要とせずにローカルで直接実行されます.次のコマンドを実行して、テストを実行します.

$ cd react-native
$ ./scripts/run-android-local-unit-tests.sh

統合テスト(Android)

React NativeはBuckコンパイルツールを使用してテストを実行します.統合テストは、モジュール、コンポーネント、およびreact Nativeのカーネル部分(bridgeなど)がエンドツーエンドテストで正常に動作していることを確認するために、シミュレータ/ホスト上で実行する必要があります.
Android NDKが正しくインストールされ、構成されていることを確認します.具体的な構成は、このドキュメントを参照して、次のコマンドを実行してテストを実行します.

$ cd react-native
$ npm install
$ ./scripts/run-android-local-integration-tests.sh

統合テスト(iOS)

React Nativeは、オリジナルとJSエンドにまたがるコンポーネントの統合テストを簡略化するためのツールを提供します.このツールの2つの主要な部分はRCTTestRunnerとRCTTestModuleです.RCTTestRunnerはReactNative環境を予め設定し、XCTestCaseの形でXcodeでテストを直接実行することができる(最も簡単な方法はrunTest:moduleを使用することである).RCTTestModuleはNativeModules.TestModuleオブジェクトでJS環境に導出される.テストコードはJSで作成する必要があり、テストが完了した後にTestModule.markTestCompleted()メソッドを呼び出す必要があります.そうしないと、テストプロセスがタイムアウトし、失敗します.失敗の表現は一般的にJS異常を投げ出す.エラー条件のテストも可能であり、runTest:module:initialProps:expectErrorRegex:またはrunTest:module:initialProps:expectErrorBlock:の方法を使用して、提供された条件に従って投げ出されたエラーが一致しているかどうかを検証します.IntegrationTestHarnessTest.js、IntegrationTests.m、IntegrationTestsAppを参照してください.jsは具体的にどのように統合テストをするかを見てみましょう.
XcodeでIntegrationTestとUIExplorerの2つの公式サンプルアプリケーションを実行する場合は、cmd + Uキーを押してローカルで統合テストを直接実行できます.

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

スナップショットテストは、統合テストの一般的なタイプです.このようなテストは、まずコンポーネントをレンダリングし、TestModule.verifySnapshot()を使用してスクリーンショットと参照効果図を比較し、FBSnapshotTestCaseというライブラリを利用することを原理としています.参考効果図は、RCTTestRunnerにrecordMode = YESを設定し、テスト実行時に録画したものである.スクリーンショットは、32ビットと64ビットの色の深さ、およびオペレーティングシステムのバージョンによってわずかな違いがある可能性がありますので、指定した構成環境でテストを強制することをお勧めします.さらに,すべてのネットワークデータと他の潜在的な依存項目を事前にシミュレーションすべきであることを強く提案した.SimpleSnapshotTestという例を参照してください.
PR(Pull Request、すなわち貢献コードをコミットし、政府関係者に倉庫にマージするように要求する)をコミットすると、既存のスナップショットテストに新しいテスト例を追加するなど、スナップショットテストに影響を与える場合は、まず参考効果図を再録画する必要があります.UIExplorer/UIExplorerSnapshotTests.mに_runner.recordMode = YES;を設定し、以前に失敗したテストコードを再実行し、その後、この設定を変更し、最後にPRを提出/更新し、Travisの自動テストが合格できるかどうかを確認します.