update.こんばんは。前回、以下の投稿をさせていただきました。create-react-native-appから本格的な開発に移行するためのTipsその1初投稿にも関わらず多くの閲覧と幾つかの反応を頂けまして、恐縮するばかりです。Nativeのテスト全般についての記事を書こうかと思いました。Nativeといいつつ、View以外の部分はReactとおんなじです。reduxやredux-sagaの知識が前提としてある程度必要になってきます。参考:Redux入門【ダイジェスト版】10分で理解するReduxの基礎redux-sagaで非同期処理と戦う環境・使用したモジュールmacで開発しています。4.9.0create-react-native-appで初期の構築を行っています。create-react-native-appに組み込まれているため、テスティングフレームワークはjestです。使用する段階で詳しく触れますが、enzymeなどのテストユーティリティも使用します。別記事を記載しようと思いますが、firebaseを使用しているため、バックエンドは存在しません。テストの実行方法create-react-native-appで環境開発をした場合、デフォルトでpackage.jsonのscripts下が以下のようになっているハズです。testというコマンドでテストの実行が可能です。jestはルート以下で__tests__ディレクトリ配下にあるファイルはテストファイルとみなします。基本的にreactとreduxのベストプラクティスに従っておけば良いと思っています。一方で「お前が作るアプリはそんな大層な構成が必要なほど巨大なのか??ん???」っていう類の批判もある模様です。的を射た指摘だと個人的には思います。development今回は勉強の意味合いも兼ねているので前者寄りの以下のような構成になっています。├─sagas以降はログインフォームと認証処理部分の一部をテストする体で以下に示す機能の役割と確認したい事(テスト観点)と実装方法を見ていきます。Testing詳しくは上記に記載のある通りですが、コンポネントをレンダリングした状態でスナップショットを保存し、前回保存したスナップショットと比較し、差異があればテスト失敗とします。意図せずViewの構成が変更されてしまった場合に、早くその事を察知できます。react-test-rendererとjest-mockという二つのモジュールをテスト用に使用しています。package.jsonのtransformIgnorePatternsやunmockedModulePathPatternsを設定しないと動かない場合があります。});});テストを実行したファイルと同階層に__snapshot__というフォルダが掘られ、そこに撮影したスナップショットが保管されます。components/__tests__/eventhandler/signIn.jsイベントのテストairbnbが開発したenzymeを使用します。最初に渡したモック関数がボタンクリック(onPress)時に呼び出されているかどうかをテストします。ShallowWrapper.simulateという関数もあるようで、そちらを勧めるReactの記事も多かったのですがonPressには対応していないようでした。(やり方が間違っていただけかも)ちょっとハマりポイントでした。});});containers役割reactの世界(view)とreduxの世界(logic)を繋ぐ確認すべきこと渡したstateが正しく渡されているかということpropsとして渡されたハンドラが意図したアクションを発行していること実装方法ほぼ以下の記事の通りの実装です。テストを良い感じに書くisLoginについては記事書く用に作ったstateです。mapDispatchToProps,)(SignIn);テスト側についてはcomponents同様、enzymeのシャローレンダリングを使用しているほかredux-mock-storeを使用しています。it('signIn()を実行するとSIGN_INのアクションを発行すること。});});sagas(非同期処理)役割Actionを受け取ってサーバー通信などの非同期処理を行う確認すべきことサーバー(今回はfirebase)から受け取った状態を適切にputしているか実装方法signInWithEmailAndPasswordはredux-saga-firebaseを参考に自前で実装した関数です。signIn);}redux-saga-test-planというモジュールを使用しています。ここのテストだけ振る舞い駆動っぽくなってしまっている感が否めないfirebaseInitは自前で実装したfirebaseに設定を読み込ませる関数です。先述の通り、redux-saga-firebaseを参考に自前で実装した関数です。データベースアクセス全般をこの層で管理したかったので、あまりモジュールに頼りたくなかった意図があります。});});カバレッジを見るjestは非常に優秀でカバレッジの確認も簡単に行えます。以下の記事の後半に詳細の記載があります。--coverageというコマンドでカバレッジを見る事ができます。(コンソールに表示&HTMLとして詳細出力)以下は実際に私が作りかけているアプリのカバレッジです。一部削除予定のソースがある段階でこのカバレッジなのでそのあたりをしっかり行えば、本投稿もタイトル詐欺にはならずに済むのではないでしょうかなお、htmlの方は各ファイルの詳細な情報を見る事が可能です。網羅しきれていない処理は以下のように赤く表示されます。これによって「ボタンの試験はしていたけど、入力フォームのテスト忘れてた!」なんて事に気付くことが出来るのです。おわりに試行錯誤しながら、なんとかひとしきりテスト出来る状態にはなりましたが私自身まだまだ勉強不足なため、間違っている箇所等があるかもしれません。ご意見・ご指摘等ありましたらコメントをいただけますと幸いです。upLoginユーザーは見つかりませんでした。