# 画面設計書 8-Mock Functionsページ

## 概要

本ドキュメントは、JestドキュメントサイトのMock Functionsページについて、画面構成、機能、データフロー、コードリーディングガイドを記述した画面設計書です。

### 本画面の処理概要

Mock FunctionsページはJestにおけるモック関数の使い方を説明するドキュメントページです。jest.fn()によるモック関数の作成、.mockプロパティ、戻り値の設定、モジュールモック、部分モック、モック実装、カスタムマッチャーについて、サンプルコードとともに詳細に解説します。

**業務上の目的・背景**：テストにおいて、外部依存（API、データベース、外部モジュールなど）をモックすることは、テストの独立性と再現性を確保するために重要です。このページでは、Jestが提供する強力なモック機能を理解し、効果的にテストを書けるようにします。

**画面へのアクセス方法**：
- サイドバーナビゲーションから選択
- 直接URL `/docs/mock-functions` にアクセス

**主要な操作・処理内容**：
1. Using a mock functionセクションでjest.fn()の基本的な使い方の確認
2. .mock propertyセクションでモック関数の呼び出し履歴の確認方法
3. Mock Return Valuesセクションで戻り値の設定方法の確認
4. Mocking Modulesセクションでモジュール全体のモック方法の確認
5. Mocking Partialsセクションで部分モックの方法の確認
6. Mock Implementationsセクションでモック実装の設定方法の確認
7. Mock Namesセクションでモック関数の命名方法の確認
8. Custom Matchersセクションでモック用カスタムマッチャーの確認
9. サイドバーナビゲーションで他のドキュメントページへ遷移

**画面遷移**：
- 遷移先：Manual Mocksページ、Mock Function APIページ、Expect APIリファレンスページ
- 遷移元：他のドキュメントページ

**権限による表示制御**：なし（全ユーザーに同一コンテンツを表示）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 14 | jest-mock | 主機能 | jest.fn()、spyOn()等のモック関数作成方法 |
| 10 | expect | 補助機能 | モック関数のアサーション方法（toHaveBeenCalled等） |
| 4 | jest-runtime | 補助機能 | jest.mock()によるモジュールモックの仕組み |

## 画面種別

ドキュメントページ

## URL/ルーティング

- URL: `/docs/mock-functions`
- ルーティング: `docs/MockFunctions.md`（Docusaurusによる自動変換）

## 入出力項目

該当なし（Markdownコンテンツの静的表示）

## 表示項目

| セクション | 表示内容 | データソース |
|------------|----------|--------------|
| タイトル | "Mock Functions" | Markdown Front Matter |
| 導入文 | モック関数の概要説明 | 静的コンテンツ |
| Using a mock function | jest.fn()の基本的な使い方 | 静的コンテンツ |
| .mock property | mock.calls、mock.results等 | 静的コンテンツ |
| Mock Return Values | mockReturnValue、mockReturnValueOnce | 静的コンテンツ |
| Mocking Modules | jest.mock()によるモジュールモック | 静的コンテンツ |
| Mocking Partials | 部分モック（jest.requireActual） | 静的コンテンツ |
| Mock Implementations | mockImplementation、mockImplementationOnce | 静的コンテンツ |
| Mock Names | mockName() | 静的コンテンツ |
| Custom Matchers | toHaveBeenCalled等のモック用マッチャー | 静的コンテンツ |
| サイドバー | ドキュメントナビゲーション | sidebars.json |

## イベント仕様

### 1-サイドバーナビゲーション

サイドバーのリンクをクリックすると、対応するドキュメントページへ遷移します。

### 2-内部リンククリック

| リンク名 | 遷移先 |
|----------|--------|
| manual mock | /docs/manual-mocks（ManualMocks.md） |
| .mockName() | /docs/mock-function-api#mockfnmocknamename |
| reference docs | /docs/expect-api（ExpectAPI.md） |

## データベース更新仕様

該当なし（静的サイトのため、データベース操作は発生しない）

## メッセージ仕様

該当なし（フォーム入力や処理結果のメッセージは存在しない）

## 例外処理

該当なし（静的Markdownコンテンツのため、例外処理は不要）

## 備考

- Docusaurusによりdocs/MockFunctions.mdから自動生成
- Front Matterのidが`mock-functions`のため、URLは`/docs/mock-functions`
- コードブロックにtitleオプションが使用されている（例：title="forEach.js"）
- axiosを使用したAPI呼び出しのモック例が含まれている

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

Markdownドキュメントの構造とFront Matterを把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | MockFunctions.md | `docs/MockFunctions.md` | Front Matter（id: mock-functions, title: Mock Functions） |

**読解のコツ**: ドキュメントは8つの主要セクションで構成されており、モック関数の基本から応用まで段階的に説明されています。

#### Step 2: セクション構造を理解する

各セクションで説明されている機能を把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | MockFunctions.md | `docs/MockFunctions.md` | 各セクションの構造（1-329行） |

**主要セクション**:
- **10-44行目**: Using a mock function（jest.fn()の基本）
- **46-91行目**: .mock property（呼び出し履歴）
- **93-124行目**: Mock Return Values（戻り値設定）
- **127-163行目**: Mocking Modules（モジュールモック）
- **165-199行目**: Mocking Partials（部分モック）
- **201-271行目**: Mock Implementations（モック実装）
- **273-283行目**: Mock Names（命名）
- **285-328行目**: Custom Matchers（カスタムマッチャー）

#### Step 3: 関連パッケージを理解する

jest-mockパッケージの構造を把握します（実装詳細の参照用）。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | jest-mock | `packages/jest-mock/src/index.ts` | モック関数の実装 |
| 3-2 | jest-runtime | `packages/jest-runtime/src/index.ts` | jest.mock()の実装 |

**読解のコツ**: jest-mockがモック関数の作成と管理を担当し、jest-runtimeがモジュールモックの解決を担当しています。

### プログラム呼び出し階層図

```
Docusaurus Build Process
    │
    ├─ docs/MockFunctions.md
    │      │
    │      ├─ Front Matter解析
    │      │      └─ id: mock-functions → URL: /docs/mock-functions
    │      │
    │      ├─ Markdown → HTML変換
    │      │      ├─ Using a mock function セクション
    │      │      ├─ .mock property セクション
    │      │      ├─ Mock Return Values セクション
    │      │      ├─ Mocking Modules セクション
    │      │      ├─ Mocking Partials セクション
    │      │      ├─ Mock Implementations セクション
    │      │      ├─ Mock Names セクション
    │      │      └─ Custom Matchers セクション
    │      │
    │      └─ Code Block処理
    │             └─ title属性 → ファイル名表示
    │
    └─ sidebars.json
           └─ サイドバーナビゲーション生成
```

### データフロー図

```
[入力]                    [処理]                    [出力]

MockFunctions.md ───────▶ Markdown Parser ────────▶ HTML コンテンツ
                                │
                                ├─ コードブロック処理
                                │      ├─ シンタックスハイライト
                                │      └─ title属性処理
                                │
                                └─ 内部リンク処理
                                       └─ ドキュメント間リンク

sidebars.json ──────────▶ Sidebar Generator ──────▶ サイドバーUI
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| MockFunctions.md | `docs/MockFunctions.md` | ドキュメント | Mock Functionsページのコンテンツ |
| sidebars.json | `website/sidebars.json` | 設定 | サイドバーナビゲーション定義 |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurus全体設定 |
| jest-mock (package) | `packages/jest-mock/` | ソース | モック関数実装パッケージ |
| jest-runtime (package) | `packages/jest-runtime/` | ソース | モジュールモック実装 |
| ManualMocks.md | `docs/ManualMocks.md` | ドキュメント | Manual Mocksドキュメント（参照先） |
| MockFunctionAPI.md | `docs/MockFunctionAPI.md` | ドキュメント | Mock Function APIリファレンス（参照先） |
| ExpectAPI.md | `docs/ExpectAPI.md` | ドキュメント | Expect APIリファレンス（参照先） |
