Implements MSW mock API handlers with stateful stores, filters, and paginated response envelopes.
npx skills add https://github.com/Layer-Fi/layer-react --skill api-mocking-layer-fi
Please help me install this Agent Skill. Skill: api-mocking Source: https://github.com/Layer-Fi/layer-react/tree/main/src/msw Command: npx skills add https://github.com/Layer-Fi/layer-react --skill api-mocking-layer-fi
src/msw/api/** mirror the REST path and the @api hooks file for file, with a CI coverage check that fails when an endpoint lacks a handler. - createMockEndpoint and stateful stores: Each endpoint exposes a default handler plus per-test mock and mockError overrides, backed by in-memory stores that reset automatically between tests so POST-then-GET flows work. - Realistic query behavior: Shared list filters, sorters, and cursor-based pagination helpers make mocks honor query params like search, date ranges, and sorting. - Use Case: When adding a new customers endpoint hook, create the matching get.ts/post.ts mock files, register them in the enclosing handlers.ts, and the component works in both tests and Storybook. ## Quick Start Add an MSW mock for the new endpoint by creating a route-mirroring file under src/msw/api with createMockEndpoint and registering it in the enclosing handlers.ts.High-intent search queries and answers about installing and using this skill.
Create a file under src/msw/api that mirrors the REST route path, define it with createMockEndpoint using a path starting with a bare * wildcard, and register its handler in the enclosing handlers.ts. The msw:check-coverage script fails CI if an @api method file has no matching handler.
Call the endpoint's mock(override) method and pass the returned handler to server.use(...) inside the test. Use mockError(body, { status }) for failure states, and onRequest to spy on the cloned request the test sent.
Yes. createListFilter applies per-param predicates like matchesQuery and date matchers, createListSorter reads sort_by and sort_order, and paginatedApiData implements real cursor and limit handling so infinite-scroll paths paginate correctly.
The handler was likely not registered in the enclosing handlers.ts chain up to src/msw/handlers.ts, since unregistered endpoints silently 404. Also verify the path starts with a bare * wildcard so it matches any base URL.
No. MSW modules must not value-import from @hooks/* because handlers load in every vitest run before per-test mocks apply, which would break unrelated suites. This is enforced as an ESLint error; share contracts through @schemas instead.
Every store created with createMockStore registers a reset callback, and resetMockStores() restores seed data automatically via afterEach in vitest.setup.ts and Storybook loaders. Manual resets are not needed and should be avoided.
mpsuesserCompose and validate multi-stage data transformations with Effect Schema.
input-output-hkAutomate Storybook 6.4 story and test creation for React components.
semicolon-devteamAudit TypeScript/React code for DDD architecture and quality standards.
TechlemariamGenerate mock servers and fixtures for isolated API testing with MSW.