Frontend Patterns

This document records implementation patterns and gotchas specific to the Arda frontend application (Next.js with MSW, React context, and Cognito integration).

MSW Browser-Only Interception

MSW in browser mode only intercepts requests from the browser. Server-side Next.js API routes that make upstream fetch() calls are not intercepted by MSW. Some server console errors may appear even when browser-mode mock intercepts are working correctly.

React Context Object Identity

When creating a mock provider for testing or local development, it must use the same Context object as the real provider. Creating a new context with createContext() will not satisfy hooks that expect the original context object.

NEXT_PUBLIC_ Prefix Required

Environment variables accessed in browser code must use the NEXT_PUBLIC_ prefix to be embedded by the Next.js compiler at build time. Variables without this prefix are only available server-side.

Type Assertions in Mock Data Are a Code Smell

Avoid as unknown as Type casts in mock data. Replace them with properly-typed factory functions that create valid mock objects consistent with the domain model. Type assertions in tests hide type errors and reduce mock reliability.