React-testing-library v13에서 Reactv17이 지원되지 않아 발생한 오류 정보

개요

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에서부터Reactv17의 지원을 받지 않는다(파괴적인 변경).
따라서 일단 오류가 발생하면
원문은 다음과 같다.
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
일본어 번역은 아래와 같다.
특징.
React18 지원 추가(#1031)(ccd8a0d)
수정점
React17 및 이전 지원이 삭제되었습니다.기본적으로 새 createRoot API가 사용됩니다.이것은 일련의 수정을 진행하는 동시에 동시에 동시에 기능을 실행할 수 있도록 합니다.
render(ui, {legacyRoot:true})를 사용하여 이 변경 사항을 종료합니다.단, React18에서는 구식 루트 API를 추천하지 않습니다. 사용할 때 컨트롤러 경고가 발생할 수 있으니 주의하십시오.

해결책

버전 오류이므로 아래와 같이 버전을 조정하십시오.
react
react-dom
react-testing-library(@testing-library/react)
v18
v18
v13
v17
v17
v12
참고로 GiitHub에 기술된 render(ui, { legacyRoot: true } ) 부분을 검증했습니다.
Reactv18, 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})를 사용하여 이 변경 사항을 종료합니다.단, React18에서는 구식 루트 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'

원인은Reactv18의 파괴적 변경

해결 방법은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