skills.rest
mastra-ai
mastra-aiOFFICIAL
Explore all skills by this author →
Website𝕏@mastraGitHub

playground-msw-tests

Generates Vitest tests for playground packages using MSW handlers and typed client-js fixtures.

27.6k|2.7k|Updated Aug 6, 2024
Search Tags:#Vitest#Testing#react query#Fixtures#msw#Playground#client-js
One-click install
npx skills add https://github.com/mastra-ai/mastra --skill playground-msw-tests
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playground-msw-tests
Source: https://github.com/mastra-ai/mastra/tree/main/.claude/skills/playground-msw-tests
Command: npx skills add https://github.com/mastra-ai/mastra --skill playground-msw-tests

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tests in packages/playground and packages/playground-ui often mock internal hooks with vi.mock, which hides cache, gating, and transport bugs and lets fixtures drift silently from the real @mastra/client-js SDK contract. This Skill enforces a testing strategy where the real client SDK, React Query cache, and component code paths run against MSW-mocked network boundaries with fully typed fixtures.

Core Features & Use Cases

  • MSW-based test generation: Produces Vitest tests that render components through MastraReactProvider, QueryClientProvider, and MemoryRouter while MSW handlers intercept HTTP requests at the network layer.
  • Typed fixture enforcement: Requires every fixture to be typed with response types re-exported from @mastra/client-js, banning as any casts and bespoke inline test shapes so typecheck failures surface contract drift.
  • Testing recipes: Provides patterns for loading states via promise gates, query gating assertions with vi.fn-wrapped handlers, feature-flag toggling, and query-string-dependent responses.
  • Use Case: When adding a new agents list page to the playground, generate a test that serves a typed ListStoredAgentsResponse fixture through MSW, asserts the rendered output, and verifies gating logic never fires unauthorized endpoint calls.

Quick Start

Write a Vitest test for the agents page in packages/playground that uses MSW handlers and typed @mastra/client-js fixtures instead of mocking hooks.

Frequently Asked Questions about playground-msw-tests

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test React Query hooks with MSW and Vitest?▼

Render the hook or component inside MastraReactProvider, QueryClientProvider, and MemoryRouter, then register MSW handlers per test with server.use. The real @mastra/client-js SDK executes against the mocked network, so cache and gating behavior is exercised without mocking hooks.

MSW vs Playwright for testing React playground pages?▼

MSW-based Vitest tests are the primary choice for hooks, pages, fetching, caching, gating, and error states because they are faster and run in CI without browsers. Use Playwright only for cross-page user journeys, real browser concerns, or flows requiring a live Mastra server.

Why should I avoid vi.mock on custom data hooks in tests?▼

Mocking internal hooks hides cache, gating, and transport bugs and lets tests drift from the real SDK contract. Driving the real hook through MSW catches contract drift at typecheck time and test time, since fixtures must match @mastra/client-js response types.

How do I test loading states without mocking hooks?▼

Defer the MSW handler's resolution with a promise gate: await the gate inside the handler, render the component, assert the spinner appears, then resolve the gate and assert the loading state clears. This tests the real async path without touching hook internals.

Why does my MSW test fail with unhandled request errors?▼

The shared vitest.setup.ts starts the MSW server with onUnhandledRequest set to error, so any request without a registered handler fails loudly. Add a server.use handler for every endpoint the component can hit, including requests gated by feature flags.

When should I not use MSW-based tests for playground code?▼

Avoid MSW tests for genuine cross-page user journeys, behaviors requiring a real running Mastra server such as streaming or workflow execution, and pure browser concerns like drag-drop, focus traps, or file uploads. Those belong in Playwright E2E tests.

Related Skills

Explore More Software Engineering Skills→
KimenzoKimenzo

tailwind-best-practices

Enforce Tailwind CSS design system rules for Mastra Playground UI components.

Community
Intermediate
claushaasclaushaas

build-ci-triage

Triage CI and local build failures using error logs and environment details.

Community
Basic
AgentSystemLabsAgentSystemLabs
121

add-e2e-test

Add Playwright end-to-end tests with smoke gates and role-based assertions.

Official
Advanced
deancochrandeancochran
2

testing

Create test suites for React Native and web components, utilities, hooks, and API routers.

Community
Advanced