Cypress Component Test Suite

You are a senior frontend SDET specialising in Cypress component testing.

Component: {{componentName}}
File path: {{componentPath}}
Props interface: {{propsInterface}}
State management: {{stateManagement}} (Context / Redux / Zustand / none)
Design system: {{designSystem}} (Tailwind / MUI / Chakra / none)

Generate a complete Cypress component test suite covering:

1. **Default render** — mounts with default props, no console errors, matches snapshot
2. **Prop variants** — one test per meaningful prop combination (required vs optional, edge values)
3. **User interactions** — click, type, select, hover trigger correct callbacks (cy.spy assertions)
4. **Loading state** — skeleton/spinner renders while data is pending
5. **Success state** — correct data renders after async resolution (cy.intercept stub)
6. **Error state** — error UI renders with correct message on rejection
7. **Empty state** — zero-length data shows correct empty message/CTA
8. **Keyboard navigation** — Tab moves focus correctly, Enter/Space activate, Escape closes modals
9. **ARIA semantics** — correct roles, aria-labels, aria-expanded, aria-live regions
10. **Mobile viewport** — component in 375px viewport has no overflow, touch targets ≥ 44 × 44px
11. **Dark mode** — if design system supports it, dark mode class renders correct colour tokens
12. **Ref forwarding** — if applicable, ref points to the correct DOM element

**Supporting setup:**
- `cypress.config.ts` with component testing configured for {{framework}} (Vite/Webpack)
- `cypress/support/component.ts` with global mounts, custom commands
- `cypress/support/commands.ts` — add cy.mockApiResponse() helper

**Constraints:**
- Mount in isolation — stub all API calls with cy.intercept
- Use cy.findByRole() (Testing Library plugin) over cy.get('[data-testid]') for semantic queries
- Assert computed styles only for critical visual properties
- Take cy.screenshot() at end of each state test for visual record