testing-frontend

此技能為 Claude Code 環境中的前端測試工作流程提供了強大的框架。它專為需要執行可靠組件測試、驗證複雜用戶交互或使用 Vitest、React Testing Library 和 Vue Test Utils 設置健壯測試基礎設施的開發人員而設計。通過專注於行為驅動開發和無障礙優先的查詢策略，此技能確保您的測試反映的是現實世界的用戶場景，而不是脆弱的實現細節。

• 簡化了 React 組件（包括異步數據獲取和表單提交）單元測試和集成測試的創建過程。

• 提供模擬 API 響應的模式，以確保在複雜環境中進行隔離且確定的測試運行。

• 通過 @vue/test-utils 支持 Vue 3 組件測試，包括與 Pinia 等狀態管理庫的深度集成。

• 實施以無障礙為中心的查詢優先級，優先選擇角色（Role）和標籤（Label）而不是測試 ID 等不穩定的選擇器。

• 協助設置和配置 Vitest 環境，以確保與現代打包工具和框架的兼容性。

• 當您需要編寫能夠在 CI/CD 流水線中可靠運行並保持高測試覆蓋率的測試時，請使用此技能。

• 在模擬 API 時，確保提供明確的預期響應，涵蓋成功數據獲取和錯誤狀態處理（如網絡故障或驗證錯誤）。

• 優先使用像 getByRole 或 getByLabelText 這樣的屏幕查詢，以在測試組件的同時提高其無障礙性。

• 此技能旨在作為前端工程師的主要工具，旨在通過在開發周期中捕獲回歸錯誤來減少 Bug。

• 此技能的輸入通常是組件或用戶故事；輸出是符合現代測試模式和框架的完整測試套件。