javascript-typescript-jest

作成者: github

Jestテストのベストプラクティス:JavaScriptおよびTypeScriptプロジェクトにおけるモック、非同期処理、Reactパターン。テストは説明的な名前を付けてネストされたdescribeブロックで整理し、.test.ts / .test.jsファイルをソースコードと並べて配置するか、__tests__ディレクトリに配置します。外部依存関係はjest.mock()、jest.spyOn()、mockImplementation()でモック化し、テスト間でリセットして状態の漏洩を防ぎます。非同期コードはPromise、async/await、resolves/rejectsマッチャーで処理し、設定...

npx skills add https://github.com/github/awesome-copilot --skill javascript-typescript-jest

Test Structure

  • Name test files with .test.ts or .test.js suffix
  • Place test files next to the code they test or in a dedicated __tests__ directory
  • Use descriptive test names that explain the expected behavior
  • Use nested describe blocks to organize related tests
  • Follow the pattern: describe('Component/Function/Class', () => { it('should do something', () => {}) })

Effective Mocking

  • Mock external dependencies (APIs, databases, etc.) to isolate your tests
  • Use jest.mock() for module-level mocks
  • Use jest.spyOn() for specific function mocks
  • Use mockImplementation() or mockReturnValue() to define mock behavior
  • Reset mocks between tests with jest.resetAllMocks() in afterEach

Testing Async Code

  • Always return promises or use async/await syntax in tests
  • Use resolves/rejects matchers for promises
  • Set appropriate timeouts for slow tests with jest.setTimeout()

Snapshot Testing

  • Use snapshot tests for UI components or complex objects that change infrequently
  • Keep snapshots small and focused
  • Review snapshot changes carefully before committing

Testing React Components

  • Use React Testing Library over Enzyme for testing components
  • Test user behavior and component accessibility
  • Query elements by accessibility roles, labels, or text content
  • Use userEvent over fireEvent for more realistic user interactions

Common Jest Matchers

  • Basic: expect(value).toBe(expected), expect(value).toEqual(expected)
  • Truthiness: expect(value).toBeTruthy(), expect(value).toBeFalsy()
  • Numbers: expect(value).toBeGreaterThan(3), expect(value).toBeLessThanOrEqual(3)
  • Strings: expect(value).toMatch(/pattern/), expect(value).toContain('substring')
  • Arrays: expect(array).toContain(item), expect(array).toHaveLength(3)
  • Objects: expect(object).toHaveProperty('key', value)
  • Exceptions: expect(fn).toThrow(), expect(fn).toThrow(Error)
  • Mock functions: expect(mockFn).toHaveBeenCalled(), expect(mockFn).toHaveBeenCalledWith(arg1, arg2)

githubのその他のスキル

console-rendering
github
Goにおける構造体タグベースのコンソールレンダリングシステムの使用手順
official
acquire-codebase-knowledge
github
ユーザーが既存のコードベースのマッピング、ドキュメント化、またはオンボーディングを明示的に依頼した場合にこのスキルを使用します。「このコードベースをマッピングして」「ドキュメント化して…」といったプロンプトで起動します。
official
acreadiness-assess
github
Run the AgentRC readiness assessment on the current repository and produce a static HTML dashboard at reports/index.html. Wraps `npx github:microsoft/agentrc…
official
acreadiness-generate-instructions
github
AgentRCのinstructionsコマンドを使用して、カスタマイズされたAIエージェント指示ファイルを生成します。.github/copilot-instructions.md(デフォルト、VS CodeのCopilotに推奨)を出力します…
official
acreadiness-policy
github
ユーザーがAgentRCポリシーを選択、作成、または適用するのを支援します。ポリシーは、関連性のないチェックを無効にしたり、影響度/レベルを上書きしたり、設定することで、レディネススコアリングをカスタマイズします。
official
add-educational-comments
github
コードファイルに教育的なコメントを追加し、効果的な学習リソースに変換します。説明の深さとトーンを、設定可能な3つの知識レベル(初心者、中級、上級)に適応させます。ファイルが提供されない場合は自動的にリクエストし、番号付きリストで素早く選択できます。教育的なコメントのみを使用してファイルを最大125%拡張します(ハードリミット:新しい行400行、1,000行を超えるファイルは300行)。ファイルのエンコーディング、インデントスタイル、構文の正確性を保持し、...
official
adobe-illustrator-scripting
github
ExtendScript(JavaScript/JSX)を使用して、Adobe Illustratorの自動化スクリプトの作成、デバッグ、最適化を行います。スクリプトを作成または修正して操作する際に使用します…
official
agent-governance
github
宣言的なポリシー、意図分類、および監査証跡により、AIエージェントのツールアクセスと動作を制御します。構成可能なガバナンスポリシーは、許可/ブロックされたツール、コンテンツフィルター、レート制限、承認要件を定義し、コードではなく設定として保存されます。セマンティック意図分類は、パターンベースのシグナルを使用して、ツール実行前に危険なプロンプト(データ流出、権限昇格、プロンプトインジェクション)を検出します。ツールレベルのガバナンスデコレーターは、関数にポリシーを適用します...
official