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)