문제 원인

라우팅 관련 테스트 코드를 작성하면서 두 가지 문제를 발견했다.

첫 번째는 <Router> 컴포넌트를 사용할 때, history props가 없는 문제

두 번째는 페이지 이동 테스트를 할 때 컴포넌트가 리렌더링이 되지 않아, element가 업데이트되지 않는 문제이다.

문제 분석

첫 번째 문제는 history prop이 deprecated 된게 원인으로 파악됐다.

두 번째 문제는 render 함수가 컴포넌트를 렌더링할 때, 딱 한 번만 렌더링함으로 다른 페이지로 이동하는 테스트를 했을 때 컴포넌트가 업데이트되지 않는점이 문제인 것 같다.

문제 해결

첫 번째 문제부터 살펴보자. 기존 테스트 코드는 아래와 같이 사용했다.

import { Router } from "react-router-dom";

const history = createMemoryHistory();

render (<Router history={history} />);

위 코드에서 <Router> 컴포넌트에 history prop 대신 location 과 navigator props를 사용했다.

import { Router } from "react-router-dom";

const history = createMemoryHistory();

render (
  <Router location={history.location} navigator={history} />
);

두 번째 문제를 살펴보자. 기존 테스트 코드는 아래와 같다. 렌더링을 하고 이벤트를 발생시켜 페이지를 이동하는 테스트를 했다.

render (
  render (
  	<Router location={history.location} navigator={history}>
  		<App />
  	</Router>
  );
)

fireEvent.click(...);

...
                

위 코드는 한 번만 렌더링 하므로 render 함수가 반환하는 rerender 함수를 사용했다. 이벤트를 발생 시키고 컴포넌트를 리렌더링했다.

const { rerender } = render (
  render (
  	<Router location={history.location} navigator={history}>
  		<App />
  	</Router>
  );
)

fireEvent.click(...);
                
rerender(render (
  render (
  	<Router location={history.location} navigator={history}>
  		<App />
  	</Router>
  );
));

...