Playground Msw Tests
REQUIRED and PRIMARY testing approach for packages/playground and packages/playground-ui.
Install
npx skills add mastra-ai/mastra --skill playground-msw-tests -g -a claude-code -y- Repository
- mastra-ai/mastra29.3k
- Category
- Design
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 2,409 tokens
- Runs scripts
- No, instructions only
What it does
REQUIRED and PRIMARY testing approach for packages/playground and packages/playground-ui. Triggers on: adding or modifying hooks, pages, route components, data-fetching code, React Query interactions, or any test work in these packages. Generates Vitest tests that drive the real @mastra/client-js + React Query stack through MSW handlers and typed fixtures derived from @mastra/client-js response types. This is the #1 way to test the playground packages, ABOVE Playwright E2E. Use Playwright only for cross-page user journeys that MSW cannot model.
MSW + client-js Fixtures: Primary Testing Strategy
Core Principle
Drive the real transport, mock the network.
Tests in packages/playground and packages/playground-ui MUST be written as
Vitest tests that exercise the real @mastra/client-js SDK, the real React Query
cache, and the real component/hook code paths. The only seam we mock is the
network boundary, via MSW.
This catches contract drift between the playground and @mastra/client-js at
typecheck time and at test time, something vi.mock('@/hooks/...') style tests
cannot do.
Priority Order
When you write or refactor a test for these packages, choose in this order:
- MSW + typed client-js fixtures (THIS SKILL), for hooks, pages, routes, data-fetching, gating, redirect logic, query/mutation flows, error paths.
- Playwright E2E (
e2e-tests-studioskill), only for genuine cross-page user journeys, real browser concerns (focus/keyboard/viewport), or anything that requires a real running Mastra server. - Pure unit tests, only for self-contained utilities/services with no network, no React Query, no router involvement.
If the same behavior can be covered by both #1 and #2, prefer #1. MSW tests are faster, deterministic, run in CI without browsers, and assert the real wire contract.
