Real Browser 환경 기반 TWD 도입으로 TanStack 앱 테스트 복잡도 제거

Context

React Testing Library 기반의 jsdom 테스트 환경은 MemoryRouter, QueryClientProvider 등 과도한 Provider 래핑으로 인한 보일러플레이트 증가를 초래함. 실제 브라우저 환경과 괴리된 가상 DOM 기반 테스트는 신뢰도가 낮으며 설정 비용이 실제 테스트 코드보다 커지는 한계가 존재함.

Technical Solution

• 실제 브라우저 탭 내에 테스트 러너를 직접 마운트하여 Real Router 및 Real Query Client를 그대로 활용하는 In-browser Testing 아키텍처 채택
• Vite Plugin 기반의 twd-js와 twd-relay를 통한 서비스 워커 네트워크 모킹 및 WebSocket 기반 원격 테스트 트리거 구조 설계
• twd.visit()을 통한 실제 라우팅 경로 제어로 Mock Provider 생성 없이 실제 컴포넌트 트리와 상태 공유
• SPA 특성상 유지되는 Query Cache로 인한 테스트 간 간섭 문제를 QueryClient 모듈 레벨 싱글톤화 및 beforeEach 시점의 clear() 호출로 해결
• twd-relay WebSocket 프로토콜을 통해 Headless Chrome 부팅 과정 없이 실제 렌더링된 DOM 결과값만 텍스트로 반환받는 효율적 피드백 루프 구축