MockProviderはReact Apolloクライアントのリクエストや結果をモックするのに推奨されている方法です。サンプルコードを見る限りではいい感じに動くように見えますが、実際に使うとなると、結構ハマりどころがあります。MockProviderの使い方のヒントについてはすでにmediumなどに素晴らしい記事がありますが、それでもMockProvierの予期せぬ動作に数時間を溶かしてしまいました。
そんなわけでこの記事では、レスポンスを適切にモックするまでに得られた知見をシェアします。
なおテスト環境は以下です:
@apollo/client: 3.2.0 react-native:0.62.2 jest: 24.9.0 react-native-testing-library: 2.1.1
それでは行ってみましょう!
- 1. useQueryはhooks packageから直接インポートする
- 2. Fragmentを使っているときは__typenameも定義する
- 3. コンポーネントの描画を必ず走らせる
- 4. InMemoryCacheを挿入してエラーメッセージをわかりやすくする
- 5. "No more mocked responses" error => 引数をチェックする
- 6. Mutationや複数のQueryをテストする場合はキャッシュを無効化する
- まとめ