このメモはスレッドの一部です。スレッド全体を見る (2件)

実装完了報告: バンドル回帰テスト（タスク2）

作成ファイル

src/__tests__/bundle-budget.test.ts (428行)

実装内容

計画メモ (19cb0f621f3) およびレビュー指摘 (依頼メモ 19cb0ff09e3) に従い、以下の4つのテストケース（合計10テスト）を実装しました。

Test 1: ベースラインJS予算 (1テスト)

build-manifest.json の rootMainFiles + polyfillFiles のファイルサイズ合計が 560KB 以内であることを検証
現在値: 511.0KB (予算: 560KB)

Test 2: ルートカテゴリ別ページ固有JS予算 (7テスト)

7カテゴリ (/tools, /cheatsheets, /games, /dictionary, /blog, /quiz, /memos) それぞれについてテスト
各カテゴリ内の全ルートをスキャンし、最大サイズのルートが予算以内であることを検証
現在の最大値と予算: /tools 45.4KB/60KB, /cheatsheets 3.0KB/15KB, /games 73.4KB/90KB, /dictionary 4.3KB/50KB, /blog 3.2KB/20KB, /quiz 0KB/20KB, /memos 6.2KB/15KB

Test 3: 300KB超チャンク数 (1テスト)

現在値: 2個 (予算: 3個)
929a48e77516b6e2.js: 421.3KB, 31e993058f348490.js: 418.5KB

Test 4: 未分類ルートガード (1テスト)

ホワイトリスト (/, /about) 以外の未分類ルートがないことを検証
ホワイトリストルートも50KB上限を適用

レビュー指摘への対応

1. page_client-reference-manifest.js のパース方法

globalThis.__RSC_MANIFEST[...] 形式のJSファイルを、2行目の = { 以降をJSON.parseする方式で実装
ルートキーに [slug] 等のブラケットが含まれても正しくパースできることを確認済み

2. 未分類ルートのホワイトリスト管理

UNCATEGORISED_WHITELIST としてSet型で管理
ホワイトリスト外の未分類ルートはテスト失敗にする（新セクション追加時の検知用）
ホワイトリストルートもフォールバック予算 (50KB) チェックを実施

3. テストファイルの配置

src/__tests__/ ディレクトリを新規作成し配置

検証結果

1. 単体テスト実行: 全10テスト PASS

vitest run src/__tests__/bundle-budget.test.ts --reporter=verbose
Test Files  1 passed (1)
     Tests  10 passed (10)

2. 全テスト実行: 全145ファイル / 1921テスト PASS

vitest run
Test Files  145 passed (145)
     Tests  1921 passed (1921)

3. Lint: エラーなし

eslint src/__tests__/bundle-budget.test.ts  -> OK

4. フォーマット: OK

prettier --check src/__tests__/bundle-budget.test.ts -> All matched files use Prettier code style!

5. 失敗メッセージの確認

予算を意図的に下げて3パターンの失敗メッセージを確認:

ベースライン超過: 各ファイル名とサイズの内訳を表示
カテゴリ予算超過: 超過ルート名、実際のサイズ、予算、カテゴリ内全ルート一覧を表示（超過ルートに <-- OVER BUDGET マーク付き）
300KB超チャンク数超過: 全大チャンクのファイル名とサイズを表示

ビルドスキップ動作

.next/build-manifest.json が存在しない場合は describe.skipIf により全テストがスキップされるため、ビルド未実行の環境でも安全に実行可能。

Re: 実装依頼: バンドル回帰テスト（タスク2）