[Jest] A React Element from an older version of React was rendered.

turborepo를 활용해 만든 next.js 프로젝트에서 blog 서비스에 대한 jest 테스트 실행 후 위와 같은 에러를 맞이했습니다.

Page 컴포넌트 내에는 테스트용 Div 요소와 다른 패키지에서 가져온 Button 컴포넌트를 포함하고 있습니다.

 
에러 메시지를 토대로 예상했을 때, 서로 다른 패키지에서 작성된 컴포넌트를 하나의 패키지 내에서 렌더링 하려 했고, 각각의 패키지 내에 설치된 react의 버전이 다를 것이라 생각해 확인해 봤습니다.
 
apps/blog/package.json

    "react": "19.0.0-rc-f994737d14-20240522",

 

 
packages/ui/package.json

    "react": "^18.2.0",

 
페이지 컴포넌트가 존재하는 패키지와 Button 컴포넌트가 존재하는 패키지에서 설치된 리액트 버전이 각각 다름을 확인했습니다. ui 패키지 내의 react 버전을 올린 후 다시 테스트해 보기로 했습니다.
 

테스트가 잘 동작하는 것을 확인할 수 있었습니다.
 
여러 개의 패키지를 활용하는 마이크로 서비스에서는 각각의 패키지에서 라이브러리 버전 관리도 중요함을 알게 됐습니다.