Vitest - useNavigate 테스트

vitest 환경에서 react-router-dom > useNavigate 테스트에 관한 글입니다.

목적

테스트 대상 컴포넌트에서 useNavigate 함수를 통해 페이지 전환하는 경우, 원하는 페이지로 이동되는지를 테스트.
ex) 목록화면에서 등록버튼 클릭 시 등록화면으로 이동되는지 테스트

1. 사전 준비

1. vite 기반의 테스트라이브러리인 vitest 기반의 테스트 환경 구축
2. 테스트 대상 페이지컴포넌트를 MemoryRouter등으로 래핑하기

테스트 코드 작성

1. useNavigate 목킹하기

import { expect, describe, vi } from 'vitest'

// navigator 함수 목킹
const mockedNavigator = vi.fn()

// react-router-dom 목킹
vi.mock('react-router-dom', async () => ({
	...((await vi.importActual('react-router-dom')) as object), // technically it passes without this too, but I'm not sure if its there for other tests to use the real thing so I left it in
	useNavigate: () => mockedNavigator
}))

구문해석:

const mockedNavigator = vi.fn()

useNavigate 대신 사용할 목킹함수 할당. 해당 함수는 아래 테스트 코드에서 호출여부 및 호출파라미터를 테스트하기 위해 전역으로 설정.

// react-router-dom 목킹
vi.mock('react-router-dom', async () => ({
	...((await vi.importActual('react-router-dom')) as object), // technically it passes without this too, but I'm not sure if its there for other tests to use the real thing so I left it in
	useNavigate: () => mockedNavigator
}))

vi.mock()으로 react-router-dom 라이브러리를 목킹한 후, 테스트할 속성을 수정. 현재는 useNavigate 함수를 테스트할 것이므로 useNavigate를 대체.
useNavigate는 화면에서 useNavigate()를 호출하면 함수를 리턴하게 되므로 위와 같이 작성.

2. 테스트 코드 작성

1. 페이지 코드

// 등록 버튼 클릭 시
const onClickRegister = () => {
		navigate({ pathname: '등록페이지 path' })
	}
    
 // ...중략
 
 // 등록 버튼
 <Button onClick={onClickRegister}>등록</Button>

2. 테스트 코드

it('등록 버튼 클릭 시 등록페이지로 이동', async function () {
		// arrange
		renderWithQueryClient(<목록페이지컴포넌트 />)
        
		// act
		await userEvent.click(screen.getByText('등록'))
        
		// assert
		expect(mockedNavigator).toBeCalledWith({ pathname: '등록페이지 path' })
	})