[ Feature/quiz 19 ]

.github/workflows/pull-request.yml

@@ -37,5 +37,5 @@ jobs:
         run: pnpm install
       - name: Build storybook
         run: pnpm run build-storybook
-      - name: Run Jest Test
+      - name: Run vitest
         run: pnpm test

.storybook/main.ts

@@ -1,11 +1,7 @@
 import type { StorybookConfig } from "@storybook/nextjs";
 
 const config: StorybookConfig = {
-  stories: [
-    "../src/stories/**/*.mdx",
-    "../src/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-    "../src/**/**/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
+  stories: ["../src/**/**/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-onboarding",
     "@storybook/addon-links",
@@ -18,5 +14,32 @@ const config: StorybookConfig = {
     options: {},
   },
   staticDirs: ["../public"],
+  webpackFinal: async (config) => {
+    if (!config.resolve || !config.module || !config.module.rules) {
+      throw new Error("Webpack Error");
+    }
+
+    const imageRule = config.module?.rules?.find((rule) => {
+      const test = (rule as { test: RegExp }).test;
+
+      if (!test) {
+        return false;
+      }
+
+      return test.test(".svg");
+    }) as { [key: string]: any };
+
+    imageRule.exclude = /\.svg$/;
+
+    config.module?.rules?.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+
+    return config;
+  },
+  docs: {
+    autodocs: false,
+  },
 };
 export default config;

.storybook/preview.ts

@@ -1,6 +1,6 @@
 import type { Preview } from "@storybook/react";
 import "../src/app/globals.css";
-
+import withAppRouterContext from "./withAppRouterContext";
 const preview: Preview = {
   parameters: {
     controls: {
@@ -10,6 +10,7 @@ const preview: Preview = {
       },
     },
   },
+  decorators: [withAppRouterContext],
 };
 
 export default preview;

.storybook/withAppRouterContext.tsx

@@ -0,0 +1,27 @@
+import {
+  AppRouterContext,
+  type AppRouterInstance,
+} from "next/dist/shared/lib/app-router-context.shared-runtime";
+import React from "react";
+import { FC } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 300000,
+      refetchOnWindowFocus: false,
+      staleTime: 300000,
+      retry: 1,
+    },
+  },
+});
+const withAppRouterContext = (Story: FC) => (
+  <QueryClientProvider client={queryClient}>
+    <AppRouterContext.Provider value={{} as AppRouterInstance}>
+      <Story />
+    </AppRouterContext.Provider>
+  </QueryClientProvider>
+);
+
+export default withAppRouterContext;

custom.d.ts

@@ -0,0 +1,8 @@
+import { SVGSVGElement } from "react";
+
+declare global {
+  module "*.svg" {
+    const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+    export default ReactComponent;
+  }
+}

package.json

@@ -7,15 +7,15 @@
     "build": "next build & next export",
     "start": "next start",
     "lint": "next lint",
-    "test": "jest",
-    "test:watch": "jest --watch",
+    "test": "vitest",
     "create": "node ./create-component.js",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.0.2",
     "@tanstack/react-query": "^5.40.0",
+    "@testing-library/user-event": "^14.5.2",
     "axios": "^1.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -41,26 +41,28 @@
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
-    "@types/jest": "^29.5.12",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.11.0",
+    "@vitejs/plugin-react": "^4.3.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-simple-import-sort": "^12.1.0",
-    "eslint-plugin-unused-imports": "^3.1.0",
     "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-unused-imports": "^3.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^24.1.0",
     "postcss": "^8",
     "prettier": "^3.3.0",
     "storybook": "^8.1.5",
     "tailwindcss": "^3.4.1",
     "ts-node": "^10.9.2",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^1.6.0"
   }
 }