Vitestのブラウザモードを使えるようにし、StorybookのVitest統合を使う

.github/workflows/test.yml

@@ -56,33 +56,9 @@ jobs:
       - name: Setup environment
         uses: ./.github/actions/setup-environment
 
-      - run: npm run test:unit
-
-      - name: Setup playwright
-        run: npx playwright install
-      - name: Run Storybook tests
+      - name: Run test
         run: |
-          # .env
-          cp .env.test .env
-
-          # ランダムなポートを使う
-          PORT=$(node -r net -e "server=net.createServer();server.listen(0,()=>{console.log(server.address().port);server.close()})")
-          npx storybook dev --ci --port $PORT &
-
-          # 起動を待つ
-          elapsed=0
-          until curl --output /dev/null --silent --head --fail http://localhost:$PORT; do
-            echo "Waiting for Storybook to start on port $PORT..."
-            sleep 5
-            ((elapsed+=5))
-            if [ "$elapsed" -ge "60" ]; then
-              echo "Timed out waiting for Storybook to start."
-              exit 1
-            fi
-          done
-
-          # テスト
-          npm run test:storybook -- --url "http://127.0.0.1:$PORT"
+          npm run test:unit
 
   # e2e テスト
   e2e-test:
@@ -125,9 +101,6 @@ jobs:
 
       - name: Setup
         run: |
-          # playwright
-          npx playwright install
-
           # run.exe
           chmod +x ${{ steps.download-engine.outputs.run_path }}
 

.storybook/main.ts

@@ -1,14 +1,17 @@
 import type { StorybookConfig } from "@storybook/vue3-vite";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
     "@storybook/addon-themes",
+    "@storybook/experimental-addon-test",
   ],
+
   framework: {
     name: "@storybook/vue3-vite",
     options: {

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import { beforeAll } from "vitest";
+import { setProjectAnnotations } from "@storybook/vue3";
+import * as previewAnnotations from "./preview";
+
+const annotations = setProjectAnnotations([previewAnnotations]);
+
+beforeAll(annotations.beforeAll);

README.md

@@ -114,27 +114,32 @@ fork したリポジトリで Actions を ON にし、workflow_dispatch で`buil
 
 ### 単体テスト
 
+`./tests/unit/` 以下にあるテストと、Storybookのテストを実行します。
+
+> [!NOTE]  
+> `./tests/unit` 下のテストは、ファイル名によってテストを実行する環境が変化します。
+>
+> - `.node.spec.ts`：Node.js 環境
+> - `.browser.spec.ts`：ブラウザ環境（実機）
+> - `.spec.ts`：ブラウザ環境（happy-domによるエミュレート）
+
 ```bash
 npm run test:unit
 npm run test-watch:unit # 監視モード
 npm run test:unit -- --update # スナップショットの更新
 ```
 
-### コンポーネントのテスト
-
-Storybook を使ってコンポーネントのテストを行います。
+また、以下のコマンドでテストのダッシュボードを表示できます：
 
 ```bash
-npm run storybook # 先に Storybook を起動
-npm run test:storybook
-npm run test-watch:storybook # 監視モード
+npm run test-ui:unit
 ```
 
 ### ブラウザ End to End テスト
 
 Electron の機能が不要な、UI や音声合成などの End to End テストを実行します。
 
-> **Note**
+> [!NOTE]
 > 一部のエンジンの設定を書き換えるテストは、CI(Github Actions)上でのみ実行されるようになっています。
 
 ```bash