---
type: snippet
tags: ['test', 'react-router']
title: React Router의 Link 컴포넌트 테스트하기
description: 이 글에서는 React Router의 <Link /> 컴포넌트를 테스트하는 방법을 설명합니다. 사용자가 링크를 클릭하면 적절한 페이지로 이동하는지 확인하는 테스트 코드를 예제와 함께 제공합니다.
status: release
ctime: 2024-08-06
mtime: 2026-07-27
---

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'인지 확인. 이 테스트를 통해 라우팅이 제대로 동작하는지 확인할 수 있음.

---

- https://github.com/remix-run/react-router/blob/main/packages/react-router/__tests__/dom/link-click-test.tsx