Link를 포함하는 컴포넌트의 테스트를 작성할 때 Link를 Router 바깥에서 사용하고 있다는 에러를 확인할 수 있다. 테스트 코드 내에서 이를 해결하기 위한 세 가지 방법이 있다.
컴포넌트를 Memory Router로 감싸준다. 그러나 하위 컴포넌트에서 Link를 직접 불러오는 것은 관심사 분리에 도움이 되지는 않는다.
상위 컴포넌트에서, 예를 들어 라우트와 매칭된 페이지 컴포넌트에서 하위 컴포넌트로 Link를 전달해준다. 테스트 코드 내에서도 Link를 함수로 정의한 다음에 컴포넌트를 렌더시켜준다.
상위 컴포넌트에서 링크가 클릭되면 라우트를 주소와 매칭시켜주는 함수를 전달해준다. 하위 컴포넌트에서는 Link가 아닌 a 태그를 사용하고 클릭 이벤트를 걸어준다. 이벤트에 따라 실제 주소로 새로고침되지 않도록 막아준 다음에 대상이 되는 객체를 넣어 전달받은 함수를 실행시킨다. 함수가 실행되면 useHistory의해 대상 객체의 id를 받아 생성된 주소로 라우트를 매칭한다.
props를 분해하여 얻을 수도 있지만, useParams()를 활용하여 보다 편리하게 params를 얻을 수도 있다. 다만 테스트 코드 작성 시에 match가 정의되지 않았다는 에러가 발생했고, 이를 해결하지 못하여 당혹스러웠다. 결국 해설 강의와 같이, 전달받은 params가 없을 때 useParams통해 불러오도록 작성했지만, useParams만 사용하는 경우에는 이를 어떻게 mocking 해줘야 하는 건지 잘 모르겠다.