TanStackQuery (17) - 테스트

 

그렇다면 React Query를 직접 사용해보자~

 

먼저 다음의 CLI환경에서 명령어를 실행하여 설치한다

npm install @testing-library/react-hooks react-test-renderer --save-dev

 

우리의 첫번째 테스트

예를 들어 다음의 사용자 hook이 존재한다고 가정해보자

export function useCustomHok() {
	return useQuery({ queryKey: ['customHook'], queryFn: () => 'Hello' })
}

 

쿼리가 병렬로 실행되지 않도록 해야한다

 

재시도 해제

지수 백오프를 사용하여 3번의 재시도로 기본 설정되어있으므로 오류가 있는 쿼리를 테스트하는 경우 테스트가 시간 초과될 가능성이 높다

따라서 재시도에 대한 설정이 필요한데,

QueryClientProvider를 사용하는 것이다.

const queryClient = new QueryClient({
	defaultOptions: {
    	queries: {
        	retry: false,
        },
    },
 })
 
 const wrapper = ({ children }) => {
 	<QueryClientProvider client = { queryClient }> {children}</QueryClientProvider>
}

이렇게 작성하면 구성 요소 트리의 모든 쿼리에 대한 기본값이 재시도 없음으로 설정된다.

실제 useQuery에 명시적 재시도가 설정되지 않은 경우에만 이 기능이 동작함에 주의하라

 

 

더 많은 로드 테스트 / 무한 스크롤

먼저 API 응답을 작성해보자

여기서는 page와 items가 필요하다

function generateMockedResponse(page) {
	return {
    	page: page,
        items: [...]
    }
}

 

그런 다음, nock(라이브러리) 구성에서는 페이지에 따라 응답을 구분해야하기에 url을 사용한다

여기서 url의 값은 /?page=1의 형식을 갖는다.

const expectation = nock('http://example.com')
	.persist()
    .query(true)
    .get('/api/data')
    .reply(200, (uri) => {
    	const url = new URL('http://example.com${uri}')
        const { page } = Object.fromEntries(url.searchParams)
        return generateMockedresponse(page)
})

 

여기서 persist 함수는 무엇일까?

 

*persist : 설정이 한 번만 적용되는 것이 아니라, 계속해서 요청을 가로채고 응답할 수 있게 한다

 

위 코드에서는 query와 get에 대한 동작을 가로채는 거겟죠?