code-quest: Skill for Claude Code

MSW v2 for Vitest

Setup

// 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

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

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

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