javascript-testing-patterns
使用 Jest 和 Vitest 撰寫 JavaScript 測試
為 JavaScript 和 TypeScript 應用程式撰寫可靠的測試既耗時又容易出錯。本技能提供可直接使用的測試模式，包括單元測試、整合測試和元件測試，涵蓋模擬、測試 fixtures 和 TDD 工作流程。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「javascript-testing-patterns」。 為建立、更新和刪除使用者的使用者服務撰寫測試
預期結果:
- 建立具有 CRUD 操作的 UserService
- 測試 create() 方法 - 成功情況和重複使用者錯誤
- 測試 update() 方法 - 成功情況和使用者不存在錯誤
- 測試 delete() 方法 - 成功刪除和不存在的使用者
- 使用 beforeEach 重置測試之間的服務狀態
- 為所有邊界情況新增全面的斷言
正在使用「javascript-testing-patterns」。 為從外部端點獲取資料的 API 服務建立測試
預期結果:
- 設定具有 fetchUser 和 createUser 方法的 ApiService
- 使用 vi.fn() 模擬 global.fetch 以進行隔離測試
- 測試成功的使用者獲取（使用模擬回應）
- 測試失敗 API 呼叫的錯誤處理
- 驗證正確的 HTTP 方法和請求主體
正在使用「javascript-testing-patterns」。 為具有使用者輸入和提交的表單撰寫 React 元件測試
預期結果:
- 使用 Testing Library 渲染 UserForm 元件
- 測試輸入欄位渲染和狀態更新
- 驗證 onSubmit 回調以正確的資料觸發
- 使用 fireEvent 模擬使用者互動
- 新增 testid 屬性以實現可靠的元素選擇
安全審計
安全This is a documentation-only skill containing testing pattern examples. The static analyzer flagged 153 patterns, but ALL are FALSE POSITIVEs: weak crypto alerts are triggered by test fixture strings (hashed_password), backtick alerts are TypeScript template literals, path traversal alerts are relative import paths in test code, and the critical heuristic is an invalid combination of benign testing patterns. The previous audit correctly classified this as SAFE.
風險因素
🌐 網路存取 (33)
⚙️ 外部命令 (43)
📁 檔案系統存取 (9)
品質評分
你能建構什麼
測試 React 元件
使用 React Testing Library 撰寫元件測試，以驗證 UI 行為和使用者互動。
測試 API 端點
為 REST API 建立整合測試，包含資料庫 fixtures 和認證流程。
實作 TDD 工作流程
遵循測試驅動開發模式，以高覆蓋率建立可靠的函式和服務。
試試這些提示
為此函式撰寫單元測試，涵蓋正常情況、邊界情況和錯誤條件。
使用 vi.mock 或 jest.mock 為此服務建立測試，模擬外部 API 呼叫。
使用 @testing-library/react 撰寫元件測試，測試使用者互動和渲染。
為此 REST API 端點建立整合測試，包含認證和資料庫清理。
最佳實務
- 使用 AAA 模式：安排輸入、對函式執行操作、斷言預期結果
- 模擬外部相依性以保持測試快速且與真實服務隔離
- 測試行為而非實作細節，使測試對重構具有彈性
避免
- 避免測試經常變動的實作細節
- 不要撰寫依賴執行順序或共用狀態的測試
- 不要在單元測試中跳過模擬慢速外部服務