Apply Vitest (#17)

* chore: atom -> atoms로 변경 * chore: styles.ts plop 수정 * feat: Spinner 추가 * chore: Vitest 설치 및 설정 * chore: vitest로 이전 * chore: vitest-ui 추가 * chore: vitest eslint 적용
bh2980 · May 20, 2024 · c66b410 · c66b410
1 parent 72e2106
commit c66b410
Show file tree

Hide file tree

Showing 32 changed files with 422 additions and 1,343 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -17,8 +17,8 @@
   "overrides": [
     {
       "files": ["**/?(*.)+(spec|test).[jt]s?(x)"],
-      "plugins": ["jest", "jest-dom", "testing-library"],
-      "extends": ["plugin:jest/recommended", "plugin:jest-dom/recommended", "plugin:testing-library/react"]
+      "plugins": ["vitest", "jest-dom", "testing-library"],
+      "extends": ["plugin:jest-dom/recommended", "plugin:testing-library/react"]
     },
     {
       "files": ["**/?(*.)+(stories).[jt]s?(x)"],

diff --git a/jest.config.ts b/jest.config.ts
diff --git a/jest.setup.ts b/jest.setup.ts
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "dev": "vite",
     "build": "tsc --project tsconfig.build.json && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "test": "jest --passWithNoTests",
+    "test": "vitest",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -52,36 +52,35 @@
     "@testing-library/react": "^15.0.7",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/d3": "^7.4.3",
-    "@types/jest": "^29.5.12",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/ui": "^1.6.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.47.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jest": "^28.5.0",
     "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-testing-library": "^6.2.2",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "eslint-plugin-vitest": "^0.5.4",
+    "jsdom": "^24.0.0",
     "plop": "^4.0.1",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "storybook": "^8.1.1",
     "storybook-addon-pseudo-states": "^3.1.1",
     "tailwindcss": "^3.4.3",
-    "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "tw-colors": "^3.3.1",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.9.1",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.6.0"
   }
 }
diff --git a/setupTest.ts b/setupTest.ts
@@ -0,0 +1 @@
+import "@testing-library/jest-dom";
diff --git a/src/components/atoms/Button/__test__/Button.test.tsx b/src/components/atoms/Button/__test__/Button.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
 import Button from "..";
 
 describe("Button", () => {
@@ -23,7 +24,7 @@ describe("Button", () => {
     });
 
     it("space 키로 onClick 함수를 실행해야합니다.", async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
 
       render(<Button onClick={onClick}>Button</Button>);
       const button = screen.getByRole("button");
@@ -37,7 +38,7 @@ describe("Button", () => {
     });
 
     it("enter 키로 onClick 함수를 실행해야합니다.", async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
 
       render(<Button onClick={onClick}>Button</Button>);
       const button = screen.getByRole("button");
@@ -51,7 +52,7 @@ describe("Button", () => {
     });
 
     it("click 시 onClick 함수를 실행해야합니다.", async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
 
       render(<Button onClick={onClick}>Button</Button>);
       const button = screen.getByRole("button");
@@ -82,7 +83,7 @@ describe("Button", () => {
     });
 
     it("disabled시 click이 불가능해야합니다.", async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
 
       render(
         <Button onClick={onClick} disabled>
@@ -133,7 +134,7 @@ describe("Button", () => {
     });
 
     it("space 키로 onClick 함수를 실행해야합니다.", async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
 
       render(
         <Button renderAs="a" onClick={onClick}>
@@ -151,7 +152,7 @@ describe("Button", () => {
     });
 
     it("enter 키로 onClick 함수를 실행해야합니다.", async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
 
       render(
         <Button renderAs="a" onClick={onClick}>
@@ -169,7 +170,7 @@ describe("Button", () => {
     });
 
     it("click 시 onClick 함수를 실행해야합니다.", async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
 
       render(
         <Button renderAs="a" onClick={onClick}>
@@ -201,7 +202,7 @@ describe("Button", () => {
     });
 
     it("disabled시 click이 불가능해야합니다.", async () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
 
       render(
         <Button renderAs="a" onClick={onClick} disabled>

diff --git a/src/components/atoms/Button/__test__/useButton.test.ts b/src/components/atoms/Button/__test__/useButton.test.ts
@@ -1,4 +1,5 @@
 import { renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
 import { type ButtonAlterAs, type ButtonDefault, type ButtonProps, useButton } from "..";
 
 describe("useButton 함수 테스트", () => {
@@ -39,15 +40,15 @@ describe("useButton 함수 테스트", () => {
   });
 
   it("renderAs가 'a'이고 disabled가 false일 때, onClick이 원래의 onClick함수를 가져야합니다.", () => {
-    const onClick = jest.fn();
+    const onClick = vi.fn();
     const props = { renderAs: "a" as const, disabled: false, onClick };
     const { result } = renderHook(() => useButton(props));
 
     expect(result.current.onClick).toBe(onClick);
   });
 
   it("renderAs가 'a'이고 disabled가 true일 때, onClick이 undefined가 되어야합니다.", () => {
-    const props = { renderAs: "a" as const, disabled: true, onClick: jest.fn() };
+    const props = { renderAs: "a" as const, disabled: true, onClick: vi.fn() };
     const { result } = renderHook(() => useButton(props));
 
     expect(result.current.onClick).toBeUndefined();
@@ -56,9 +57,7 @@ describe("useButton 함수 테스트", () => {
   it("otherProps가 정의되었을 때, 결과 객체에 otherProps가 포함되어야합니다.", () => {
     const otherProps = { dataTestId: "test" };
     const props = { ...otherProps };
-    const { result } = renderHook(() =>
-      useButton(props as ButtonProps<ButtonDefault, ButtonAlterAs>),
-    );
+    const { result } = renderHook(() => useButton(props as ButtonProps<ButtonDefault, ButtonAlterAs>));
 
     expect(result.current).toHaveProperty("dataTestId", "test");
   });

diff --git a/src/components/atoms/Chip/__test__/Chip.test.tsx b/src/components/atoms/Chip/__test__/Chip.test.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
 import Chip from "../Chip";
 
 describe("Chip 및 ChipGroup 컴포넌트 테스트", () => {
@@ -80,8 +81,8 @@ describe("Chip 및 ChipGroup 컴포넌트 테스트", () => {
   });
 
   it("ChipGroup에 Chip을 추가하고 Chip을 클릭 시 클릭 이벤트가 올바르게 전달되어야 합니다.", async () => {
-    const handleClick = jest.fn();
-    const handleClick2 = jest.fn();
+    const handleClick = vi.fn();
+    const handleClick2 = vi.fn();
     render(
       <Chip.ChipGroup>
         <Chip value="1" onClick={handleClick}>

diff --git a/src/components/atoms/Divider/__test__/Divider.test.tsx b/src/components/atoms/Divider/__test__/Divider.test.tsx
@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
 import Divider from "@atoms/Divider/Divider";
 
 describe("Divider 컴포넌트", () => {

diff --git a/src/components/atoms/ExpandTile/__test__/ExpandTile.test.tsx b/src/components/atoms/ExpandTile/__test__/ExpandTile.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
 import ExpandTile from "../ExpandTile";
 
 describe("ExpandTile", () => {

diff --git a/src/components/atoms/ExpandTile/__test__/useExpandTile.test.ts b/src/components/atoms/ExpandTile/__test__/useExpandTile.test.ts
@@ -1,4 +1,5 @@
 import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
 import useExpandTile from "../useExpandTile";
 
 describe("useExpandTile", () => {

diff --git a/src/components/atoms/List/__test__/List.test.tsx b/src/components/atoms/List/__test__/List.test.tsx
@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
 import Divider from "@atoms/Divider/Divider";
 import List from "../List";
 

diff --git a/src/components/atoms/Spinner/__test__/Spinner.test.tsx b/src/components/atoms/Spinner/__test__/Spinner.test.tsx
@@ -1,4 +1,5 @@
 import { render } from "@testing-library/react";
+import { describe, it } from "vitest";
 import Spinner from "../Spinner";
 
 describe("spinner", () => {

diff --git a/src/components/atoms/Tab/__test__/Tab.test.tsx b/src/components/atoms/Tab/__test__/Tab.test.tsx
@@ -3,6 +3,7 @@
 /* eslint-disable testing-library/no-container */
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
 import Tab from "../Tab";
 
 describe("Tab", () => {
@@ -47,7 +48,7 @@ describe("Tab", () => {
   });
 
   it("click 시 기존 onClick 함수 실행", async () => {
-    const onClick = jest.fn();
+    const onClick = vi.fn();
 
     render(<Tab value="tab1" onClick={onClick} />, {
       wrapper: (props) => <Tab.TabList defaultSelected="" {...props} />,

diff --git a/src/components/atoms/Tab/__test__/useTab.test.tsx b/src/components/atoms/Tab/__test__/useTab.test.tsx
@@ -1,5 +1,6 @@
 import { SelectedListProvider } from "@contexts/SelectedContext";
 import { renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
 import { useTab, useTabList } from "../useTabList";
 
 describe("useTab", () => {

diff --git a/src/components/atoms/TextField/__test__/TextField.test.tsx b/src/components/atoms/TextField/__test__/TextField.test.tsx
@@ -3,7 +3,8 @@
 /* eslint-disable testing-library/no-container */
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import TextField from "..";
+import { describe, expect, it, vi } from "vitest";
+import TextField from "../TextField";
 
 describe("TextField", () => {
   // normal rendering
@@ -32,7 +33,7 @@ describe("TextField", () => {
   });
 
   it("value를 prosp로 받아 렌더링해야합니다.", () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     render(<TextField value="VALUE" onChange={onChange} />);
 
     const input = screen.getByRole("textbox") as HTMLInputElement;
@@ -100,7 +101,7 @@ describe("TextField", () => {
   });
 
   it("onChange 함수를 props로 받아 typeing 시 실행해야합니다.", async () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     render(<TextField onChange={onChange} />);
 
     const input = screen.getByRole("textbox") as HTMLInputElement;

diff --git a/src/components/atoms/TextField/__test__/useTextField.test.ts b/src/components/atoms/TextField/__test__/useTextField.test.ts
@@ -1,4 +1,5 @@
 import { renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
 import useTextField from "../useTextField";
 
 describe("useTextField", () => {

diff --git a/src/components/atoms/ToggleButton/__test__/ToggleButton.test.tsx b/src/components/atoms/ToggleButton/__test__/ToggleButton.test.tsx
@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import ToggleButton from "..";
+import { describe, expect, it, vi } from "vitest";
+import ToggleButton from "../ToggleButton";
 
 describe("ToggleButton", () => {
   it("에러 없이 정상적으로 렌더링되어야 합니다.", () => {
@@ -28,7 +29,7 @@ describe("ToggleButton", () => {
   });
 
   it("버튼을 click 시 aria-pressed가 true로 변경되어야합니다.", async () => {
-    const onClick = jest.fn();
+    const onClick = vi.fn();
     render(<ToggleButton onClick={onClick}>버튼</ToggleButton>);
 
     const button = screen.getByRole("button");
@@ -41,7 +42,7 @@ describe("ToggleButton", () => {
   });
 
   it("버튼을 click 후 다시 click 시 aria-pressed가 false로 변경되어야합니다.", async () => {
-    const onClick = jest.fn();
+    const onClick = vi.fn();
     render(<ToggleButton onClick={onClick}>버튼</ToggleButton>);
 
     const button = screen.getByRole("button");

diff --git a/src/components/atoms/UpDownNumber/__test__/UpDownNumber.test.tsx b/src/components/atoms/UpDownNumber/__test__/UpDownNumber.test.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable testing-library/no-node-access */
 import { render, screen } from "@testing-library/react";
-import UpDownNumber from "..";
+import { describe, expect, it } from "vitest";
+import UpDownNumber from "../UpDownNumber";
 
 describe("UpDownNumber Component", () => {
   it("renders without errors", () => {

diff --git a/src/components/molecules/FlowStockItem/__test__/FlowStockItem.test.tsx b/src/components/molecules/FlowStockItem/__test__/FlowStockItem.test.tsx
@@ -1,5 +1,6 @@
 import { composeStory } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
 import Meta, { Negative as NegativeStory, Positive as PositiveStory } from "../FlowStockItem.stories";
 
 const Positive = composeStory(PositiveStory, Meta);

diff --git a/src/components/molecules/StockChangeLabel/__test__/StockChangeLabel.test.tsx b/src/components/molecules/StockChangeLabel/__test__/StockChangeLabel.test.tsx
@@ -4,6 +4,7 @@
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
 import StockChangeLabel from "../StockChangeLabel";
 
 describe("StockChangeLabel", () => {

diff --git a/src/components/molecules/StockItem/__test__/StockItem.test.tsx b/src/components/molecules/StockItem/__test__/StockItem.test.tsx
@@ -4,6 +4,7 @@
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
 import StockItem from "../StockItem";
 
 const IMAGE_URL =

diff --git a/src/components/molecules/StockItem/__test__/useStockItem.test.ts b/src/components/molecules/StockItem/__test__/useStockItem.test.ts
@@ -1,4 +1,5 @@
 import { renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
 import { useStockItem } from "../useStockItem";
 
 describe("useStockItem", () => {