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( - - , - + , + { 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( - - , - + , + { 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}`); + }); }); });