[chore] Vitest 테스트 환경 구축 및 Yarn PnP SDK 최적화 by zeon0xx0 · Pull Request #16 · S1J2-Lab/home-protect-client

zeon0xx0 · 2026-04-25T12:07:24Z

#️⃣ 관련 이슈

연관된 이슈 번호를 적어주세요.
이슈를 함께 종료하려면 Closes #이슈번호 형식으로 작성해주세요.

Closes [chore] Vitest를 활용한 테스트 환경 도입 #10

⏰ 작업 시간

예상과 실제 시간이 다르다면 이유를 간단히 적어주세요.

예상 작업 시간 : 4h
실제 작업 시간 : 4h

💻 작업 내용

이번 작업에서 진행한 내용을 정리해주세요.

Vitest 테스트 환경 구축

vitest, @testing-library/react, happy-dom 등 테스트 관련 의존성 설치
vitest.config.ts 및 src/test/setup.ts 파일 생성을 통한 전역 테스트 설정

Yarn PnP SDK 최적화 및 .gitignore 정리

개발자 로컬 환경에 종속적인 .yarn/sdks 및 .yarn-cache를 Git 추적에서 제외
에디터(VS Code)에서 타입 체크 및 Prettier가 정상 작동하도록 .vscode/settings.json 공유 설정 유지

확인용 테스트 코드 작성해서 통과 확인해봄
테스트 런타임 환경으로 happy-dom 채택

기존 jsdom 대비 월등히 빠른 속도를 제공하는 happy-dom을 적용함

필요한 경우 스크린샷이나 캡처 화면을 함께 첨부해주세요.

💡 테스트 코드 및 실행 결과

🪏 작업하면서 고민한 부분

작업 중 겪은 문제나 고민, 그리고 그에 대한 해결 과정을 정리해주세요.
관련 트러블슈팅 문서가 있다면 링크로 연결해주세요.

Yarn PnP 환경 내 에디터 호환성 이슈

문제: Yarn PnP 환경에서 VS Code가 Prettier나 TypeScript를 제대로 인식하지 못해 빨간 줄이 뜨거나 포맷팅이 깨지는 현상이 발생함.
해결: yarn dlx @yarnpkg/sdks vscode 를 통해 프로젝트 내부에 SDK를 생성하고, 해당 경로를 .vscode/settings.json 에 명시하여 모든 팀원이 동일한 도구 경로를 바라보게 설정함.
Git 관리 고민: 로컬 환경마다 달라질 수 있는 SDK 파일(약 400개)이 Git에 올라가는 문제를 발견하여, git rm --cached 를 통해 원격 저장소에서는 삭제하되 로컬에서는 유지되도록 처리함.

왜 jsdom 대신 happy-dom인가?

문제: 기존 jsdom 사용 시 Yarn Berry PnP 환경의 의존성 경로나 peer dependency 문제로 인해 테스트 환경이 불안정해질 가능성이 존재함.

해결: jsdom 대비 가볍고 Vitest와 호환성이 뛰어난 happy-dom을 채택하여 테스트 실행 속도와 안정성을 확보함.

판단 근거: 현재 테스트 범위인 입력값 변경, 버튼 활성/비활성, 파일 업로드 상태, 조건부 렌더링 등 React 컴포넌트 단위 테스트를 수행하기에 happy-dom의 기능으로 충분하다고 판단함. (완전한 브라우저 환경이 필요한 E2E 테스트가 아닌 단위 테스트에 최적화된 선택)

트러블 슈팅1

👀 리뷰 포인트

리뷰어가 중점적으로 확인해주길 바라는 부분이 있다면 작성해주세요.

📘 참고 자료

작업하면서 참고한 문서, 링크, 자료가 있다면 작성해주세요.

yarn berry 공식문서.

⚠️ 팀원 필독 사항 (중요!)

이번 PR이 머지되면 깃허브 상에서 .yarn/sdks 폴더가 사라지게 됩니다. 이는 **삭제된 것이 아니라 Git 관리 대상에서 제외(Ignore)**된 거예요!!

정상적인 개발 환경 유지를 위해 pull 이후 다음 단계를 꼭! 한 번만 실행해 주세요:

의존성 설치:

yarn install

에디터 SDK 갱신 (빨간 줄 해결):

yarn dlx @yarnpkg/sdks vscode

위 명령어를 치면 로컬에 다시 .yarn/sdks 폴더가 생기며 에디터가 정상 작동합니다.

에디터 권한 허용:

VS Code 우측 하단에 TypeScript 혹은 Prettier 관련 알림 창이 뜨면 **[Allow]**를 눌러주세요.

테스트 실행 확인:

yarn test

Summary by CodeRabbit

릴리스 노트

Tests
- 테스트 실행 환경 추가 구성
- React Testing Library 및 DOM 검증 라이브러리 통합
- 테스트 스크립트 추가
Chores
- 개발 환경 설정 최적화
- 패키지 관리자 설정 업데이트

coderabbitai · 2026-04-25T12:07:35Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d2bd6026-fb2d-4708-ba7b-135a7545d664

📥 Commits

Reviewing files that changed from the base of the PR and between 93d0f9d and f75ba23.

⛔ Files ignored due to path filters (20)

.yarn/sdks/eslint/bin/eslint.js is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/api.js is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/config-api.js is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/types/config-api.d.ts is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/types/index.d.ts is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/types/rules.d.ts is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/types/universal.d.ts is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/types/use-at-your-own-risk.d.ts is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/universal.js is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/unsupported-api.js is excluded by !**/.yarn/**
.yarn/sdks/eslint/package.json is excluded by !**/.yarn/**
.yarn/sdks/integrations.yml is excluded by !**/.yarn/**
.yarn/sdks/typescript/bin/tsc is excluded by !**/.yarn/**
.yarn/sdks/typescript/bin/tsserver is excluded by !**/.yarn/**
.yarn/sdks/typescript/lib/tsc.js is excluded by !**/.yarn/**
.yarn/sdks/typescript/lib/tsserver.js is excluded by !**/.yarn/**
.yarn/sdks/typescript/lib/tsserverlibrary.js is excluded by !**/.yarn/**
.yarn/sdks/typescript/lib/typescript.js is excluded by !**/.yarn/**
.yarn/sdks/typescript/package.json is excluded by !**/.yarn/**
yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (4)

.gitignore
package.json
src/test/setup.ts
vite.config.ts

✅ Files skipped from review due to trivial changes (1)

src/test/setup.ts

🚧 Files skipped from review as they are similar to previous changes (3)

vite.config.ts
.gitignore
package.json

📝 Walkthrough

개요

Vitest 기반 테스트 환경 도입을 위해 프로젝트 설정을 구성합니다. 패키지 의존성 추가, Vite 설정 업데이트, 테스트 스크립트 정의, 테스트 환경 초기화 파일 생성 및 Yarn Berry PnP 호환성을 위한 .gitignore 규칙 업데이트를 포함합니다.

변경사항

Cohort / File(s)	Summary
테스트 환경 구성 `vite.config.ts`, `src/test/setup.ts`	Vite 설정에 Vitest 테스트 섹션 추가 (globals 활성화, happy-dom 환경, setup 파일 지정) 및 테스트 라이브러리 DOM 어설션 초기화 파일 생성.
의존성 및 스크립트 `package.json`	test, test:run 스크립트 추가 및 vitest, `@testing-library/`*, jest-dom, happy-dom 개발 의존성 추가.
Git 무시 규칙 `.gitignore`	Yarn Berry PnP 아티팩트(.pnp., .yarn/) 무시 추가 및 캐시/상태 파일(.yarn-cache/, .yarn/cache/, .yarn/unplugged/ 등) 명시적 무시 규칙 확대. patches, plugins, releases, versions 화이트리스트 적용.

예상 코드 리뷰 시간

🎯 2 (Simple) | ⏱️ ~12 분

제안 라벨

🏗️ Infra

시

🐰 테스트 환경을 재미있게,
Vitest와 happy-dom의 춤,
설정의 정원을 가꾸며,
버그 없는 미래를 향해 깡총!
✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목은 Vitest 테스트 환경 구축과 Yarn PnP SDK 최적화라는 두 가지 주요 변경 사항을 명확하게 요약하고 있으며, 실제 변경 사항과 완벽하게 일치합니다.
Description check	✅ Passed	PR 설명은 템플릿의 모든 필수 섹션(관련 이슈, 작업 시간, 작업 내용, 고민한 부분, 리뷰 포인트, 참고 자료)을 포함하고 있으며, 상세한 내용, 스크린샷, 팀원 안내 사항까지 포함하고 있습니다.
Linked Issues check	✅ Passed	모든 변경 사항이 링크된 이슈 `#10의` 목표를 충족합니다: Vitest 및 의존성 설치, happy-dom 채택, SDK 설정, Git 추적 제외, 테스트 코드 작성 및 실행 확인이 모두 구현되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경 사항이 링크된 이슈 `#10의` 범위 내에 있습니다. .gitignore, package.json, vite.config.ts, src/test/setup.ts의 변경은 모두 Vitest 환경 구축과 Yarn PnP SDK 최적화에 직접 관련되어 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch chore/test-setting

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

🧹 Nitpick comments (1)

package.json (1)

12-14: VSCode SDK 초기화 명령을 스크립트로 노출해 두면 온보딩이 더 안전합니다.

PR 안내에만 의존하면 누락되기 쉬워서, Line 12~14 근처에 실행용 스크립트를 추가해 두는 편이 좋습니다.

제안 diff

   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "format:check": "prettier --check .",
     "preview": "vite preview",
     "prepare": "husky",
+    "sdk:vscode": "yarn dlx `@yarnpkg/sdks` vscode",
     "test": "vitest",
     "test:run": "vitest run"
   },

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@package.json` around lines 12 - 14, Add a package.json script to expose the
project's VSCode SDK initialization command so contributors can run it easily
during onboarding; for example add a new script key like "vscode:setup" (placed
alongside "prepare", "test", "test:run") that runs the same VSCode SDK init
command used in your onboarding docs (replace with the actual CLI or local
script your project uses, e.g., the project's SDK init CLI or a
scripts/init-vscode-sdk.js wrapper).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@package.json`:
- Around line 12-14: Add a package.json script to expose the project's VSCode
SDK initialization command so contributors can run it easily during onboarding;
for example add a new script key like "vscode:setup" (placed alongside
"prepare", "test", "test:run") that runs the same VSCode SDK init command used
in your onboarding docs (replace with the actual CLI or local script your
project uses, e.g., the project's SDK init CLI or a scripts/init-vscode-sdk.js
wrapper).

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b5897591-3702-49b9-9463-fedeb568a3a2

📥 Commits

Reviewing files that changed from the base of the PR and between f074d56 and 93d0f9d.

⛔ Files ignored due to path filters (20)

.yarn/sdks/eslint/bin/eslint.js is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/api.js is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/config-api.js is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/types/config-api.d.ts is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/types/index.d.ts is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/types/rules.d.ts is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/types/universal.d.ts is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/types/use-at-your-own-risk.d.ts is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/universal.js is excluded by !**/.yarn/**
.yarn/sdks/eslint/lib/unsupported-api.js is excluded by !**/.yarn/**
.yarn/sdks/eslint/package.json is excluded by !**/.yarn/**
.yarn/sdks/integrations.yml is excluded by !**/.yarn/**
.yarn/sdks/typescript/bin/tsc is excluded by !**/.yarn/**
.yarn/sdks/typescript/bin/tsserver is excluded by !**/.yarn/**
.yarn/sdks/typescript/lib/tsc.js is excluded by !**/.yarn/**
.yarn/sdks/typescript/lib/tsserver.js is excluded by !**/.yarn/**
.yarn/sdks/typescript/lib/tsserverlibrary.js is excluded by !**/.yarn/**
.yarn/sdks/typescript/lib/typescript.js is excluded by !**/.yarn/**
.yarn/sdks/typescript/package.json is excluded by !**/.yarn/**
yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (5)

.gitignore
.vscode/settings.json
package.json
src/test/setup.ts
vite.config.ts

zeon0xx0 added this to the M1 · 프로젝트 초기 세팅 & UI 구현 milestone Apr 25, 2026

zeon0xx0 added the 🔧 Chore 빌드 설정, 패키지 업데이트 등 자잘한 설정 label Apr 25, 2026

coderabbitai Bot reviewed Apr 25, 2026

View reviewed changes

2seb2 reviewed Apr 25, 2026

View reviewed changes

Comment thread .vscode/settings.json Outdated

zeon0xx0 added 3 commits April 26, 2026 12:57

chore: yarn berry sdks 제외 및 gitignore 정리

5baca6f

chore: vitest 및 테스트 환경 설정

92440ec

refactor: 불필요한 prettier sdk 설정 삭제

f75ba23

zeon0xx0 force-pushed the chore/test-setting branch from 6b2cdd3 to f75ba23 Compare April 26, 2026 03:57

2seb2 approved these changes Apr 26, 2026

View reviewed changes

zeon0xx0 merged commit 8fdcf31 into main Apr 26, 2026
2 checks passed

coderabbitai Bot mentioned this pull request Apr 26, 2026

[fix] yarn sdk 파일 복구 #17

Merged

zeon0xx0 self-assigned this Apr 27, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[chore] Vitest 테스트 환경 구축 및 Yarn PnP SDK 최적화#16

[chore] Vitest 테스트 환경 구축 및 Yarn PnP SDK 최적화#16
zeon0xx0 merged 3 commits into
mainfrom
chore/test-setting

zeon0xx0 commented Apr 25, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 25, 2026 •

edited

Loading

개요

변경사항

예상 코드 리뷰 시간

제안 라벨

시

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

zeon0xx0 commented Apr 25, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

#️⃣ 관련 이슈

⏰ 작업 시간

💻 작업 내용

🪏 작업하면서 고민한 부분

👀 리뷰 포인트

📘 참고 자료

⚠️ 팀원 필독 사항 (중요!)

Summary by CodeRabbit

릴리스 노트

Uh oh!

coderabbitai Bot commented Apr 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

개요

변경사항

예상 코드 리뷰 시간

제안 라벨

시

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

zeon0xx0 commented Apr 25, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 25, 2026 •

edited

Loading