# Playground Msw Tests

REQUIRED and PRIMARY testing approach for packages/playground and packages/playground-ui.

- Repository: https://github.com/mastra-ai/mastra (29259 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add mastra-ai/mastra --skill playground-msw-tests -g -a claude-code -y`
Codex: `npx skills add mastra-ai/mastra --skill playground-msw-tests -g -a codex -y`
Cursor: `npx skills add mastra-ai/mastra --skill playground-msw-tests -g -a cursor -y`
Gemini CLI: `npx skills add mastra-ai/mastra --skill playground-msw-tests -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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](https://mswjs.io/).

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:

1. **MSW + typed client-js fixtures (THIS SKILL)**, for hooks, pages, routes,
   data-fetching, gating, redirect logic, query/mutation flows, error paths.
2. **Playwright E2E** (`e2e-tests-studio` skill), only for genuine cross-page
   user journeys, real browser concerns (focus/keyboard/viewport), or anything
   that requires a real running Mastra server.
3. **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.

## What NOT to do

The rest: https://github.com/mastra-ai/mastra/blob/HEAD/.claude/skills/playground-msw-tests/SKILL.md