pproenca/dot-skills

msw

MSW (Mock Service Worker) best practices for API mocking in tests (formerly test-msw).

ソースを見る

使い方

  1. インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
  2. 必要なツール、認証情報、対応環境を原文で確認します。
  3. 入力と成果物を指定し、出力を資料と照合します。
npx skills add https://github.com/pproenca/dot-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

PriorityCategoryImpactPrefix
1Setup & InitializationCRITICALsetup-
2Handler ArchitectureCRITICALhandler-
3Test IntegrationHIGHtest-
4Response PatternsHIGHresponse-
5Request MatchingMEDIUM-HIGHmatch-
6GraphQL MockingMEDIUMgraphql-
7Advanced PatternsMEDIUMadvanced-
8Debugging & PerformanceLOWdebug-

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 setup
  • setup-worker-script-commit - Commit worker script to version control
  • setup-node-version - Require Node.js 18+ for MSW v2
  • setup-unhandled-requests - Configure unhandled request behavior
  • setup-typescript-config - Configure TypeScript for MSW v2

2. Handler Architecture (CRITICAL)

  • handler-happy-path-first - Define happy path handlers as baseline
  • handler-domain-grouping - Group handlers by domain
  • handler-absolute-urls - Use absolute URLs in handlers
  • handler-shared-resolvers - Extract shared response logic into resolvers
  • handler-v2-response-syntax - Use MSW v2 response syntax
  • handler-request-body-parsing - Explicitly parse request bodies
  • handler-resolver-argument - Destructure resolver arguments correctly
  • handler-reusability-environments - Share handlers across environments

3. Test Integration (HIGH)

  • test-reset-handlers - Reset handlers after each test
  • test-avoid-request-assertions - Avoid direct request assertions
  • test-concurrent-boundary - Use server.boundary() for concurrent tests
  • test-fake-timers-config - Configure fake timers to preserve queueMicrotask
  • test-async-utilities - Use async testing utilities for mock responses
  • test-clear-request-cache - Clear request library caches between tests
  • test-jsdom-environment - Use correct JSDOM environment for Jest

4. Response Patterns (HIGH)

  • response-http-response-helpers - Use HttpResponse static methods
  • response-delay-realistic - Add realistic response delays
  • response-error-simulation - Simulate error responses correctly
  • response-one-time-handlers - Use one-time handlers for sequential scenarios
  • response-custom-headers - Set response headers correctly
  • response-streaming - Mock streaming responses with ReadableStream

5. Request Matching (MEDIUM-HIGH)

  • match-url-patterns - Use URL path parameters correctly
  • match-query-params - Access query parameters from request URL
  • match-custom-predicate - Use custom predicates for complex matching
  • match-http-methods - Match HTTP methods explicitly
  • match-handler-order - Order handlers from specific to general

6. GraphQL Mocking (MEDIUM)

  • graphql-operation-handlers - Use operation name for GraphQL matching
  • graphql-error-responses - Return GraphQL errors in correct format
  • graphql-batched-queries - Handle batched GraphQL queries
  • graphql-variables-access - Access GraphQL variables correctly

7. Advanced Patterns (MEDIUM)

  • advanced-bypass-requests - Use bypass() for passthrough requests
  • advanced-cookies-auth - Handle cookies and authentication
  • advanced-dynamic-scenarios - Implement dynamic mock scenarios
  • advanced-vitest-browser - Configure MSW for Vitest browser mode
  • advanced-file-uploads - Mock file upload endpoints

8. Debugging & Performance (LOW)

  • debug-lifecycle-events - Use lifecycle events for debugging
  • debug-verify-interception - Verify request interception is working
  • debug-common-issues - Know common MSW issues and fixes
  • debug-request-logging - Log request details for debugging

How to Use

Read individual reference files for detailed explanations and code examples:

Related Skills

  • For generating MSW mocks from OpenAPI, see orval skill
  • For consuming mocked APIs, see tanstack-query skill
  • For test methodology, see test-vitest or test-tdd skills

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md

同じリポジトリから

関連する Skills

すべての Skills
pproenca
コミュニティ

audio-voice-recovery

Audio forensics and voice recovery guidelines for CSI-level audio analysis. This skill should be used when recovering voice from low-quality or low-volume audio, enhancing degraded recordings, performing forensic audio analysis, or transcribing difficult audio. Triggers on tasks involving audio enhancement, noise reduction, voice isolation, forensic authentication, or audio transcription.

導入数
1
GitHub Stars
218
更新日
8月15日
pproenca
コミュニティ

zod

Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).

導入数
2
GitHub Stars
218
更新日
8月15日
pproenca
コミュニティ

react-hook-form

React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, useFieldArray, the subscribe() API, and the Watch / FormStateSubscribe / FieldArray render-prop components. Covers RHF 7.82 additions including resetDefaultValues() and the disabled field-array option. This skill should be used when building client-side controlled forms with React Hook Form library. This skill does NOT cover React 19 Server Actions, useActionState, or server-side form

導入数
15
GitHub Stars
217
更新日
8月15日
pproenca
コミュニティ

vitest

Vitest testing framework patterns for test setup, async testing, mocking with vi., snapshots, and test performance (formerly test-vitest). This skill should be used when writing or debugging Vitest tests. This skill does NOT cover TDD methodology (use test-tdd skill), API mocking with MSW (use test-msw skill), or Jest-specific APIs.

導入数
16
GitHub Stars
215
更新日
8月15日