프론트엔드 프로젝트에 테스트를 적용하면서 가장 어렵게 느껴진 부분이 어떤 순서로, 무엇을 테스트하면 좋을지에 관한 것이었습니다. 이에 대해 Kent C. Dodds와 Tkdodo님의 블로그를 참고하여 이에 대한 생각을 정리해 보았습니다. 🤔 어떤 순서로, 무엇을 테스트할까? 테스트를 작성하는 목적 가운데 하나는 사용자, 즉 애플리케이션 사용자와 개발자가 애플리케이션을 사용할 때 애플리케이션이 제대로 동작할 것이라는 자신감을 주는 것입니다. 따라서 코드 커버리지 자체보다는 유저가 사용하는 유즈 케이스 모두를 코드가 지원하는지를 생각해보면 좋습니다. 무엇을 테스트하면 좋을까? React에서는 어떠한 유즈 케이스가 있을까요? 크게 아래의 3가지 경우를 생각해 볼 수 있습니다. 라이프사이클 메서드: rerend..
✅ 들어가기 전 테스트를 왜 작성하는가? 에 대해 다시 생각해 보기 요구 사항 분석과 철저한 이해 → 코드 설계 사용자 입장에서 코드를 작성 → 내부 구현보다는 인터페이스 위주의 코드 작성 TDD의 본질은 빠른 피드백 TDD는 아니지만, 각 컴포넌트가 수행하기를 기대했던 동작, 즉 요구 사항을 다시 생각해 보고, 테스트를 작성하자. 🤔 고민 폴더 구조 루트에 mocks, tests 폴더를 두고 내부에 프로젝트 구조 폴더를 나누기 ✅ 각 폴더 내부에 mocks, tests 폴더 → 관련 있는 코드 가까이 두는 것이 유지보수 측면에 좋을 것으로 판단 깃허브에서 React, React Query, MSW, RTL, Vitest 등에서 테스트 폴더 구조를 살펴봤을 때 각 관련된 폴더 내부에 tests 폴더를 따..
들어가며 [1편]에서 테스트 환경 구축 시 사용되는 패키지의 설정 파일을 살펴보았습니다. [2편]에서는 먼저 Vite, TypeScript, React Testing Library, Jest를 사용해 테스트 환경을 구축하고, 패키지 간 의존성과 설정 파일 문제로 발생했던 에러와 해결책을 공유하고자 합니다. React 테스트 환경 구축하기(Vite, TS, Jest, React Testing Library) Vite 프로젝트 설치 npm create vite@latest test-config -- --template react-ts cd test-config npm install code . // vscode 열기 테스트 관련 패키지 설치 // 2-1 Jest 관련 패키지 설치 npm i -D jest j..
들어가며 기업 과제에서 필수 요구 사항이었던 테스트에 어려움을 겪고, 글또에서 진행하는 TDD 스터디에 참여하면서 프로젝트 환경에 따른 Jest 설정에 대해 공부하였습니다. 이 과정에서 그동안 대략적으로만 알고 사용했던 Vite, TypeSciprt, ESlint의 환경 설정과 새롭게 알게 된 Jest, React Testing Library(이하 RTL) 관련 설정을 전체적으로 살펴 보고 이해하는 시간을 가졌습니다. 이를 통해 ESM과 CJS의 차이를 이해하고, 설치하는 패키지 간 의존성과 버전 호환의 중요성을 깨닫게 되었습니다. 해당 포스팅에서는 [1편]에서 먼저 각 패키지를 설정할 때 알아두면 유용한 점들과 주의할 점들을 살펴 보고, [2편]에서 패키지 간 의존성과 패키지 버전 및 설정 파일 문제로..
