此技能提供現成可用的 Jest 測試模式,包括工廠函數、自訂渲染工具和模擬策略,幫助開發人員遵循 TDD 原則撰寫可維護、DRY 的測試。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「testing-patterns」。 建立用於 user 資料的工廠函數
預期結果:
```typescript
interface User {
id: string;
name: string;
email: string;
role: 'admin' | 'user';
}
const getMockUser = (overrides?: Partial<User>): User => ({
id: '123',
name: 'John Doe',
email: 'john@example.com',
role: 'user',
...overrides,
});
```
正在使用「testing-patterns」。 示範自訂渲染函數
預期結果:
```typescript
export const renderWithTheme = (ui: React.ReactElement) => {
return render(
<ThemeProvider>{ui}</ThemeProvider>
);
};
```
正在使用「testing-patterns」。 我應該如何組織我的測試?
預期結果:
使用 describe 區塊將相關測試分組:describe('ComponentName', () => { describe('Rendering', () => {...}); describe('User interactions', () => {...}); describe('Edge cases', () => {...}); });
安全審計
安全Security review completed. All 42 static findings are false positives triggered by the static analyzer misinterpreting: (1) markdown code formatting backticks as shell commands, (2) TypeScript generics like Partial<X> as cryptographic patterns, and (3) the word 'APIs' as network reconnaissance. The skill is legitimate Jest testing documentation with no security concerns.
品質評分
你能建構什麼
設定測試基礎設施
建立自訂渲染函數和工廠工具,將元件與所需的 providers(如 ThemeProvider)包裝在一起,減少每個測試中的樣板程式碼。
撰寫可維護的單元測試
使用工廠函數產生一致的測試資料,使測試更容易閱讀、維護和更新,當資料結構變更時。
遵循 TDD 方法論
應用紅-綠-重構循環,先撰寫失敗的測試,然後撰寫最少的程式碼來通過,確保測試驅動開發。
試試這些提示
幫我設定一個 React 元件的基本測試檔案。示範如何建立一個自訂渲染函數,將元件與 ThemeProvider 包裝在一起。
建立一個名為 getMockUser 的工廠函數,回傳一個具有 id、name、email 和 role 預設值的 user 物件。示範如何使用 Partial 類型覆寫特定屬性。
示範如何在 Jest 中模擬像 'utils/analytics' 這樣的模組。包括如何在測試中存取 mock 以及如何模擬回傳值。
帶我完成新增功能的 TDD 工作流程。從撰寫失敗的測試開始,然後示範通過測試的最少實作。
最佳實務
- 始終使用工廠函數處理屬性和資料,以保持測試 DRY 和一致
- 透過公開 API 測試行為,而非實作細節
- 使用描述性的測試名稱說明正在測試的行為
避免
- 避免測試模擬行為而非實際元件行為
- 不要在測試之間重複測試資料 - 改用工廠函數
- 避免測試可能在重構時變更的實作細節