More than 1 year has passed since last update.

reactとtesting-libraryで単体テスト実行時のみ"Module 'useNavigate() may be used only in the context of a <Router> component."とエラーが出る

Posted at 2023-04-02

概要

"Module '"react-router-dom"' has no exported member 'useHistory'"というエラーがテスト実行時のみ永遠に出て、1日以上苦しんだので同じく苦しんでいる人がいれば救いたいと思います。

今考えると状況整理がちゃんとできていればすぐ解決できたんじゃないかと思います><

急いでいる人のために一旦結論だけ書いちゃいます！

下記のようにしてテストファイルのコンポーネントレンダリング時にコンポーネントでラップしないといけなかった。。。

render(<Router><AddMembers /></Router>);

エラー文でググると、大抵ルートコンポーネントで全部のコンポーネントをRouterでラップするようにしようという記事が大量に出てきた。

いやもうそれはとうにしてるんじゃ！！！

react-router-domがv18系から色々と変更があったようで、それも混乱の原因の一つだった。
関連するところで言うと、

なので、まず本記事を読んでいる方はバージョンとあった書き方をしている公式を絶対に確認すること

ひっっっったすらChat-GPT(GPT4)に聞きまくった。

該当ファイルを丸々コピペ→問題ないと言われる
関連するファイルを全てコピペ→問題ないと言われる
「オワタ。。。あ、そういえばこれテスト時だけエラーなの念の為伝えておこっと(笑)」
ワイ) "Btw I get the error on the console only when running unit test using testing-library. Does it matter??"
GPT4先生) "It's possible that the issue you're experiencing is related to how your tests are set up. When using testing-library for testing components that use React Router, it's important to wrap the component being tested with a component in the test itself."
→「まさにそれや。たわけ」

render(
    <Router>
      <Content setOpen={setOpen} setAlertLabel={setAlertLabel} />
    </Router>
  );

やっぱりGPTさんはおま環の質問でも情報を与え続けることで状況を把握して、かなり精度の高い回答をしてくれるので本当に助かってます。