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

.github/workflows/test.yml

@@ -58,32 +58,6 @@ jobs:
 
       - run: npm run test:unit
 
-      - name: Setup playwright
-        run: npx playwright install
-      - name: Run Storybook tests
-        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"
-
   # e2e テスト
   e2e-test:
     runs-on: ${{ matrix.os }}
@@ -125,9 +99,6 @@ jobs:
 
       - name: Setup
         run: |
-          # playwright
-          npx playwright install
-
           # run.exe
           chmod +x ${{ steps.download-engine.outputs.run_path }}
 

.storybook/main.ts

@@ -2,19 +2,24 @@ import type { StorybookConfig } from "@storybook/vue3-vite";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../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: {
       docgen: "vue-component-meta",
     },
   },
+
+  docs: {},
 };
 
 export default config;

.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);