From code-forge
Detects React project structure (Next.js, Vite, CRA) and configures jest/vitest, @testing-library, MSW, customRender with provider context, and test scripts.
How this skill is triggered — by the user, by Claude, or both
Slash command
/code-forge:setup-testThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
테스트 환경이 없는 프로젝트에 초기 세팅을 수행합니다.
테스트 환경이 없는 프로젝트에 초기 세팅을 수행합니다.
다음을 자동 감지합니다:
프레임워크 감지:
next.config.* -> Next.jsvite.config.* -> Vitereact-scripts in package.json -> CRA기존 테스트 환경 확인:
jest.config.* / vitest.config.* 존재 여부@testing-library/react 설치 여부상태 관리 / Provider 구조 분석:
_app.tsx / _app.js 읽기 -> Provider 트리 파악Provider/ 디렉토리 탐색사용자에게 분석 결과 보고 후 진행 여부 확인:
프로젝트 분석 결과:
- 프레임워크: Next.js 13 (Pages Router)
- 테스트 러너: 미설정 -> jest 권장
- 상태 관리: jotai, react-query
- Provider: QueryClientProvider, JotaiProvider
다음 항목을 세팅하겠습니다:
1. jest + @testing-library/react + MSW 패키지 설치
2. jest.config.js 생성
3. jest.setup.js 생성
4. customRender 유틸리티 생성
5. MSW 핸들러 구조 생성
6. package.json test 스크립트 추가
진행할까요?
jest 기반 (Next.js, CRA):
yarn add -D jest @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-environment-jsdom @types/jest msw identity-obj-proxy
Next.js 프로젝트 추가:
yarn add -D jest-next-dynamic
vitest 기반 (Vite):
yarn add -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom @types/jest msw
jest.config.js (Next.js 예시):
jest.setup.js:
@testing-library/jest-dom import__tests__/utils/customRender.tsx (또는 src/test/customRender.tsx):
프로젝트의 Provider 구조를 분석하여 생성합니다:
src/mocks/
├── server.ts # MSW setupServer
├── handlers/
│ └── index.ts # 핸들러 모음
└── browser.ts # (선택) 브라우저용 setupWorker
{
"scripts": {
"test": "jest --watchAll",
"test:ci": "jest --ci --coverage"
}
}
간단한 샘플 테스트를 실행하여 환경이 올바르게 구성되었는지 확인합니다:
yarn test --watchAll=false
npx claudepluginhub ggombee/code-forgeSets up Vitest testing by detecting project type (React, Node, Hono, Cloudflare Workers), generating config/tests/utilities, adding scripts, and migrating from Jest.
Configures Jest for JavaScript and TypeScript projects including setup files, module resolution, coverage thresholds, transform rules, and project organization for optimal testing.
Guides Vitest test writing with mocking, MSW v2 HTTP mocking, snapshot testing, and test infrastructure. Use when writing or debugging Vitest tests.