javascript-typescript-jest

テスト構造

• テストファイルには .test.ts または .test.js のサフィックスを付けてください
• テストファイルは、テスト対象のコードの隣、または専用の __tests__ ディレクトリに配置してください
• 期待される動作を説明する、説明的なテスト名を使用してください
• ネストされた describe ブロックを使用して、関連するテストを整理してください
• 次のパターンに従ってください: describe('Component/Function/Class', () => { it('should do something', () => {}) })

効果的なモック

• 外部依存関係（API、データベースなど）をモックして、テストを分離してください
• モジュールレベルのモックには jest.mock() を使用してください
• 特定の関数のモックには jest.spyOn() を使用してください
• モックの動作を定義するには mockImplementation() または mockReturnValue() を使用してください
• afterEach で jest.resetAllMocks() を使用して、テスト間でモックをリセットしてください

非同期コードのテスト

• テストでは常に promise を返すか、async/await 構文を使用してください
• promise には resolves/rejects マッチャーを使用してください
• 遅いテストには jest.setTimeout() で適切なタイムアウトを設定してください

スナップショットテスト

• 頻繁に変更されない UI コンポーネントや複雑なオブジェクトには、スナップショットテストを使用してください
• スナップショットは小さく、焦点を絞ったものにしてください
• コミットする前に、スナップショットの変更を注意深く確認してください

React コンポーネントのテスト

• コンポーネントのテストには、Enzyme よりも React Testing Library を使用してください
• ユーザーの動作とコンポーネントのアクセシビリティをテストしてください
• アクセシビリティロール、ラベル、またはテキストコンテンツで要素をクエリしてください
• より現実的なユーザー操作には、fireEvent よりも userEvent を使用してください

一般的な Jest マッチャー

• 基本: expect(value).toBe(expected)、expect(value).toEqual(expected)
• 真偽値: expect(value).toBeTruthy()、expect(value).toBeFalsy()
• 数値: expect(value).toBeGreaterThan(3)、expect(value).toBeLessThanOrEqual(3)
• 文字列: expect(value).toMatch(/pattern/)、expect(value).toContain('substring')
• 配列: expect(array).toContain(item)、expect(array).toHaveLength(3)
• オブジェクト: expect(object).toHaveProperty('key', value)
• 例外: expect(fn).toThrow()、expect(fn).toThrow(Error)
• モック関数: expect(mockFn).toHaveBeenCalled()、expect(mockFn).toHaveBeenCalledWith(arg1, arg2)