みなさん、最近、JavaScriptエコシステムでのテストに関するいくつかの質問を見ました。いくつかの質問は次のとおりです。

• API呼び出しをテストする方法は？
• axiosをテストする方法は？
• useEffectフックから起動されたAPI呼び出しをテストする方法は？
• React QueryからのAPI呼び出しをテストする方法は？

シナリオ

useEffectフックまたはuseQueryカスタムフックのいずれかを介してAPIリクエストを起動するコンポーネントがあると想像してみましょう。データを受け取ったら、そのデータから名前を分解してレンダリングします。これが可能な実装です

これをテストする一般的な方法は、コンポーネントをレンダリングし、API呼び出しから返された名前が画面にレンダリングされるのを待つことです。React Testing Libraryを使用すると、予想されるテストは次のようになります。

ここで問題となるのは、テストのリクエストが期待されるデータを返すことをどのように確認するかです。

axios-mock-adapterの使用

axios-mock-adapter最初の解決策です。やりたいことを明示的に宣言するためのより読みやすい構文を提供しながら、axiosをモックすることができます。次の例では、MockAdapter instance. Using this instance, we then use theaxios参照を取得し、新しいonGet`メソッドを作成して、予期されたURLに対してGETリクエストを実行したときに、必要なデータが返されるようにします。

axiosを手動でモックする

Jestを使用して、axiosを自分でモックし、外部ライブラリのインストールを回避できます。次のアプローチでは、jest.mockaxiosをモックするために使用し、テスト内でgetメソッドの実装をモックして、期待されるURLの期待されるデータを返します。

このアプローチが気に入らない場合axios.jsは、__mocks__ディレクトリ内にファイルを作成し、そこに次のスニペットを追加できます。

テストを実行すると、Jestは自動的にそのファイルを取得し、axiosをモックします。

MSWの使用

MSWは私がすべてをテストする方法を変えました。上記の他のすべてのアプローチがありますが、モックを維持することは急速にエスカレートする可能性があり、しばらくすると、それらの束になってしまいます。時間を節約し、すべてを一元化するために、私はMSWを使用しています。

このシナリオでは、必要なのは、期待するデータを返すリクエストのハンドラーを作成することだけです。次に、ハンドラーをハンドラーリストに追加するかserver.use、テストを呼び出してハンドラーをオーバーライドします。

MSWについて詳しく知りたい場合は、MSWに関する私のブログ投稿を読むことができます。

まとめ

ご覧のとおり、API呼び出しをテストするときは、使用することを決定できるオプションがたくさんあります。今はMSWを使用することを好みますが、過去には他のすべてのオプションを使用していました。

このブログ投稿がお役に立てば幸いです。今後ともよろしくお願いいたします。またお会いしましょう！

もともとhttps://www.danieljcafonso.comで公開されました。