問題タブ [reach-router]

Jest と Enzyme を使用して単体テストを作成しています。404 ページに、ユーザーを Web サイトのホームページにリダイレクトするボタンがあります。URL に関係なく、このボタンがユーザーをホームページにリダイレクトしていることを確認するテストを作成したいと考えています。つまり、ボタンのクリックによってユーザーがホームページに移動し、href に依存しない場合は、テストに合格する必要があります。

これまでのところ、ユーザーを再ルーティングするボタンをクリックするコードがあります。

ボタンをクリックすると、ルーティングされるはずな<HomePage />ので、追加してみました：

<HomePage />ボタンをクリックした結果と比較する必要があるようですが、まだ有効な解決策を見つけることができませんでした。

@reach/routerReactで使用しています。必要な小道具を使用してルート コンポーネントを作成します。アプリがマウントされたときに小道具タイプの警告が表示されますが、ルートはアクティブではありません。

この簡単な例は@reach/router docsから改作されています。

Homeコードは、コンポーネントではなくコンポーネントをレンダリングしUserます。それにもかかわらず、コンソールに次のエラーが表示されます。

コンポーネントがレンダリングされない限り、このエラーが発生することはないと思います。

これを防ぐ方法はありますか？

を使用して動的セグメントからの小道具が必要であることを指定したいのですが、prop-typesこの小道具の警告を表示したくありません。

各子要素にいくつかの小道具を選択的に渡し、それぞれのスタイルを設定したいと考えています。

単純に反復して小道具を各子に渡すことはできないことに気付きました

render 関数の使用は、 内では機能しません<router>。ネストされたルーティングが壊れ、子の数が不定の場合、子ごとに小道具を手動で入力する必要がありません。

次に、css-in-js ソリューション (感情) を使用して、各直接の子孫を選択してスタイルを設定しようとしまし<Burger/>たが、これもこの場合はうまくいかないようです。

最後に、children.map を React.cloneElement と組み合わせて使用​​する解決策は満足のいくものではないことがわかりました。各子が大きすぎるか入れ子になっていると、パフォーマンスに影響するはずだからです。

私が望むものを実装する別の方法はありますか? ありがとうございました。