From 48394df462c28d5d5081cb5132dbce16cc19d978 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Fri, 7 Apr 2023 12:33:36 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20=EC=83=81=EC=88=98=20=EC=BB=A8?=
 =?UTF-8?q?=EB=B2=A4=EC=85=98,=20MemoryRouter,=20screen,=20userEvent=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=B4=EC=84=9C=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Card/InformCard/index.test.tsx | 54 ++++++++++---------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/components/Card/InformCard/index.test.tsx b/src/components/Card/InformCard/index.test.tsx
index eb7ba440..40f26782 100644
--- a/src/components/Card/InformCard/index.test.tsx
+++ b/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}`);
+    });
   });
 });