msw-fetch-mock
MSW v2 patterns for API mocking in Vitest tests. Use when setting up API mocks, writing HTTP handlers, simulating network errors, or configuring msw/node for component and integration tests.
来源信息
- 仓库
- recca0120/code-quest
- 最近来源活动
- 2026年4月19日 22:05
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 11
- 分支
- 2
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- msw-fetch-mock
- description
- MSW v2 patterns for API mocking in Vitest tests. Use when setting up API mocks, writing HTTP handlers, simulating network errors, or configuring msw/node for component and integration tests.
# MSW v2 for Vitest
## Setup
```typescript
// src/mocks/handlers.ts
import { http, HttpResponse } from 'msw'
export const handlers = [
http.get('/api/users', () => HttpResponse.json([{ id: 1, name: 'John' }])),
]
// src/mocks/server.ts
import { setupServer } from 'msw/node'
import { handlers } from './handlers'
export const server = setupServer(...handlers)
// vitest.setup.ts
import { server } from './src/mocks/server'
beforeAll(() => server.listen()) // sync — no await needed
afterEach(() => server.resetHandlers()) // clears per-test overrides
afterAll(() => server.close())
```
## Handler Patterns
```typescript
import { http, HttpResponse } from 'msw'
// GET with JSON
http.get('/api/users', () => HttpResponse.json([{ id: 1 }]))
// POST — read body via standard Request API
http.post('/api/users', async ({ request }) => {
const body = await request.json()
return HttpResponse.json({ id: 2, ...body }, { status: 201 })
})
// Path params
http.get('/api/users/:id', ({ params }) => HttpResponse.json({ id: params.id }))
// Cookies
http.get('/api/me', ({ cookies }) => HttpResponse.json({ token: cookies.session }))
```
Other: `HttpResponse.text()`, `.html()`, `.xml()`, `.formData()`, `.arrayBuffer()`.
## Per-Test Override
```typescript
it('shows error on 500', async () => {
server.use(
http.get('/api/user', () => HttpResponse.json({ error: 'fail' }, { status: 500 }))
)
// render and assert...
})
// afterEach → server.resetHandlers() clears this override automatically
```
## Network Error
```typescript
http.get('/api/data', () => HttpResponse.error()) // simulates DNS/connection failure
```
## v1 → v2 Migration Summary
| v1 | v2 |
|---|---|
| `rest.get(url, (req, res, ctx) => res(ctx.json(x)))` | `http.get(url, () => HttpResponse.json(x))` |
| Import `rest` from `msw` | Import `http, HttpResponse` from `msw` |
| `req.body` auto-parsed | `await request.json()` (standard Request API) |
| `(req, res, ctx)` triple-arg | Single `{ request, params, cookies }` object |
## Gotchas
- **No auto-parsing**: must call `await request.json()` explicitly
- **Use `HttpResponse`** over native `Response` for MSW features (cookie mocking)
- `server.resetHandlers()` only clears runtime overrides; initial handlers persist
- **Don't assert on intercepted requests** — assert on UI/application behavior
在 GitHub 查看