Jest でテストする場合、このヘッダーはデータ ルーターで useLoaderData を使用する場合にのみ表示されます。

Question

React Router v6.14.2 を使用して、ブラウザーのルーティングを設定するすべての手順を完了しました

index.jsxx

リーリー

React コンポーネントでデータローダーを使用する場合、コードは次のとおりです

profileList.jsx

リーリー

この方法は、アプリケーションをローカルで実行しており、ユーザーがコンソールやその他の場所で問題なく読み込んでいる場合には完全に機能します。

ただし、jest テストを実行しようとすると、次のエラー メッセージが表示されます。 useLoaderData はデータ ルーターで使用する必要があります 次のコード行をポイントします const users = useLoaderData();

現時点では、テストは非常に簡単ですが、それでもテストが失敗します。

profile.test.js

リーリー

React Router のドキュメントを見て、その手順に正確に従ってみました。 Stack Overflow で検索しましたが、私の質問に正確に一致するものは見つかりませんでした。

Answer 1

単体テストであっても、データ API にアクセスするコンポーネントはデータ ルーター内でレンダリングされる必要があります。 Node は DOM 環境ではないため、単体テストでは MemoryRouter (例: createMemoryRouter) を使用することをお勧めします。

＃＃＃例：＃＃＃ リーリー