Skip to content

Conversation

@leeleeleeleejun
Copy link
Member

@leeleeleeleejun leeleeleeleejun commented Aug 6, 2025

#️⃣연관된 이슈

📝작업 내용

  • Vitest 설정 파일 및 테스트 환경(setup) 추가
  • GitHub Actions용 vitest 테스트 워크플로우 추가

스크린샷 (선택)

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

Summary by CodeRabbit

  • New Features

    • 웹 앱에 Vitest 기반의 테스트 환경이 추가되었습니다.
    • sum 유틸리티 함수와 이에 대한 테스트가 도입되었습니다.
  • Chores

    • Vitest 및 Testing Library 관련 의존성과 테스트 스크립트가 추가되었습니다.
    • GitHub Actions 워크플로우를 통해 테스트 자동화가 적용되었습니다.
    • Turbo 및 TypeScript 설정이 테스트 환경에 맞게 개선되었습니다.

@leeleeleeleejun leeleeleeleejun self-assigned this Aug 6, 2025
@leeleeleeleejun leeleeleeleejun linked an issue Aug 6, 2025 that may be closed by this pull request
1 task
@leeleeleeleejun leeleeleeleejun added the ⚙️ Chore 환경 셋팅 label Aug 6, 2025
@coderabbitai
Copy link

coderabbitai bot commented Aug 6, 2025

Walkthrough

이 변경 사항은 Vitest 기반 테스트 환경을 프로젝트에 도입합니다. 웹 앱의 유틸리티 함수에 대한 샘플 테스트와 함께, Vitest 및 Testing Library 관련 의존성, 테스트 스크립트, tsconfig 및 터보 레포 설정이 추가되었습니다. 또한, GitHub Actions 워크플로와 테스트 환경 설정 파일도 포함되어 있습니다.

Changes

Cohort / File(s) Change Summary
Vitest 테스트 환경 설정
apps/web/vitest.config.ts, apps/web/vitest.setup.ts, apps/web/tsconfig.json
Vitest 설정 파일, 테스트 환경 설정, Vitest 타입 및 경로 별칭 추가 등 테스트 환경을 구성하는 파일들이 추가 및 수정되었습니다.
테스트 및 예시 유틸리티 함수
apps/web/app/_utils/sum/sum.ts, apps/web/app/_utils/sum/sum.spec.ts
간단한 sum 유틸리티 함수와 해당 함수에 대한 단일 테스트 케이스가 추가되었습니다.
패키지 관리 및 스크립트
apps/web/package.json, package.json
Vitest, Testing Library 관련 devDependencies와 테스트 실행 스크립트가 추가되었습니다. 루트 및 웹 앱의 package.json 모두에 반영되었습니다.
터보 레포 테스트 태스크
turbo.json
test, test:watch 태스크가 새로 추가되어 터보 레포에서 테스트 실행 및 워치가 가능하도록 설정되었습니다.
GitHub Actions 워크플로
.github/workflows/vitest.yml
Vitest 테스트를 pull request에서 자동 실행하는 GitHub Actions 워크플로가 추가되었습니다.

Sequence Diagram(s)

sequenceDiagram
  participant GitHub PR
  participant Actions Runner
  participant Node.js Env
  participant pnpm
  participant Vitest

  GitHub PR->>Actions Runner: PR에서 *.spec.ts 변경 감지
  Actions Runner->>Node.js Env: Ubuntu 환경 준비
  Actions Runner->>pnpm: 의존성 설치 (pnpm install)
  Actions Runner->>Vitest: pnpm test 실행
  Vitest-->>Actions Runner: 테스트 결과 반환
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰
토끼는 깡충, 테스트를 뛰네,
sum 함수도 척척, 결과는 셋!
Vitest와 친구들, 모두 모여
코드의 건강을 지키는 밤.
CI도 워크플로도 척척 준비,
토끼는 오늘도 안심하고 뜁니다!
🌱✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch chore/#5

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@leeleeleeleejun leeleeleeleejun marked this pull request as ready for review August 6, 2025 04:51
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
apps/web/app/_utils/sum/sum.spec.ts (1)

1-6: Vitest 테스트가 올바르게 구성되었습니다.

기본적인 테스트 케이스로 Vitest 설정을 검증하기에 적합합니다. 추후 실제 프로덕션 코드를 위해 엣지 케이스나 에러 케이스를 포함한 더 포괄적인 테스트 예제를 고려해보세요.

.github/workflows/vitest.yml (1)

1-23: GitHub Actions 워크플로우가 적절히 구성되었습니다.

테스트 파일 변경 시에만 트리거되도록 설정된 점과 --frozen-lockfile 사용은 좋은 practice입니다. 추후 다른 테스트 파일 확장자(.test.ts, .test.tsx 등)도 고려해볼 수 있습니다.

    paths:
-      - "**/*.spec.ts"
+      - "**/*.spec.ts"
+      - "**/*.test.ts"
+      - "**/*.spec.tsx"
+      - "**/*.test.tsx"
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a80fedc and 6a33852.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (9)
  • .github/workflows/vitest.yml (1 hunks)
  • apps/web/app/_utils/sum/sum.spec.ts (1 hunks)
  • apps/web/app/_utils/sum/sum.ts (1 hunks)
  • apps/web/package.json (2 hunks)
  • apps/web/tsconfig.json (1 hunks)
  • apps/web/vitest.config.ts (1 hunks)
  • apps/web/vitest.setup.ts (1 hunks)
  • package.json (1 hunks)
  • turbo.json (1 hunks)
🔇 Additional comments (11)
apps/web/app/_utils/sum/sum.ts (1)

1-4: 테스트용 유틸리티 함수가 올바르게 구현되었습니다.

간단한 덧셈 함수로 Vitest 설정을 검증하기에 적합합니다. 테스트 완료 후 삭제 예정이라고 명시된 점도 좋습니다.

package.json (1)

9-11: 테스트 스크립트가 올바르게 추가되었습니다.

Turbo 기반 모노레포 환경에 적합한 구성으로, 기존 스크립트 패턴과 일관성을 유지하고 있습니다.

turbo.json (1)

21-27: Turbo 테스트 태스크 설정이 올바르게 구성되었습니다.

의존성 관리(^test)와 watch 모드 설정이 적절하며, 기존 dev 태스크와 일관된 패턴을 따르고 있습니다.

apps/web/vitest.config.ts (1)

1-12: Vitest 설정이 잘 구성되어 있습니다.

React 컴포넌트 테스팅을 위한 적절한 설정이 포함되어 있습니다:

  • jsdom 환경으로 DOM 시뮬레이션 지원
  • TypeScript 경로 별칭 해결
  • 전역 테스트 API 활성화
  • 테스트 셋업 파일 지정
apps/web/tsconfig.json (3)

9-9: Vitest 타입 정의가 적절히 추가되었습니다.

vitest/globalsvitest/jsdom 타입이 추가되어 전역 테스트 API와 DOM 환경에 대한 타입 지원이 제공됩니다.


11-14: 경로 별칭 설정이 올바르게 구성되었습니다.

@/* 별칭이 src/*에 매핑되어 있어 vitest.config.ts의 tsconfigPaths 플러그인과 일치합니다.


22-23: Vitest 관련 파일이 include에 적절히 포함되었습니다.

vitest.config.tsvitest.setup.ts 파일이 TypeScript 컴파일 대상에 포함되어 타입 체킹이 가능합니다.

apps/web/vitest.setup.ts (2)

1-1: Jest-DOM 매처가 Vitest용으로 올바르게 import되었습니다.

@testing-library/jest-dom/vitest에서 import하여 Vitest와의 호환성을 보장합니다.


3-16: matchMedia 모킹이 적절히 구현되었습니다.

GitHub 이슈 참조와 함께 완전한 matchMedia API 모킹이 제공되어 미디어 쿼리를 사용하는 컴포넌트 테스트가 가능합니다. 모든 필수 속성과 메서드가 포함되어 있습니다.

apps/web/package.json (2)

12-13: 테스트 스크립트가 적절히 추가되었습니다.

testtest:watch 명령어가 Vitest를 사용하도록 올바르게 구성되었습니다.


32-47: 테스팅 관련 의존성이 잘 구성되었습니다.

React 컴포넌트 테스팅에 필요한 모든 패키지가 포함되어 있습니다:

  • Testing Library 패키지들 (DOM, React, Jest-DOM, User-Event)
  • Vitest와 jsdom
  • Vite 플러그인들 (React, TypeScript 경로 해결)

버전들이 최신이고 서로 호환됩니다.

@leeleeleeleejun leeleeleeleejun merged commit 76e8cbc into develop Aug 6, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

⚙️ Chore 환경 셋팅

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Chore] Vitest 설정 파일 및 테스트 환경(setup) 설정

2 participants