사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/pymodel/react-frontend-skills --skill msw시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
MSW Best Practices
Comprehensive API mocking guide for MSW v2 applications, designed for AI agents and LLMs. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
Reference these guidelines when:
- Setting up MSW for testing or development
- Writing or organizing request handlers
- Configuring test environments with MSW
- Mocking REST or GraphQL APIs
- Debugging handler matching issues
- Testing error states and edge cases
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Setup & Initialization | CRITICAL | setup- |
| 2 | Handler Architecture | CRITICAL | handler- |
| 3 | Test Integration | HIGH | test- |
| 4 | Response Patterns | HIGH | response- |
| 5 | Request Matching | MEDIUM-HIGH | match- |
| 6 | GraphQL Mocking | MEDIUM | graphql- |
| 7 | Advanced Patterns | MEDIUM | advanced- |
| 8 | Debugging & Performance | LOW | debug- |
Quick Reference
1. Setup & Initialization (CRITICAL)
setup-server-node-entrypoint- Use correct entrypoint for Node.js (msw/node)setup-lifecycle-hooks- Configure server lifecycle in test setupsetup-worker-script-commit- Commit worker script to version controlsetup-node-version- Require Node.js 18+ for MSW v2setup-unhandled-requests- Configure unhandled request behaviorsetup-typescript-config- Configure TypeScript for MSW v2
2. Handler Architecture (CRITICAL)
handler-happy-path-first- Define happy path handlers as baselinehandler-domain-grouping- Group handlers by domainhandler-absolute-urls- Use absolute URLs in handlershandler-shared-resolvers- Extract shared response logic into resolvershandler-v2-response-syntax- Use MSW v2 response syntaxhandler-request-body-parsing- Explicitly parse request bodieshandler-resolver-argument- Destructure resolver arguments correctlyhandler-reusability-environments- Share handlers across environments
3. Test Integration (HIGH)
test-reset-handlers- Reset handlers after each testtest-avoid-request-assertions- Avoid direct request assertionstest-concurrent-boundary- Use server.boundary() for concurrent teststest-fake-timers-config- Configure fake timers to preserve queueMicrotasktest-async-utilities- Use async testing utilities for mock responsestest-clear-request-cache- Clear request library caches between teststest-jsdom-environment- Use correct JSDOM environment for Jest
4. Response Patterns (HIGH)
response-http-response-helpers- Use HttpResponse static methodsresponse-delay-realistic- Add delays only for timing behavior under testresponse-error-simulation- Simulate error responses correctlyresponse-one-time-handlers- Use one-time handlers for sequential scenariosresponse-custom-headers- Set response headers correctlyresponse-streaming- Mock streaming responses with ReadableStream
5. Request Matching (MEDIUM-HIGH)
match-url-patterns- Use URL path parameters correctlymatch-query-params- Access query parameters from request URLmatch-custom-predicate- Use custom predicates for complex matchingmatch-http-methods- Match HTTP methods explicitlymatch-handler-order- Order handlers from specific to general
6. GraphQL Mocking (MEDIUM)
graphql-operation-handlers- Use operation name for GraphQL matchinggraphql-error-responses- Return GraphQL errors in correct formatgraphql-batched-queries- Handle batched GraphQL queriesgraphql-variables-access- Access GraphQL variables correctly
7. Advanced Patterns (MEDIUM)
advanced-bypass-requests- Use bypass() for passthrough requestsadvanced-cookies-auth- Handle cookies and authenticationadvanced-dynamic-scenarios- Implement dynamic mock scenariosadvanced-vitest-browser- Configure MSW for Vitest browser modeadvanced-file-uploads- Mock file upload endpoints
8. Debugging & Performance (LOW)
debug-lifecycle-events- Use lifecycle events for debuggingdebug-verify-interception- Verify request interception is workingdebug-common-issues- Know common MSW issues and fixesdebug-request-logging- Log request details for debugging
How to Use
Read individual reference files for detailed explanations and code examples:
- Section definitions - Category structure and impact levels
- Individual rules:
references/{prefix}-{slug}.md
Related Skills
- For consuming mocked APIs, see
tanstack-queryskill - For test framework patterns, see
vitest; for methodology, seetdd
Full Compiled Document
For the complete guide with all rules expanded: AGENTS.md




