feat: Add vitest.

.claude/settings.local.json

@@ -27,7 +27,9 @@
       "Bash(yarn eslint:*)",
       "Bash(npx eslint:*)",
       "WebFetch(domain:www.npmjs.com)",
-      "Bash(ls:*)"
+      "Bash(ls:*)",
+      "Bash(tsc:*)",
+      "Bash(yarn test:*)"
     ],
     "deny": []
   }

.github/workflows/build.yml

@@ -1,29 +1,29 @@
 name: Build
 
-on: [push]
+on:
+  push:
+    branches: [main]
+    paths-ignore:
+      - "pages/**"
+      - ".github/workflows/pages.yml"
+      - ".github/workflows/update-data.yml"
+      - "**.md"
 
 jobs:
-  main:
+  build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
         with:
-          submodules: 'true'
-      - name: Use Node.js
+          submodules: "true"
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
-          cache: 'yarn'
-      - name: Restore cache for node_modules
-        uses: actions/cache@v4
-        with:
-          path: './node_modules'
-          key: ${{ runner.os }}-node-package-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-node-package-
-      - name: yarn install and build
-        run: |
-          yarn install
-          yarn build
+          node-version: "lts/*"
+          cache: "yarn"
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build extension
+        run: yarn build
         env:
           CI: true

.github/workflows/pages.yml

@@ -7,12 +7,10 @@ name: Deploy Next.js site to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches:
-      - main
-      - 'ci/*'
+    branches: [main]
     paths:
-      - 'pages/**'
-      - '.github/workflows/pages.yml'
+      - "pages/**"
+      - ".github/workflows/pages.yml"
   # Allows you to run this workflow from another workflow
   workflow_call:
   # Allows you to run this workflow manually from the Actions tab
@@ -27,7 +25,7 @@ permissions:
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: 'pages'
+  group: "pages"
   cancel-in-progress: false
 
 defaults:
@@ -61,7 +59,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: "lts/*"
           cache: ${{ steps.detect-package-manager.outputs.manager }}
           cache-dependency-path: ./pages/yarn.lock
       - name: Setup Pages
@@ -85,7 +83,7 @@ jobs:
       - name: Restore cache for node_modules
         uses: actions/cache@v4
         with:
-          path: './pages/node_modules'
+          path: "./pages/node_modules"
           key: ${{ runner.os }}-node-package-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-node-package-

.github/workflows/release.yml

@@ -3,29 +3,29 @@ name: Release
 on:
   push:
     tags:
-      - '*'
+      - "*"
 jobs:
   main:
     runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4
         with:
-          submodules: 'true'
-      - name: Use Node.js
+          submodules: "true"
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
-          cache: 'yarn'
-      - name: yarn install and build
+          node-version: "lts/*"
+          cache: "yarn"
+      - name: Install dependencies and build
         run: |
-          yarn install
+          yarn install --frozen-lockfile
           yarn build
         env:
           CI: true
-      - name: archive
+      - name: Create zip package
         run: |
-          zip -r chrome-ext.zip dist/
+          yarn zip
       - uses: ncipollo/release-action@v1
         with:
-          artifacts: 'chrome-ext.zip'
+          artifacts: "build/*.zip"

.github/workflows/test.yml

@@ -0,0 +1,45 @@
+name: Test
+
+on:
+  push:
+    branches: [main]
+    paths-ignore:
+      - "pages/**"
+      - "**.md"
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run lint
+        run: yarn lint
+
+      - name: Run TypeScript type check
+        run: yarn tsc -b
+
+      - name: Run tests
+        run: yarn test --run
+
+      - name: Run tests with coverage
+        run: yarn test:coverage --run
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v5
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: false

.github/workflows/update-data.yml

@@ -1,7 +1,7 @@
 name: Update Data
 on:
   schedule:
-    - cron: '0 3 * * *' # 毎日12:00 JST (3:00 UTC)に実行
+    - cron: "0 3 * * *" # 毎日12:00 JST (3:00 UTC)に実行
   workflow_dispatch:
 
 defaults:
@@ -14,13 +14,13 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          submodules: 'true'
+          submodules: "true"
       - uses: actions/setup-node@v4
         with:
-          node-version: 23
-          cache: 'yarn'
+          node-version: "lts/*"
+          cache: "yarn"
       - name: Install dependencies
-        run: yarn add @google-analytics/data
+        run: yarn install --frozen-lockfile
       - name: Fetch GA data
         env:
           GA_SERVICE_ACCOUNT_KEY: ${{ secrets.GA_SERVICE_ACCOUNT_KEY }}

CLAUDE.md

@@ -7,6 +7,9 @@
 - `yarn dev` - Viteを使用した開発モードの開始
 - `yarn build` - 拡張機能のビルド（TypeScriptコンパイル + Viteビルドを実行）
 - `yarn lint` - ESLintを実行してコード品質をチェック
+- `yarn test` - Vitestを使用したテストの実行
+- `yarn test:ui` - VitestのUIモードでテストを実行
+- `yarn test:coverage` - テストカバレッジを測定
 - `yarn zip` - ビルドされたdistフォルダから配布可能な拡張機能のzipファイルを作成
 
 ## アーキテクチャ概要
@@ -33,6 +36,10 @@
   - `ui/` - 再利用可能なUIコンポーネント（Radix UIを使用）
 - **Services** (`src/services/`) - 設定管理、ストレージ、分析、ページアクション処理を含むビジネスロジックとユーティリティ
 - **Hooks** (`src/hooks/`) - 状態管理とChrome拡張機能APIのためのカスタムReactフック
+- **Testing** (`src/test/`) - テスト環境のセットアップとモック設定
+  - `setup.ts` - Vitestのセットアップファイル（Chrome拡張機能APIのモック、jsdom環境設定）
+  - `**/*.test.{ts,tsx}` - コンポーネントとサービスのユニットテスト
+  - `**/*.spec.{ts,tsx}` - 統合テストとE2Eテスト
 
 **主要機能:**
 
@@ -49,7 +56,8 @@
 - **フォームとバリデーション**: react-hook-form and zod
 - **スタイリング**: CSS Modules + Tailwind CSS(ver.3)
 - **状態管理**: React hooks with Chrome extension storage APIs
-- **テスト**: ESLint for code quality
+- **テスト**: Vitest with jsdom for unit/integration testing
+- **コード品質**: ESLint for code quality
 
 ### プロジェクト構造の注意事項
 
@@ -58,3 +66,11 @@
 - 拡張機能は`public/_locales/`のロケールファイルによる国際化をサポート
 - コンテンツスクリプトのスタイリング分離にShadow DOMを使用
 - 堅牢なXPathセレクター生成のためのRobula+アルゴリズムを実装（`src/lib/robula-plus/`）
+
+### テスト環境
+
+- **テストフレームワーク**: Vitest with jsdom環境
+- **テスト設定**: `vitest.config.ts`で設定、`src/test/setup.ts`でモック設定
+- **Chrome拡張機能モック**: `chrome.storage`、`chrome.runtime`、`chrome.tabs`等のAPIをモック
+- **テストファイル**: `src/**/*.{test,spec}.{ts,tsx}`パターンで配置
+- **カバレッジ**: `yarn test:coverage`でテストカバレッジを測定可能