storybookのアプデとテスト追加

.github/workflows/build-test.yml

@@ -64,7 +64,28 @@ jobs:
                   key: dev-depends-${{ matrix.os }}-bun${{ matrix.bun-version }}-${{ hashFiles('package.json') }}
             - name: Lint
               run: bun run lint
-
+    test:
+        name: JavaScript Test on Ubuntu
+        needs: setup
+        runs-on: ${{ matrix.os }}
+        strategy:
+            matrix:
+                bun-version: [latest]
+                os: [ubuntu-latest]
+        steps:
+            - uses: actions/checkout@v4
+            - name: Use Bun ${{ matrix.bun-version }}
+              uses: oven-sh/setup-bun@v1
+              with:
+                  bun-version: ${{ matrix.bun-version }}
+            - name: Cache Restore devDependencies
+              id: cache-restore-dev-depends
+              uses: actions/cache/restore@v3
+              with:
+                  path: '**/node_modules'
+                  key: dev-depends-${{ matrix.os }}-bun${{ matrix.bun-version }}-${{ hashFiles('package.json') }}
+            - name: Test
+              run: bun run test
     build:
           name: JavaScript Build on Ubuntu
           needs: setup

.storybook/main.ts

@@ -1,39 +1,33 @@
-import type { StorybookConfig } from "@storybook/nextjs";
+import { dirname, join } from "node:path";
+import type { StorybookConfig } from "@storybook/experimental-nextjs-vite";
 
 import path from "node:path";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
-    "@storybook/addon-viewport",
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-viewport"),
     {
       name: "storybook-addon-next",
       options: {
         nextConfigPath: path.resolve(__dirname, "../next.config.js"),
       },
     },
+    getAbsolutePath("@storybook/experimental-addon-test"),
   ],
-  webpackFinal: (config) => {
-    if (config.resolve) {
-      // typescriptのエイリアスをstorybookでも使えるようにする
-      config.resolve.alias = {
-        ...config.resolve.alias,
-        "@": path.resolve(__dirname, "../src"),
-      };
-    }
-    return config;
-  },
   framework: {
-    name: "@storybook/nextjs",
+    name: getAbsolutePath("@storybook/experimental-nextjs-vite"),
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
+  docs: {},
   staticDirs: ["../public"],
 };
 export default config;
+
+function getAbsolutePath(value: string) {
+  return dirname(require.resolve(join(value, "package.json")));
+}

.storybook/vitest.setup.ts

@@ -0,0 +1,10 @@
+import { beforeAll } from "vitest";
+import { setProjectAnnotations } from "@storybook/react";
+// biome-ignore lint/style/noNamespaceImport: <explanation>
+import * as projectAnnotations from "./preview";
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

biome.json

@@ -1,8 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
-	"organizeImports": {
-		"enabled": false
-	},
+	"$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
 	"files": {
 		"ignore": [
 			"node_modules",
@@ -52,32 +49,53 @@
 			},
 			"complexity": {
 				"noExcessiveCognitiveComplexity": "off",
+				"noUselessStringConcat": "error",
+				"noUselessUndefinedInitialization": "error",
 				"noVoid": "error",
+				"useDateNow": "error",
 				"useSimplifiedLogicExpression": "error"
 			},
 			"correctness": {
 				"noConstantMathMinMaxClamp": "error",
+				"noInvalidNewBuiltin": "error",
+				"noNewSymbol": "error",
 				"noUndeclaredVariables": "warn",
+				"noUnusedFunctionParameters": "error",
+				"noUnusedImports": "error",
+				"noUnusedPrivateClassMembers": "error",
 				"noUnusedVariables": "warn",
 				"useExhaustiveDependencies": "warn",
 				"useHookAtTopLevel": "error"
 			},
 			"nursery": {
-				"noDoneCallback": "error",
 				"noDuplicateElseIf": "error",
-				"noDuplicateJsonKeys": "error",
-				"noEvolvingTypes": "error",
-				"noMisplacedAssertion": "error"
+				"noDynamicNamespaceImportAccess": "error",
+				"noEnum": "error",
+				"noExportedImports": "error",
+				"noIrregularWhitespace": "error",
+				"noSubstr": "error",
+				"noUselessEscapeInRegex": "error",
+				"useAdjacentOverloadSignatures": "error",
+				"useTrimStartEnd": "error"
 			},
 			"recommended": true,
 			"style": {
+				"noDoneCallback": "error",
 				"noImplicitBoolean": "warn",
+				"noNamespace": "error",
 				"noNamespaceImport": "error",
 				"noNegationElse": "error",
-				"noParameterAssign": "off",
+				"noParameterAssign": "warn",
 				"noParameterProperties": "off",
 				"noShoutyConstants": "warn",
+				"noYodaExpression": "error",
 				"useBlockStatements": "error",
+				"useCollapsedElseIf": "error",
+				"useConsistentArrayType": "error",
+				"useConsistentBuiltinInstantiation": "error",
+				"useDefaultSwitchClause": "error",
+				"useExplicitLengthCheck": "error",
+				"useForOf": "error",
 				"useFragmentSyntax": "error",
 				"useNamingConvention": {
 					"level": "off",
@@ -86,14 +104,24 @@
 						"strictCase": true
 					}
 				},
+				"useNodeAssertStrict": "error",
 				"useShorthandArrayType": "error",
 				"useShorthandAssign": "error",
-				"useSingleCaseStatement": "error"
+				"useSingleCaseStatement": "error",
+				"useThrowNewError": "error",
+				"useThrowOnlyError": "error"
 			},
 			"suspicious": {
 				"noEmptyBlockStatements": "error",
-				"noSkippedTests": "error"
+				"noEvolvingTypes": "error",
+				"noMisplacedAssertion": "error",
+				"noSkippedTests": "error",
+				"useErrorMessage": "error",
+				"useNumberToFixedDigitsArgument": "error"
 			}
 		}
+	},
+	"organizeImports": {
+		"enabled": false
 	}
 }

package.json

@@ -1,5 +1,6 @@
 {
   "name": "links",
+  "type": "module",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,11 +10,12 @@
     "lint": "next lint && bun run biome check .",
     "lint:fix": "next lint --fix && bun run biome check . --write",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "vitest"
   },
   "dependencies": {
     "@baselime/node-opentelemetry": "^0.5.8",
-    "@biomejs/biome": "^1.8.3",
+    "@biomejs/biome": "^1.9.3",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
@@ -46,28 +48,36 @@
     "vaul": "^0.9.2"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-onboarding": "^8.2.9",
-    "@storybook/addon-viewport": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/nextjs": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/test": "^8.2.9",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-onboarding": "^8.3.5",
+    "@storybook/addon-viewport": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/experimental-addon-test": "^8.3.5",
+    "@storybook/experimental-nextjs-vite": "^8.3.5",
+    "@storybook/nextjs": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/test": "^8.3.5",
     "@types/node": "20.14.11",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "@vitest/browser": "^2.1.2",
+    "@vitest/coverage-v8": "^2.1.2",
     "dependency-cruiser": "^16.4.1",
     "encoding": "^0.1.13",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.8",
     "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-security": "^3.0.1",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.9.0",
     "eslint-plugin-unicorn": "^54.0.0",
-    "storybook": "^8.2.9",
-    "turbo": "^2.1.1"
+    "happy-dom": "^15.7.4",
+    "playwright": "^1.47.2",
+    "storybook": "^8.3.5",
+    "turbo": "^2.1.1",
+    "vite": "^5.4.8",
+    "vitest": "^2.1.2"
   },
   "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }

src/stories/Button/index.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/test";
 
 import { Button } from "@/components/ui/button";
 const meta: Meta<typeof Button> = {
@@ -11,4 +12,8 @@ export const Primary: Story = {
   args: {
     children: "Button",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button"));
+  },
 };

src/styles/globals.css

@@ -75,9 +75,8 @@
   }
 }
 
-
 body {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

tsconfig.json

@@ -12,8 +12,8 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "CommonJS",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
@@ -53,9 +53,9 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts",
+    ".next/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"
   ]
-}
+}

tsconfig.test.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+  }
+}

vitest.config.ts

@@ -0,0 +1,40 @@
+import path from "node:path";
+
+import { storybookTest } from "@storybook/experimental-addon-test/vitest-plugin";
+import { defineConfig } from "vitest/config";
+
+// More info at: https://storybook.js.org/docs/writing-tests/vitest-plugin
+export default defineConfig({
+  plugins: [
+    // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
+    storybookTest(),
+  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(import.meta.dirname, "src"),
+    },
+  },
+  optimizeDeps: {
+    include: ["@storybook/experimental-addon-test/internal/test-utils"],
+  },
+  test: {
+    globals: true,
+    // environment: "happy-dom",
+    name: "storybook",
+    // coverage: {
+    //   provider: "v8",
+    // },
+    browser: {
+      enabled: true,
+      headless: true,
+      name: "chromium",
+      provider: "playwright",
+    },
+    // Make sure to adjust this pattern to match your stories files.
+    include: ["**/*.stories.?(m)[jt]s?(x)"],
+    setupFiles: ["./.storybook/vitest.setup.ts"],
+    typecheck: {
+      tsconfig: "./tsconfig.test.json",
+    },
+  },
+});