show more 버튼이 노출되지 않는 테스트 케이스에서 limit 오동작 문제

답변 감사합니다!

그런데 좀 더 테스트 해 보니.. 단순히 queryKey의 문제라기보단, 테스트 케이스가 다른 테스트 케이스에 영향을 주면서 발생하는 문제같아 보입니다.

테스트로 fetcher 쪽에 아래와 같이 콘솔을 찍어서 확인해보면, offset이 계속해서 증가하는 걸 확인할 수 있었어요.

export const defaultFetcher = ({ queryKey, pageParam }) => {
  const [url, params] = queryKey;

  // for test
  console.log('pageParam', pageParam);

  return api.get(url, { params: { ...params, ...pageParam } }).then(res => {
    return res.data;
  });
};

아래와 같이 render.jsx 쪽에 queryClient가 render를 할 때마다 생성되는 것이 아니라, 하나의 인스턴스만 생성되고 그 인스턴스를 매 테스트 케이스마다 사용하게 되는데요, 이 부분이 문제이지 않을까 싶습니다..! queryKey 캐싱의 문제도 이 때문인 것 같아요. (params -> options로 바꿀 필요가 없어 보입니다.)

// https://tanstack.com/query/v4/docs/react/guides/testing
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // ✅ turns retries off
      retry: false
    },
  },
  logger: {
    log: console.log,
    warn: console.warn,
    // ✅ no more errors on the console for tests
    error: process.env.NODE_ENV === 'test' ? () => {} : console.error,
  },
});

export default async (component, options = {}) => {
  const { routerProps } = options;
  const user = userEvent.setup();

  return {
    user,
    ...render(
      <QueryClientProvider client={queryClient}>
        <MemoryRouter {...routerProps}>{component}</MemoryRouter>
        <Toaster />
      </QueryClientProvider>,
    ),
  };
};

queryClient 인스턴스를 매 테스트 케이스마다 독립적으로 사용할 수 있도록

export default async (component, options = {}) => {
  const { routerProps } = options;
  const user = userEvent.setup();

  // https://tanstack.com/query/v4/docs/react/guides/testing
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        // ✅ turns retries off
        retry: false,
      },
    },
    logger: {
      log: console.log,
      warn: console.warn,
      // ✅ no more errors on the console for tests
      error: process.env.NODE_ENV === 'test' ? () => {} : console.error,
    },
  });

  return {
    user,
    ...render(
      <QueryClientProvider client={queryClient}>
        <MemoryRouter {...routerProps}>{component}</MemoryRouter>
        <Toaster />
      </QueryClientProvider>,
    ),
  };
};

으로 변경해주면 해결되는 것 같습니다..!

문서에서도 각 테스트 케이스 별로 독립적인 queryClient가 적용될 수 있도록 하라는 것 같습니다!

안녕하세요 leo.kang님!

훨씬 더 근본적인 정확한 해결방법인 것 같네요. 👍

오후에 저도 조금만 더 증상 살펴본다음에 말씀해주신 내용대로 코드 반영해서 수정해두도록 하겠습니다.

오랜만에 주말에 일정이 많다보니... 미리 찾아보고 말씀드렸어야 했는데 찾아주셔서 감사합니다.

좋은 하루 되세요!

조금 늦었네요!

https://github.com/practical-fe-testing/test-example-shopping-mall/commit/df725bdc3025949a0ae06ced1907e63071ccc659

수정해서 반영해뒀습니다. 늘 감사합니다!

확인했습니다, 빠르게 반영해 주셔서 감사합니다!