【React】useNavigateでのページ遷移がJestでうまくテストできない2

前回の記事で紹介した修正方法を適用しても、特定のケースでページ遷移のテストがうまくいかない問題に直面しました。

原因

調査の結果、以下の問題が原因であることが判明しました。

ライブラリの混在
テストコードと実際のページコードで、react-router と react-router-dom が混在して使用されていました。これにより、Jest でモックしたuseNavigateと実際にページで使用しているuseNavigateが異なっていたためモックが意図通りできていませんでした。

修正方法

ライブラリの統一

react-router と react-router-dom のどちらかに統一する必要があります。通常、react-router-dom を使用するのが一般的です。以下のようにインポートを修正します。

// 修正前
import { useNavigate } from "react-router";

// 修正後
import { useNavigate } from "react-router-dom";

まとめ

importは基本的に VSCode で自動的に追加していたためどのライブラリから取得しているかを意識していませんでした。そのためこのようなバグが発生していました。

今後は気を付けてimportしていきたいです。

この記事が皆様のコーディングライフの助けになれば幸いです。

参考