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

* Migrate: storybookのmigrationを実行

* Add: browserモードで動かすように

* Delete: vitest-exampleを削除

* Add: vitestにstorybookを統合

* Delete: test:storybook周りを削除

* Add: ui modeのscriptを追加

* Change: headlessにする

* Add: コメントを追加

* Fix: postinstall周りを修正

* Fix: vite.config.mtsの型エラーを修正

* Fix: Chromiumを指定

* Fix: スタイルを修正

* Change: ubuntuでテストする

* Add: ハックを追加

* Update: playwright/testを更新

* Update: READMEを更新

* Change: test-watch:unit:ui -> test-ui:unit

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>

* Change: headlessで動かすように

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>

* Change: バージョンを固定

Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>

* Update: READMEを更新

* Refactor: workspace周りを整理

* Add: NOTEを追加

* Fix: 日本語を修正

* Change: fnをStoryのargsに動かす

* Add: エラーメッセージを追加

* Delete: 不要そうなパッケージを削除

* Change: もっといい解決方法を使う

* Code: README周りの書き方を変える

* Code: vitest.workspace.mtsを読みやすくする

* Delete: QuasarのVite Pluginを削除

* Delete: Quasarに依存してた場所を削除

* Fix: テストが落ちてるのを修正

* Fix: package-lock.jsonを再構築

* Delete: test-runnerを削除

* Revert: やっぱりQuasarのVite Pluginを足す

* Fix: $qが欠けてるのを直す

* 差分を減らす・依存ライブラリを減らす

---------

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
Co-authored-by: Hiroshiba <Hiroshiba@users.noreply.github.com>
Co-authored-by: Hiroshiba Kazuyuki <kazuyuki_hiroshiba@dwango.co.jp>

.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

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