From c66b410886cd7ab4238c144b3f9f741ab31d851d Mon Sep 17 00:00:00 2001 From: Janghun Lee <74360958+bh2980@users.noreply.github.com> Date: Mon, 20 May 2024 12:23:32 +0900 Subject: [PATCH] Apply Vitest (#17) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: atom -> atoms로 변경 * chore: styles.ts plop 수정 * feat: Spinner 추가 * chore: Vitest 설치 및 설정 * chore: vitest로 이전 * chore: vitest-ui 추가 * chore: vitest eslint 적용 --- .eslintrc.json | 4 +- jest.config.ts | 21 - jest.setup.ts | 5 - package.json | 13 +- setupTest.ts | 1 + .../atoms/Button/__test__/Button.test.tsx | 17 +- .../atoms/Button/__test__/useButton.test.ts | 9 +- .../atoms/Chip/__test__/Chip.test.tsx | 5 +- .../atoms/Divider/__test__/Divider.test.tsx | 1 + .../ExpandTile/__test__/ExpandTile.test.tsx | 1 + .../ExpandTile/__test__/useExpandTile.test.ts | 1 + .../atoms/List/__test__/List.test.tsx | 1 + .../atoms/Spinner/__test__/Spinner.test.tsx | 1 + .../atoms/Tab/__test__/Tab.test.tsx | 3 +- .../atoms/Tab/__test__/useTab.test.tsx | 1 + .../TextField/__test__/TextField.test.tsx | 7 +- .../TextField/__test__/useTextField.test.ts | 1 + .../__test__/ToggleButton.test.tsx | 7 +- .../__test__/UpDownNumber.test.tsx | 3 +- .../__test__/FlowStockItem.test.tsx | 1 + .../__test__/StockChangeLabel.test.tsx | 1 + .../StockItem/__test__/StockItem.test.tsx | 1 + .../StockItem/__test__/useStockItem.test.ts | 1 + .../StockLogo/__test__/StockLogo.test.tsx | 5 +- .../StockPrice/__test__/StockPrice.test.tsx | 1 + src/hooks/__test__/usePressed.test.ts | 3 +- src/hooks/__test__/useSelected.test.tsx | 7 +- src/utils/__test__/checkNumType.test.ts | 1 + src/utils/__test__/getFormatNumber.test.ts | 1 + src/utils/__test__/getRelativeTime.test.ts | 3 +- vitest.config.ts | 11 + yarn.lock | 1627 ++++------------- 32 files changed, 422 insertions(+), 1343 deletions(-) delete mode 100644 jest.config.ts delete mode 100644 jest.setup.ts create mode 100644 setupTest.ts create mode 100644 vitest.config.ts diff --git a/.eslintrc.json b/.eslintrc.json index a75afd1..cb53f98 100644 --- 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 deleted file mode 100644 index a140540..0000000 --- a/jest.config.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type { Config } from "jest"; - -const config: Config = { - setupFilesAfterEnv: ["/jest.setup.ts"], - testEnvironment: "jest-environment-jsdom", - moduleNameMapper: { - "^@atoms/(.*)$": "/src/components/atoms/$1", - "^@molecules/(.*)$": "/src/components/molecules/$1", - "^@charts/(.*)$": "/src/charts/$1", - "^@hooks/(.*)$": "/src/hooks/$1", - "^@contexts/(.*)$": "/src/contexts/$1", - "^@constants/(.*)$": "/src/constants/$1", - "^@utils/(.*)$": "/src/utils/$1", - // 필요한 경우 다른 모듈에 대한 alias 추가 - }, - transform: { - "^.+\\.(ts|tsx)$": "ts-jest", // 추가된 transform 설정 - }, -}; - -export default config; diff --git a/jest.setup.ts b/jest.setup.ts deleted file mode 100644 index aa0fdfe..0000000 --- a/jest.setup.ts +++ /dev/null @@ -1,5 +0,0 @@ -// Optional: configure or set up a testing framework before each test. -// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js` -// Used for __tests__/testing-library.js -// Learn more: https://github.com/testing-library/jest-dom -import "@testing-library/jest-dom"; diff --git a/package.json b/package.json index ff5c339..1752b5a 100644 --- 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 new file mode 100644 index 0000000..d0de870 --- /dev/null +++ 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 index 7e8ba0b..a285155 100644 --- 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(); const button = screen.getByRole("button"); @@ -37,7 +38,7 @@ describe("Button", () => { }); it("enter 키로 onClick 함수를 실행해야합니다.", async () => { - const onClick = jest.fn(); + const onClick = vi.fn(); render(); const button = screen.getByRole("button"); @@ -51,7 +52,7 @@ describe("Button", () => { }); it("click 시 onClick 함수를 실행해야합니다.", async () => { - const onClick = jest.fn(); + const onClick = vi.fn(); render(); const button = screen.getByRole("button"); @@ -82,7 +83,7 @@ describe("Button", () => { }); it("disabled시 click이 불가능해야합니다.", async () => { - const onClick = jest.fn(); + const onClick = vi.fn(); render(