vitest "React is not defined" 오류 해결

[SoJuSo]

📝작업 내용

• 문제점

  27 의 테스트 코드를 작성하던 중 vitest에서 "React is not defined" 에러로 제대로 테스트가 이루어지지 않는 현상이 있었습니다.

• 원인 ReferenceError: React is not defined 오류는 컴포넌트 파일에서 React가 자동으로 임포트되지 않아 발생한 문제입니다. Nextjs에서 보통 React를 임포트해줄 필요가 없지만 테스트 코드에서는 예외라고 합니다.
• 해결책 babel을 사용하거나 새로운 플러그인을 설치하여 vitest에서 자체적으로 임포트 하는 방식이 존재했고 조금 더 간단한 vitest에서 플러그인을 활용해 해결하는 방식으로 구현했습니다.

📷스크린샷(필요 시)

• 문제 상황

• 해결 시

✨PR Point

설치 과정에서 검증했어야 하는데...놓쳤네요ㅠㅠ 조금 더 꼼꼼히 보겠습니다!

[SoJuSo]

확인했습니다! 덕분에 새로운 것을 알게 되었네요. Next.js 프로젝트에서 Vitest를 사용하려면 @vitejs/plugin-react 의존성 설치가 반드시 필요하겠네요.

일반 jsx(tsx)파일은 next가 자동으로 처리해주는데...테스트 파일만 예외라서...ㅠㅠ babel 설정또한 가능하다는 사실도 알려드립니다~!