Feature/fe-018: 단위 테스트 환경 구성

[sxungchxn]

#8 참고

체크 리스트

• 적절한 제목으로 수정했나요?
• 관련된 이슈와 연결 시켰나요?
• Target Branch를 올바르게 설정했나요?
• Label을 알맞게 설정했나요?

작업 내역

• vitest, react-testing-library 단위테스트 라이브러리 실행 환경 구성

  • vitest, react-testing-library 환경 설정
  • 테스트 코드 관련 eslint 설정
  • 테스트 환경 시 사용되는 provider 및 함수 구성

• API 모킹 도구 실행환경 구성(json-server)

• PR 시 단위테스트를 확인하는 action 구성

• 기타 불필요한 의존성 제거(jest, storybook 등)

• 예시 테스트 코드들 작성

문제 상황과 해결

• msw를 통해 개발시 모킹된 API를 이용해 개발하고자 했으나 next 13 app 디렉토리 에서는 MSW가 지원되지 않고 있는 이슈가 존재

  • 정확히는 msw로 테스트 코드 환경상에서의 API 모킹은 가능하지만 브라우저 환경 및 서버사이드 환경에서 사용해야하는 API 모킹이 안되는 상황
  • 백엔드 API가 완성될때까지 json-server를 활용하는 방법은 세팅 완료 (yarn server:dev)

• 서버 컴포넌트는 반환값이 Promise<JSXElement> 여서 사용시 에디터 상에서 TS Error 발생

  • 타입스크립트 5.1 부터는 해당 타입을 지원할 예정이라 향후 타입스크립트 버전 업데이트가 필요할 것으로 예상(5/30에 릴리즈 예정)

비고

리액트 테스트 관련 자료 모음집

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
0.0% Duplication

[jieunpark247]

👍🏼

[naro-Kim]

👍 자란다 자란다