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

概要

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 は非推奨であり、使用するとコンソールの警告が発生することに注意してください。

解決方法

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

ちなみにですが、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）を一致させること

参考