react-router-dom useHistory 함수 mocking하기

jest.requireActual을 이용해 useHistory를 제외한 나머지 메서드는 기존에 있던 것을 사용하도록하고 useHistory의 return 값만 mocking 해줍니다

const mockPush = jest.fn();

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useHistory() {
    return { push: mockPush };
  },
}));

그럼 이제 useHistory를 호출했을때 return 값은jest.fn()이 됩니다. 이를 사용하여 push 함수와 함께 호출되는 인자를 테스트할 수 있습니다

// 컴포넌트
function handleGoToAddRoom() {
  history.push('/addRoom');
}

// 테스트 코드
it('routing to "Add Room" page when click "방을 등록해볼까요?" button', () => {
  const { getByText } = render((
    <MainPage />
  ));

  fireEvent.click(getByText('방을 등록해볼까요?'));

  expect(mockPush).toBeCalledWith('/addRoom');
});