Agent skill · supabase
studio-mock-api-tests
Component tests for Supabase Studio that mock API requests at the
What it needs
About 6k tokens when loaded.
What this skill does
Studio MSW component tests Mount a Studio component, intercept its network calls with MSW, assert what renders and what gets sent. The infrastructure is already wired up — this skill is the working template plus the gotchas. When to use The component (or any descendant it renders) calls a React Query hook or mutation that hits /platform/..., /v1/..., or another endpoint in apps/studio/data/api.d.ts. You'd otherwise be tempted to write vi.mock('@/data/some-query', ...). Don't. Mock the network instead — see "Why not vi.mock" below. If the component is purely presentational with no data fetching, you don't need MSW; render and assert directly. The template That's the whole pattern (add fireEvent, waitFor, or userEvent as the interactions need them — see the gotchas below). Server lifecycle (listen/resetHandlers/ close) is handled by apps/studio/tests/vitestSetup.ts — handlers registered via addAPIMock are scoped to the current test. Gotchas that will eat your afternoon 1. Path params use :slug, not {slug} addAPIMock is typed from the OpenAPI paths, but path params are remapped to MSW's :param format. Autocomplete will guide you, but if typecheck reports the path isn't assignable, you're using the OpenAPI {slug} form. 2. Use HttpResponse.json, not new HttpResponse For success responses, always go through HttpResponse.json — even for 204/201-no-content endpoints. A raw new HttpResponse(null, { status: 201 }) returns no content-type, and openapi-fetch can hang the mutation flow, which silently breaks onSuccess callbacks. 3. Submit buttons in Sheets/Modals need fireEvent.click The convention <Button form={FORMID} type="submit" /> (button outside the form, associated by id) doesn't reliably trigger submission under userEvent.click in jsdom. Use fireEvent.click for the submit button. Continue to use userEvent.type for inputs. 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills supabase/studio-mock-api-tests--3ae025