Zenn
⚛️

react-testing-library v13 から React v17 のサポートされないことに起因するエラーについて

2022/05/07に公開
React
tech

概要

react-testing-library（@testing-library/react）を使用しようとしたら以下のエラーが発生しました。
react は v17、react-testing-library は v13 を使用していました。

Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js'

原因について調査し、日本語の記事が見つからなかったのでメモ程度にまとめます。

原因

GitHub の Releases にもある通り、react-testing-library は v13 から、React v17 にサポートされなくなりました（破壊的変更）。
そのため、エラーが発生する次第です。

原文は以下です。

Features
Add support for React 18 (#1031) (ccd8a0d)
BREAKING CHANGES
Drop support for React 17 and earlier. We'll use the new createRoot API by default which comes with a set of changes while also enabling support for concurrent features.
To opt-out of this change you can use render(ui, { legacyRoot: true } ). But be aware that the legacy root API is deprecated in React 18 and its usage will trigger console warnings.

https://github.com/testing-library/react-testing-library/releases/tag/v13.0.0 より引用

日本語訳すると以下です。

特徴
React 18 のサポート追加(#1031) (ccd8a0d)
変更点
React 17 およびそれ以前のサポートを削除しました。新しい createRoot API をデフォルトで使用します。これは一連の変更を伴うと同時に、同時実行機能のサポートを可能にします。
この変更をオプトアウトするには、render(ui, { legacyRoot: true } ) を使用します。ただし、React 18 ではレガシー ルート API は非推奨であり、使用するとコンソールの警告が発生することに注意してください。

解決方法

バージョンに起因するエラーですので、以下のようにバージョンを合わせましょう。

react react-dom react-testing-library（@testing-library/react）
v18 v18 v13
v17 v17 v12

ちなみにですが、GitHub に記述されているrender(ui, { legacyRoot: true } )の部分を検証しました。
React v18、react-testing-library v13 にしました。

To opt-out of this change you can use render(ui, { legacyRoot: true } ). But be aware that the legacy root API is deprecated in React 18 and its usage will trigger console warnings.
この変更をオプトアウトするには、render(ui, { legacyRoot: true } ) を使用します。ただし、React 18 ではレガシー ルート API は非推奨であり、使用するとコンソールの警告が発生することに注意してください。

結果、次の警告が発生することを確認しました。
警告通り、サポートされなくなるので、render(ui, {legacyRoot: true})をつけないようにリファクタリングしましょう。

  ● Console

    console.error
      Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:29572:5)
      at Object.render (node_modules/@testing-library/react/dist/pure.js:139:25)
      at node_modules/@testing-library/react/dist/pure.js:163:12
      at node_modules/@testing-library/react/dist/act-compat.js:58:24
      at act (node_modules/react/cjs/react.development.js:2510:16)
      at node_modules/@testing-library/react/dist/act-compat.js:57:25

まとめ

  • react-testing-library（@testing-library/react）と React のバージョンの不一致に起因するエラー（以下）を調査した
Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js'
  • React v18 に伴う破壊的変更が原因だった
  • 解決方法は、React と react-testing-library（@testing-library/react）を一致させること

参考

https://github.com/testing-library/react-testing-library/releases/tag/v13.0.0

https://stackoverflow.com/questions/71713405/cannot-find-module-react-dom-client-from-node-modules-testing-library-react

Discussion