[javascript] 리액트 라우터의 테스트 프레임워크와 라이브러리

04 Dec 2023

javascript

리액트 라우터는 리액트 기반의 웹 애플리케이션에서 페이지 간 전환을 가능하게 하는 라이브러리입니다. 웹 애플리케이션을 개발하다 보면 라우터를 테스트하는 것이 중요한데, 이번 글에서는 리액트 라우터의 테스트를 위해 사용할 수 있는 프레임워크와 라이브러리를 알아보겠습니다.

1. React Testing Library

React Testing Library는 React 컴포넌트를 테스트하기 위한 유명한 프레임워크입니다. 이 프레임워크를 사용하면 테스트 작성 시 실제 사용자가 애플리케이션을 사용하는 것과 동일한 방식으로 테스트를 작성할 수 있습니다.

React Testing Library는 라우터를 사용하는 컴포넌트를 테스트하는데 매우 편리한 도구입니다. 이를 통해 사용자의 동작에 따라 페이지 간 전환을 테스트할 수 있습니다. 예를 들어 특정 링크를 클릭했을 때 올바른 경로로 이동하는지를 검증할 수 있습니다.

import { render, screen, fireEvent } from '@testing-library/react';
import { MemoryRouter, Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';

import App from './App';

test('네비게이션 링크 클릭 시 정확한 경로로 이동하는지 검증', () => {
  const history = createMemoryHistory();
  render(
    <Router history={history}>
      <App />
    </Router>
  );

  fireEvent.click(screen.getByRole('link', { name: 'Home' }));
  expect(history.location.pathname).toBe('/');
});

위의 예제 코드에서는 React Testing Library의 render 함수를 사용하여 애플리케이션을 렌더링하고, fireEvent 함수를 사용하여 네비게이션 링크를 클릭합니다. 그리고 이동한 경로를 테스트하여 올바른 경로로 이동하는지 검증하고 있습니다.

2. Enzyme

Enzyme은 리액트 컴포넌트를 테스트하기 위한 다른 대표적인 프레임워크입니다. React Testing Library와 비슷한 기능을 제공하지만 약간 다른 접근 방식을 가지고 있습니다.

Enzyme은 라우터를 사용하는 컴포넌트를 테스트할 때 MemoryRouter를 사용하여 테스트할 수 있습니다.

import { shallow } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';

import App from './App';

test('네비게이션 링크 클릭 시 정확한 경로로 이동하는지 검증', () => {
  const wrapper = shallow(
    <MemoryRouter initialEntries={['/']}>
      <App />
    </MemoryRouter>
  );

  wrapper.find('[href="/home"]').simulate('click');
  expect(wrapper.find('Router').prop('history').location.pathname).toBe('/home');
});

위의 코드에서는 Enzyme의 shallow 함수를 사용하여 App 컴포넌트를 렌더링하고, 네비게이션 링크를 클릭한 후 이동한 경로를 검증하고 있습니다.

결론

리액트 라우터의 테스트를 위해 React Testing Library와 Enzyme을 사용하는 방법을 알아보았습니다. 각각의 프레임워크는 리액트 라우터 컴포넌트를 테스트하는데 유용한 도구들입니다. 웹 애플리케이션의 페이지 간 전환을 올바르게 테스트하여 안정적인 애플리케이션 개발에 도움이 될 것입니다.

1. React Testing Library

2. Enzyme

결론

참고 자료