技能 javascript-testing-patterns
🧪

javascript-testing-patterns

安全

掌握 JavaScript 測試模式

也可從以下取得: wshobson

編寫測試並不容易。此技能提供使用 Jest、Vitest 和 Testing Library 進行單元、整合和端到端測試的可靠模式和範例，讓您能快速建構可靠的測試套件。

支援: Claude Codex Code(CC)
📊 71 充足
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「javascript-testing-patterns」。 為一個 add 函式編寫單元測試，該函式接收兩個數字並返回它們的總和

預期結果:

  • ```typescript
  • import { describe, it, expect } from 'vitest';
  • import { add } from './calculator';
  •  
  • describe('add', () => {
  • it('should add two positive numbers', () => {
  • expect(add(2, 3)).toBe(5);
  • });
  •  
  • it('should add negative numbers', () => {
  • expect(add(-2, -3)).toBe(-5);
  • });
  •  
  • it('should handle zero', () => {
  • expect(add(0, 5)).toBe(5);
  • });
  • });
  • ```

正在使用「javascript-testing-patterns」。 為使用者表單元件建立測試，驗證電子郵件並提交資料

預期結果:

  • ```typescript
  • import { render, screen, fireEvent } from '@testing-library/react';
  • import { describe, it, expect, vi } from 'vitest';
  • import { UserForm } from './UserForm';
  •  
  • describe('UserForm', () => {
  • it('should show validation error for invalid email', () => {
  • render(<UserForm onSubmit={vi.fn()} />);
  • fireEvent.change(screen.getByTestId('email-input'), {
  • target: { value: 'invalid-email' }
  • });
  • fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
  • expect(screen.getByText('Invalid email')).toBeInTheDocument();
  • });
  •  
  • it('should call onSubmit with form data', () => {
  • const onSubmit = vi.fn();
  • render(<UserForm onSubmit={onSubmit} />);
  • fireEvent.change(screen.getByTestId('name-input'), {
  • target: { value: 'John Doe' }
  • });
  • fireEvent.change(screen.getByTestId('email-input'), {
  • target: { value: 'john@example.com' }
  • });
  • fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
  • expect(onSubmit).toHaveBeenCalledWith({
  • name: 'John Doe',
  • email: 'john@example.com'
  • });
  • });
  • });
  • ```

安全審計

安全
v1 • 2/25/2026

All 145 static findings are false positives. The detected patterns exist only in code examples within markdown documentation files, not in executable code. The skill provides educational content about testing patterns with code samples demonstrating legitimate testing practices including mock setup, API testing, email service testing, and database integration testing. No executable code, no security risks.

2
已掃描檔案
1,063
分析行數
0
發現項
1
審計總數
未發現安全問題
審計者: claude

品質評分

38
架構
100
可維護性
87
內容
31
社群
100
安全
91
規範符合性

你能建構什麼

新專案測試設定

開發者啟動新的 JavaScript/TypeScript 專案時，需要從零開始建立測試基礎設施，包含正確的框架設定、目錄結構和 CI/CD 整合。

為現有程式碼新增測試

維護舊版或未測試應用程式的團隊，需要逐步為現有函式、API 和元件引入測試，同時不破壞現有功能。

改善測試涵蓋率

開發者希望提高程式碼涵蓋率並改善測試品質，學習進階 Mock 模式、Fixture Factory 和整合測試策略。

試試這些提示

基礎單元測試 
為一個 [描述函式功能] 的函式編寫單元測試。包含成功情境和錯誤處理的測試。
使用 Testing Library 的元件測試 
為一個 [描述元件行為] 的元件建立 React Testing Library 測試。測試使用者互動、表單提交和錯誤狀態。
API 整合測試 
為一個 [描述端點功能] 的 REST API 端點編寫整合測試。使用 supertest 包含資料庫設定、認證和清理。
Mock 外部相依 
為 [服務/類別] 建立測試，Mock 外部相依，包含 [列出相依]。使用依賴注入和 vi.mock 模式。

最佳實務

  • 在每個測試中遵循 Arrange-Act-Assert (AAA) 模式，以確保清晰的結構和可讀性
  • 測試行為和使用者互動而非實作細節，使測試更能適應重構
  • 使用 beforeEach 和 afterEach hooks 進行設定和清理，保持測試隔離並防止污染

避免

  • 測試實作細節如內部函式呼叫或元件狀態，而非可觀察的行為
  • 編寫脆弱的測試，在程式碼重構但行為不變時會失敗
  • 建立過於複雜的測試設定，使用過多 Mock 使測試難以理解和維護

常見問題

我應該使用 Jest 還是 Vitest？
Vitest 更快且與 Vite 專案配合更好。Jest 更成熟且採用更廣泛。如果您使用 Vite 請選擇 Vitest，否則 Jest 是安全的選擇。
如何測試使用外部 API 的程式碼？
使用 vi.mock() 或依賴注入來 Mock 外部 API 呼叫。這能讓測試保持快速、可靠且獨立於外部服務。
我應該以多少測試涵蓋率為目標？
一般目標是 80% 涵蓋率。專注於涵蓋關鍵業務邏輯和錯誤路徑，而非追求 100% 涵蓋率。
我應該測試私有方法嗎？
不需要。僅測試公開行為。如果私有方法需要測試，考慮將它們重構為單獨的可測試單元。
如何處理資料庫測試？
使用獨立的測試資料庫並在測試間使用 beforeEach 清理資料。考慮使用交易以進行更快的回滾，而非截斷資料表。
單元測試和整合測試有什麼區別？
單元測試隔離單個函式或類別。整合測試驗證多個元件（包含資料庫和 API）能否正常協同工作。

開發者詳情

作者

sickn33

授權

MIT

儲存庫

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/javascript-testing-patterns

引用

main

檔案結構

📁 resources/

📄 implementation-playbook.md

📄 SKILL.md