🔨 Refactor : 테스트 코드 폴더 구조 개선

[jjinheeWorld]

🍀 어떤 기능인가요?

현재 테스트 코드 폴더 구조가 unit 폴더 아래에 훅, 컴포넌트, 페이지 테스트가 혼재되어 역할과 기준이 모호한 상태
테스트 코드의 가독성과 유지보수성을 위해 폴더 구조를 기능 단위로 분리하고 재정비함

✅ 작업 상세 내용

현재 문제점

현재 테스트 폴더 구조는 다음과 같이 구성되어 있습니다.

tests/
  unit/
    auth/useLogout.test.tsx      # 훅 테스트
    dashboard/dashboard.test.tsx   # 컴포넌트 테스트
    goals/goals.test.tsx         # 컴포넌트 테스트

이 구조에서 발생하는 문제는 다음과 같습니다.

• unit이라는 폴더명이 지나치게 포괄적

  • 컴포넌트 테스트도 unit?
  • 훅 테스트도 unit?
  • 페이지 테스트도 unit?

• 테스트 코드의 역할과 종류가 명확하게 구분되지 않음

  • 기능 단위로 테스트 코드를 찾기 어려움
  • 테스트 코드 위치에 대한 기준이 모호함

• 위와 같은 이유로 새로운 팀원이 합류했을 때 테스트 파일을 어디에 작성해야 할지 판단하기 어려움

• 테스트 파일 네이밍 컨벤션이 일관되지 않음

  • 컴포넌트 테스트 파일명이 파스칼 케이스와 카멜 케이스가 혼재
  • 파일명만으로 테스트 대상이 무엇인지 직관적으로 파악하기 어려움
  • 컴포넌트 테스트 파일명은 파스칼 케이스로 통일 필요

개선 목표

• 테스트 코드의 역할에 맞게 폴더 구조를 명확히 분리
• 기능(feature) 단위로 테스트 코드를 체계적으로 관리
• 테스트 코드 확장 시에도 일관된 구조 유지
• 컴포넌트 테스트 파일 네이밍 컨벤션을 파스칼 케이스로 통일

변경 예정 폴더 구조

tests/
  ├─ components/
  │  ├─ common/                          # 공통 컴포넌트 테스트
  │  │
  │  └─ features/                        # 기능별 테스트 (컴포넌트 + 통합)
  │     ├─ dashboard/
  │     ├─ goals/
  │     ├─ navigation/
  │     ├─ notes/
  │     │  ├─ NoteList.test.tsx          # 컴포넌트 테스트
  │     │  └─ NotesPage.test.tsx         # 통합 테스트
  │     └─ todos/
  │
  ├─ hooks/                              # 커스텀 훅 테스트
  │  └─ auth/
  │     └─ useLogout.test.ts
  │
  ├─ utils/                              # 순수 함수 테스트
  │  └─ validation/
  │
  ├─ mocks/                              # 테스트용 mock 모듈
  │
  └─ test-utils.tsx                      # 테스트 공통 유틸리티

파일 이동 및 네이밍 변경

- list → /components/common

- progress → /components/common
  - progressView.test.tsx → Progress.test.tsx

- dashboard → /components/features
  - dashboard.test.tsx → DashboardPage.test.tsx

- goals → /components/features
  - goals.test.tsx → GoalsPage.test.tsx

- todos → /components/features
  - todos.test.tsx → TodosPage.test.tsx
  - todoFormFile.test.tsx → AttachmentSection.test.tsx
  - todoFormModal.test.tsx → TodoFormContent.test.tsx

- navigation → /components/features
  - navigationLogout.test.tsx → NavigationLogout.test.tsx

📌 ETC

추가적으로 참고해야 할 사항이 있으면 작성해주세요.