React Query 도입 관련 Jest 쿼리 캐시 hydrate 문제

const renderLiveMonitor = async () => {
  const context = { params: {} };
  const result = await getServerSideProps(context as GetServerSidePropsContext);
  if ('props' in result) {
    const { props } = result as {
      props: ServerSideProps & { dehydratedState: any };
    };
    // testing library의 render로는 필요한 환경이 없어서 provider들을 추가한 customRender 함수이다.
    render(<LiveMonitor {...props} />, props.dehydratedState);
    return props;
  }
};

문제상황

getServerSideProps에서 dehydrate 한 queryClient가 LiveMoniter 렌더 시 hydrate되길 기대했다. 하지만 _app.tsx를 테스트 환경에서 사용하지 않기 때문에 customRender 함수에서 Hydrate를 해도 기존 queryClient가 없기 때문에 dehydrate된 queryClient가 빈값으로 들어오고 있다고 판단했다.

해결

custom Render에서 QueryClientProvider와 Hydrate를 추가하여 주었다. 테스트시 렌더링이 되며 쿼리 프로바이더가 존재하고 하위 Hydrate 컴포넌트에 deHydrate된 queryClient를 전달하여 테스트 쿼리 클라이언트를 hydrate할 수 있었다.

테스트 도중 에러 발생

const Providers = ({ children, dehydrateState }: ProvidersProps) => {
  const queryClient = useRef(new QueryClient());
  return (
    <ThemeProvider theme={defaultTheme}>
      <QueryClientProvider client={queryClient.current}>
        <Hydrate state={dehydrateState}>
          <Provider>{children}</Provider>
        </Hydrate>
      </QueryClientProvider>
    </ThemeProvider>
  );
};

const customRender = (
  ui: React.ReactElement,
  dehydrateClient?: any,
  options?: Omit<RenderOptions, 'wrapper'>,
) =>
  render(ui, {
    wrapper: props => <Providers {...props} dehydrateState={dehydrateClient} />,
    ...options,
  });

export * from '@testing-library/react';
export { customRender as render };

테스트 통과 완료

Jest 기능 테스트 에서 적절하지 못한 코드 발견 경험

내가 짠 코드를 통해서 래팩토링 / 기능 추가시 테스트 실패를 통해 개선점을 찾은 경험

const { isRefetching } = useQuery({
    queryKey: [USER_SUBSCRIPTION_QUERY_KEY],
    refetchOnMount: false,
  });

gitHub action 관련 환경변수 적용 문제