add: 310.md

src/content/memo/310.md

@@ -0,0 +1,34 @@
+---
+tags: ['test', 'react-router']
+title: React Router의 Link 컴포넌트 테스트하기
+description: 이 글에서는 React Router의 <Link /> 컴포넌트를 테스트하는 방법을 설명합니다. 사용자가 링크를 클릭하면 적절한 페이지로 이동하는지 확인하는 테스트 코드를 예제와 함께 제공합니다.
+status: release
+ctime: 2024-08-06
+mtime: 2024-08-06
+---
+
+React 애플리케이션에서 라우팅은 중요한 부분. 특히, 사용자가 링크를 클릭할 때 적절한 페이지로 이동하는지 테스트하는 것은 중요. 다음은 [React Router](https://reactrouter.com/en/main)의 `<Link />` 컴포넌트를 테스트하는 코드.
+
+```tsx
+describe('Link', () => {
+  it('이동', () => {
+    const Home = () => <Link to="/about">About</Link>
+    const About = () => <h1>About</h1>
+
+    const { getByRole } = render(
+      <MemoryRouter initialEntries={['/']}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+        </Routes>
+      </MemoryRouter>
+    )
+
+    fireEvent.click(getByRole('link'))
+
+    expect(screen.getByRole('heading')).toHaveTextContent('About')
+  })
+})
+```
+
+가끔 `<Link />`도 테스트해야 할 때가 있다. 위 코드는 사용자가 "About" 링크를 클릭하면 "About" 페이지로 이동하는지 테스트. fireEvent.click을 사용해 링크 클릭 이벤트를 발생시키고, screen.getByRole을 통해 헤딩 요소의 텍스트가 'About'인지 확인. 이 테스트를 통해 라우팅이 제대로 동작하는지 확인할 수 있음.