testing-frontend

testing-frontend 技能是一個專為前端開發人員設計的專業工具組，專注於編寫穩健且以使用者為中心的測試。它簡化了現代 Web 應用程式的單元測試與整合測試之建立及維護，確保複雜 UI 組件的高可靠性。透過強制執行行為測試理念，它幫助開發人員專注於使用者如何與應用程式互動，而不是脆弱的內部實作細節。

• 提供對 Vitest、React Testing Library 和 Vue Test Utils 等測試框架的專家級支援。

• 實作以使用者為中心的測試模式，優先使用 getByRole 和 getByLabelText 等基於可訪問性的查詢，確保程式碼既具備可測試性又具備可訪問性。

• 為 React 和 Vue 組件中的 API 模擬回應與處理非同步操作提供標準化模式。

• 簡化表單測試工作流程，包含使用 user-event 進行使用者互動模擬、表單提交驗證及狀態變更斷言。

• 支援複雜測試場景，例如 React Query 的 QueryClientProvider 包裝器、Vue 的 Pinia 狀態管理以及處理複雜的加載或錯誤狀態。

• 強制執行最佳實踐以避免依賴實作的測試，從而在重構 UI 程式碼時減少維護成本。

• 目標使用者包括構建互動式網頁介面的前端工程師、軟體架構師及 QA 開發人員。

• 當您在實作新 UI 功能、重構組件或編寫前端邏輯的端到端整合測試時，請使用此技能。

• 輸入通常涉及組件程式碼、互動需求或 API 定義；輸出結果為乾淨、可維護且遵循產業標準測試方法論的測試檔案。

• 實際限制包含必須遵守所提供的查詢優先順序層級，確保測試隨著組件樹演進時仍具備可維護性。

• 請務必優先使用語意化查詢而非 test-id，以模擬真實瀏覽器使用模式並提升應用程式的可訪問性覆蓋率。