Merge pull request #22 from DaleStudy/fix-vitest-setup

Vitest 설정 문제 해결

.github/CODEOWNERS

@@ -0,0 +1 @@
+*   @DaleStudy/leaderboard

.gitignore

@@ -7,7 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
-node_modules
+node_modules  
 dist
 dist-ssr
 *.local
@@ -26,3 +26,6 @@ dist-ssr
 *storybook.log
 
 styled-system
+
+# Tests
+coverage

package.json

@@ -6,9 +6,12 @@
   "scripts": {
     "build": "tsc -b && vite build",
     "dev": "vite",
+    "format:check": "prettier . --check",
+    "format:write": "prettier . --write",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest",
+    "coverage": "vitest run src --coverage",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "prepare": "husky & panda codegen"
@@ -22,6 +25,7 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",
     "@eslint/js": "^9.12.0",
+    "@faker-js/faker": "^9.0.3",
     "@pandacss/dev": "^0.46.1",
     "@storybook/addon-essentials": "^8.3.5",
     "@storybook/addon-interactions": "^8.3.5",
@@ -38,14 +42,15 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.7.1",
+    "@vitest/coverage-v8": "2.1.3",
     "eslint": "^9.12.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc-fb9a90fa48-20240614",
     "eslint-plugin-react-refresh": "^0.4.12",
     "eslint-plugin-storybook": "^0.9.0",
+    "happy-dom": "^15.7.4",
     "husky": "^9.1.6",
-    "jsdom": "^25.0.1",
     "lint-staged": "^15.2.10",
     "prettier": "^3.3.3",
     "storybook": "^8.3.5",

src/components/ErrorPage/ErrorPage.test.tsx

@@ -0,0 +1,43 @@
+import { faker } from "@faker-js/faker";
+import { render, screen } from "@testing-library/react";
+import { useRouteError } from "react-router-dom";
+import { expect, test, vi } from "vitest";
+import ErrorPage from "./ErrorPage";
+
+vi.mock("react-router-dom");
+
+test("displays the title and message", () => {
+  vi.mocked(useRouteError).mockReturnValue({
+    statusText: faker.lorem.sentence(),
+    message: faker.lorem.sentence(),
+  });
+
+  render(<ErrorPage />);
+
+  expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(/oops!/i);
+  expect(
+    screen.getByText(/sorry, an unexpected error has occurred./i),
+  ).toBeInTheDocument();
+});
+
+test("displays the status text when available", () => {
+  const statusText = faker.lorem.sentence();
+  const message = faker.lorem.sentence();
+
+  vi.mocked(useRouteError).mockReturnValue({ statusText, message });
+
+  render(<ErrorPage />);
+
+  expect(screen.getByText(new RegExp(statusText, "i"))).toBeInTheDocument();
+});
+
+test("displays the error message when status text is not available", () => {
+  const statusText = "";
+  const message = faker.lorem.sentence();
+
+  vi.mocked(useRouteError).mockReturnValue({ statusText, message });
+
+  render(<ErrorPage />);
+
+  expect(screen.getByText(new RegExp(message, "i"))).toBeInTheDocument();
+});

src/main.tsx

@@ -3,7 +3,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Certificate from "./components/certificate/certificate";
-import ErrorPage from "./components/error-page/error-page";
+import ErrorPage from "./components/ErrorPage/ErrorPage";
 import Leaderboard from "./components/leaderboard/leaderboard";
 import Progress from "./components/progress/progress";
 import "./index.css";

src/vitest.setup.ts

@@ -1,4 +1,4 @@
-import "@testing-library/jest-dom";
+import "@testing-library/jest-dom/vitest";
 
 import { cleanup } from "@testing-library/react";
 import { afterEach } from "vitest";

tsconfig.json

@@ -3,9 +3,5 @@
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
-  ],
-  /* Vitest */
-  "compilerOptions": {
-    "types": ["vitest/globals", "vitest/jsdom"]
-  }
+  ]
 }

vite.config.ts

@@ -7,8 +7,16 @@ import { defineConfig } from "vite";
 export default defineConfig({
   plugins: [react()],
   test: {
-    globals: true,
-    environment: "jsdom",
-    setupFiles: ["./vitest.setup.ts"],
+    environment: "happy-dom",
+    setupFiles: ["./src/vitest.setup.ts"],
+    coverage: {
+      include: ["src/**/*.ts?(x)"],
+      thresholds: {
+        lines: 10,
+        functions: 20,
+        statements: 10,
+        branches: 30,
+      },
+    },
   },
 });