[에러 해결] Nextjs 비동기 서버 컴포넌트 테스트시 에러( Objects are not valid as a React child (found: [object Promise]))

문제 상황

비동기 서버 컴포넌트를 render하고 expect하려고 하니 다음과 같은 에러가 난다. 컴포넌트 내부에서 외부 모듈을 사용한 비동기 요청이 있어서 그런가 해당 모듈를 mocking하고 요청을 waitFor하게 했지만 소용이 없었다.

Uncaught [Error: Objects are not valid as a React child (found: [object Promise])

알고보니 비동기 요청을 기다리지 않고 컴포넌트를 렌더링해서 나는 문제가 아니라 React에서 문자열 또는 JSX와 같은 요소를 렌더링해야 하는데, Promise 객체를 반환하는 함수를 호출하고 그 결과를 렌더링하려고 하려고 해서 발생하는 것이었다.

즉, 그냥 render(비동기 서버 컴포넌트) 해서 생기는 문제 였다.

해결 방법

render(await 비동기서버컴포넌트([Optional] params 전달)

위와 같이 비동기 함수를 실행하고 이를 await 시켜줘야 리액트 요소가 정상적으로 렌더링 된다.

참고 자료

• https://stackoverflow.com/questions/75729282/testing-an-async-server-component-with-jest-in-next-13
• https://velog.io/@charbs0701/react-Objects-are-not-valid-as-a-React-child-found-object-Promise.-If-you-meant-to-render-a-collection-of-children-use-an-array-instead