Refactor: 상수 컨벤션, MemoryRouter, screen, userEvent 사용해서 테스트코드 수정

src/components/Card/InformCard/index.test.tsx

@@ -1,47 +1,49 @@
 import ThemeProvider from '@styles/ThemeProvider';
-import { fireEvent, render } from '@testing-library/react';
-import { BrowserRouter } from 'react-router-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
 
 import '@testing-library/jest-dom';
 import InformCard from './index';
 
+// 3. memoryRouter, 가상 라우터
+
 describe('Card 클릭 시 페이지 이동이 잘 되는지에 대한 테스트', () => {
   it('공지사항 클릭 테스트', () => {
-    const icon = 'notification';
-    const title = '공지사항';
-    const path = 'announcement';
-    const testComponent = render(
+    const ICON = 'notification';
+    const TITLE = '공지사항';
+    const PATH = 'announcement';
+    render(
       <ThemeProvider>
-        <BrowserRouter>
-          <InformCard icon={icon} title={title} path={path} />,
-        </BrowserRouter>
+        <InformCard icon={ICON} title={TITLE} path={PATH} />
       </ThemeProvider>,
+      { wrapper: MemoryRouter },
     );
 
-    const card = testComponent.container.querySelector('div');
-    if (card) {
-      fireEvent.click(card);
-      expect(window.location.pathname).toBe(`/${path}`);
-    }
+    const card = screen.getByTestId('card');
+
+    userEvent.click(card);
+    waitFor(() => {
+      expect(window.location.pathname).toBe(`/${PATH}`);
+    });
   });
 
   it('졸업요건 클릭 테스트', () => {
-    const icon = 'school';
-    const title = '졸업요건';
-    const path = 'announcement';
-    const testComponent = render(
+    const ICON = 'school';
+    const TITLE = '졸업요건';
+    const PATH = 'graduation-requirements';
+    render(
       <ThemeProvider>
-        <BrowserRouter>
-          <InformCard icon={icon} title={title} path={path} />,
-        </BrowserRouter>
+        <InformCard icon={ICON} title={TITLE} path={PATH} />
       </ThemeProvider>,
+      { wrapper: MemoryRouter },
     );
 
-    const card = testComponent.container.querySelector('div');
+    const card = screen.getByTestId('card');
 
-    if (card) {
-      fireEvent.click(card);
-      expect(window.location.pathname).toBe(`/${path}`);
-    }
+    userEvent.click(card);
+    waitFor(() => {
+      expect(window.location.pathname).toBe(`/${PATH}`);
+    });
   });
 });