[Feat] 테스트 코드 초기 세팅

.eslintrc.cjs

@@ -11,6 +11,9 @@ module.exports = {
     'plugin:prettier/recommended',
     'plugin:import/recommended',
     'plugin:import/typescript',
+    'plugin:testing-library/react',
+    'plugin:vitest/recommended',
+    'plugin:jest-dom/recommended',
   ],
   rules: {
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^2.9.3",
@@ -34,6 +35,9 @@
   "devDependencies": {
     "@hookform/devtools": "^4.3.1",
     "@tanstack/eslint-plugin-query": "^5.35.6",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
@@ -44,12 +48,17 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-testing-library": "^6.3.0",
+    "eslint-plugin-vitest": "^0.5.4",
+    "jsdom": "^25.0.0",
     "prettier": "^3.2.5",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "vitest": "^2.0.5"
   }
-}
+}

src/tests/test-utils.tsx

@@ -0,0 +1,24 @@
+import { render, type RenderOptions } from '@testing-library/react';
+import DeviceTypeProvider from 'contexts/DeviceTypeProvider';
+import RecruitingInfoProvider from 'contexts/RecruitingInfoProvider';
+import ThemeProvider from 'contexts/ThemeProvider';
+import type { ReactNode } from 'react';
+
+const AllTheProviders = ({ children }: { children: ReactNode }) => {
+  return (
+    <ThemeProvider>
+      <DeviceTypeProvider>
+        <RecruitingInfoProvider>{children}</RecruitingInfoProvider>
+      </DeviceTypeProvider>
+    </ThemeProvider>
+  );
+};
+
+const renderWithContext = (ui: ReactNode, options: RenderOptions) =>
+  render(ui, { wrapper: AllTheProviders, ...options });
+
+// re-export everything
+export * from '@testing-library/react';
+
+// override render method
+export { renderWithContext as render };

tsconfig.json

@@ -14,6 +14,9 @@
     "noEmit": true,
     "jsx": "react-jsx",
 
+    /* testing library */
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
+
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,

vite.config.ts

@@ -1,3 +1,4 @@
+/// <reference types="vitest/config" />
 import path from 'path';
 
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
@@ -40,4 +41,9 @@ export default defineConfig({
       { find: 'views', replacement: path.resolve(__dirname, 'src/views') },
     ],
   },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    // setupFiles: './src/tests/setupTests.ts', // msw 생성 시
+  },
 });