What problem does it solve? Frontend tests in this React + TypeScript chess app often fail for the wrong reasons: mocks that mirror wrong backend routes, SignalR hub connections attempted in unit tests, unstable CSS selectors, and session state leaking between cases. This Skill provides the canonical recipes and conventions for testing at all three levels so tests catch real bugs instead of confirming them. ## Core Features & Use Cases - Three-level test strategy: Unit tests with Jest, React Testing Library, createFakeHub, and axios-mock-adapter; integration tests with MSW v1; E2E tests with Playwright and page.route. - SignalR hub testing recipes: Use createFakeHub with HubTestProvider, emit server events inside act(), and throw on unexpected hub methods for clear failure messages. - Known-trap documentation: Warns that current MSW handlers and E2E routes mock nonexistent backend endpoints (/create, /get/:id, /refresh), so route fixes must update mocks in the same commit. - Use Case: Before writing the first test for a new component or hook, follow the recipes to pick the lowest test level, list scenarios (success, server refusal, invalid input, disconnected hub), and write the failing test first. ## Quick Start Ask the assistant to write a unit test for a component that talks to the SignalR hub using createFakeHub and the conventions from this testing strategy.
