React Testing Library test React Router - BrowserRouter vs MemoryRouter

테스트 내용

테스트 환경 jest | React Testing Library 
 
React Router의 useNavigate로 연결되어있는 페이지가 있다.
확인 버튼을 누르면 조건을 충족했는지 검사 후 다음 페이지로 이동하는 페이지이다.
 
이를 아래와 같이 테스트해야 했다.
약관동의 페이지에서 전체 동의 체크 후 확인버튼을 누르면, 다음 페이지인 이름 입력페이지로 이동한다.
 

테스트하려는 코드

Agreement.tsx

export const Agreement = () => {
  const navigate = useNavigate();
  const [checked, setChecked] = useState(false);
  const handleClick = () => {
    if (checked) {
      navigate('/name');
    }
  };

  return (
    <div>
      약관동의 페이지
      <input
        type='checkbox'
        id='all'
        checked={checked}
        onChange={() => setChecked(!checked)}
      />
      <label htmlFor='all'>전체동의</label>
      <button onClick={handleClick}>확인</button>
    </div>
  );
};

 
Name.tsx

export const Name = () => {
  return <div>이름페이지</div>;
};

 
App.tsx
React Router가 구현되어있는 부분

import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/agreement' element={<Agreement />} />
        <Route path='/name' element={<Name />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

이전 테스트코드

Agreement.test.tsx
처음엔 라우터없이 아래와 같은 식으로 구현했다. 

import { render } from '@testing-library/react';
describe('회원가입 약관동의 페이지', () => {
    it('전체 동의 체크 후 확인 버튼 누르면 다음 페이지(이름 입력)로 이동한다', async () => {
        render(
          <>
            <Agreement />
            <Name />
          </>,
        );
        const checkbox = screen.getByRole('checkbox', { name: '전체동의' });
        expect(checkbox).toBeInTheDocument();

        const confirmBtn = screen.getByRole('button', { name: '확인' });
        expect(confirmBtn).toBeInTheDocument();

        const user = userEvent.setup();
        await user.click(checkbox);
        expect(checkbox).toBeChecked();

        await user.click(confirmBtn);

        const titleOfNamePage = screen.getByText(/이름페이지/);
        expect(titleOfNamePage).toBeInTheDocument();
      });
}

 
이렇게 작성했을때 테스트가 바로 통과했기때문에 별 문제가 없는 줄 알았다.
 
그런데.. 알고 보니 라우터의 기능을 제대로 테스트한게 아닌 것이었다... 
지금 위에 구현 코드에도 보면 React Router로 페이지에 라우팅 경로를 부여해주는 역할은 App.tsx에서 해주고 있는데, 테스트에서는 이렇게 정의된 라우팅 경로를 불러온 곳이 없다. 테스트는 단지 약관동의페이지와 이름페이지 두개를 동시에 띄워서 해당하는 요소를 찾았기 때문에 통과한 것이었다.
하하..
 
자 그럼 React Router로 연결되는 페이지는 어떻게 테스트 하는 것인가?
React Testing Library의 공식 문서와 React Router 공식문서를 뒤져 테스트 렌더링하는 해당 페이지의 <Routes> 정의부를 `<BrowserRouter />` 혹은 `<MemoryRouter />`로 감싸주어야 한다는 것을 알았다.
그런데 무엇을 써야하는 것인지에 대한 멘붕이 오기 시작..
 

BrowserRouter vs MemoryRouter

BrowserRouter로 구현

처음에는 RTL 공식문서의 맨 위 첫예제에 나오는 것처럼 BrowserRouter로 구현해보았다. 그리고 테스트가 아닌 라우터를 사용하는 구현부인 App.tsx 자체가 BrowserRouter 라우터로 구현되어있으니까 BrowserRouter로 구현해야된다고 생각했다;;
 
testUtils.tsx

import { RenderOptions, render } from '@testing-library/react';

interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
  route?: string;
}

function renderWithBrowserRouter(
  ui: React.ReactElement,
  extendedRenderOptions: ExtendedRenderOptions = {},
) {
  const {
    route = '/',
   } = extendedRenderOptions;

  window.history.pushState({}, 'Test Page', route);

  const Wrapper = ({ children }: PropsWithChildren) => (
      <BrowserRouter>{children}</BrowserRouter>
  );

  return {
    ...render(ui, { wrapper: Wrapper }),
  };
}

 
Agreement.test.tsx

import { renderWithBrowserRouter } from '@/utils/testUtils';

it(...
  renderWithBrowserRouter(
      <Routes>
        <Route path='/agreement' element={<Agreement />} />
        <Route path='/name' element={<Name />} />
      </Routes>,
    );
 )

 
 
그런데 테스트하려는 Element를 찾지 못한다는 에러가 발생

 TestingLibraryElementError: Unable to find an accessible element with the role "checkbox" and name "전체동의"

 
BrowserRouter만 띄우는것은 테스트하려는 컴포넌트를 띄우는게 아니고 정의한 경로를 띄우는 것이다. 
그리고 renderWithBrowserRouter 함수에 정의한 route path를 보면 '/' 로 적어주어서 '/' 에 해당하는 페이지를 처음에 렌더링 시키는 것. root path인 `/` 라우터에 해당하는 컴포넌트가 없으므로 테스트 컴포넌트가 뜰일이 없었던 것.
 

MemoryRouter로 구현

RTL 공식문서에 //use when you want to manually control the history 라고 적혀있다. 

 
내가 수동으로 직접 히스토리를 제어하고 싶으면 MemoryRouter를 써라.
Agreement에서 Name페이지로 가는 라우팅은 이미 컴포넌트에 내부에 구현을 해두었으니 흠.. 직접 수동으로 하는건 아닌거같은데 하고 헷갈렸는데, 이 말은 즉 테스트 환경에서는 자체적인 history stack을 제어하고 싶으면이라는 뜻이었다.
 
React Router 공식문서를 보면 좀 더 명확해진다.
예를들어 `<BrowserRouter>`는 브라우저의 url을 브라우저 내부의 히스토리 스택에 저장하여 사용하는 것이다. 그런데 우리 테스트 환경은 실제 브라우저로 하는게 아니다. Node.js 환경에서 브라우저의 DOM에 접근하기 위해서 사용하는 JSDOM 이라는 도구를 통해 테스트를 하는 것이다. `<BrowserRouter>`가 외부 소스와 연결이 되어있기 때문에, 테스트할때는 history stack을 완전히 제어할 수 있는 `<MemoryRouter>`를 사용하는게 이상적이라고 공식문서에서 설명하고 있다. 
 
따라서 메모리 라우터로 코드를 변경하였다.

수정 이후 테스트코드

import { MemoryRouter, Route, Routes } from 'react-router-dom';

describe('회원가입 약관동의 페이지', () => {
    it('전체 동의 체크 후 확인 버튼 누르면 다음 페이지(이름 입력)로 이동한다', async () => {
        render(
          <MemoryRouter initialEntries={["/agreement", “/name”]}>
            <Routes>
              <Route path="/agreement" element={<Agreement />} />
              <Route path="/name" element={<Name />} />
            </Routes>
          </MemoryRouter>,
        );
        const checkbox = screen.getByRole('checkbox', { name: '전체동의' });
        expect(checkbox).toBeInTheDocument();

        const confirmBtn = screen.getByRole('button', { name: '확인' });
        expect(confirmBtn).toBeInTheDocument();

        const user = userEvent.setup();
        await user.click(checkbox);
        expect(checkbox).toBeChecked();

        await user.click(confirmBtn);

        const titleOfNamePage = screen.getByText(/이름페이지/);
        expect(titleOfNamePage).toBeInTheDocument();
      });
}

react-router-dom에서 가져온 `<MemoryRouter>`컴포넌트의 initialEntries 속성에 테스트하고 싶은 컴포넌트의 순서대로 차례로 입력해준다.

이렇게 하면 메모리라우터에서 적어준 차례대로 컴포넌트가 렌더링되고, 요소들을 dom에서 잘 찾아서 테스트할할 수 있다.

 
테스트로 멘붕와서 도움을 구했던 옆자리 동료와의 논의 후 왔던슬랙챗.. ㅋㅋ 오랜만에 동료랑 이런 얘기하니 재미있었다.. 🤣
 

 
 

결론 

결국 `<MemoryRouter>`도 메모리 히스토리 스택으로 url을 관리하므로, 내부적으로 BrowserRouter로 컴포넌트가 구현이 되었다고 해도 테스트환경에서는 `<MemoryRouter>`를 사용하는게 외부 소스에 의존하지 않기때문에 더 일관성있게 제어하기 쉽다.