svelte-testing

Svelte-testing 是一項專業技能，旨在協助開發人員編寫、偵錯並維護現代 Svelte 5 應用程式的高品質測試。它結合了 vitest-browser-svelte 框架與 Playwright，確保測試在真實瀏覽器環境中運行，有效彌補單元測試與生產環境行為之間的差距。此技能非常適合在 SvelteKit 環境中工作的軟體工程師，他們需要實施強大且盡量減少 Mock 的測試策略，以涵蓋客戶端互動與伺服器端邏輯。

• 針對使用 locators 如 page.getBy*() 進行客戶端組件測試的專家級模式。

• 針對 SvelteKit API 路由、伺服器 Hook 與伺服器端渲染 (SSR) 驗證的深入整合指南。

• 實作客戶端與伺服器端對齊策略，使用真實的 FormData、Request 物件與 TypeScript 契約，以防止整合時的不匹配。

• 針對 Svelte 5 runes 的進階測試，包括正確使用 untrack() 處理 $derived 狀態值。

• 以無障礙為優先的測試工作流程，強調螢幕閱讀器相容性與鍵盤導航。

• 完整支援 E2E 測試場景，包括身份驗證、表單提交與複雜的狀態管理。

• 透過 pnpx sveltest 呼叫 CLI，直接在您的工作流程中列出、搜尋或擷取特定的測試模式。

• 遵循核心原則：優先使用 locators 而非容器，使用真實瀏覽器物件處理資料，並避免手動點擊表單提交，改用 expect.element() 斷言。

• 一致地組織測試檔案：使用 .svelte.test.ts 處理客戶端組件，.ssr.test.ts 處理渲染檢查，以及 server.test.ts 處理 API 路由。

• 將此技能作為文件來源，以解決常見問題，例如 Hydration 錯誤、嚴格模式違規以及瀏覽器測試中的非同步競爭條件。

• 輸入：組件檔案、測試規範與整合需求。輸出：優化且符合標準的測試程式碼，遵循 Svelte 生態系統的最佳實踐。