jest.useFakeTimers with useQuery

[savv]

We started using react-query (latest) into our codebase. In our testing approach, we useFakeTimers, which means that we cannot use waitFor (testing-library/react-hooks-testing-library#631). We would also prefer to avoid the potential for indeterminism that comes with introducing real time into tests.

One work around we found is to call jest.runAllTimers() repeatedly, until the desired condition is met (e.g. in the case of test involving react-query: whether a fetch() of mock has been called). See also code below.

To me this work around seems functionally equivalent but I'm wondering if I missed anything.

export async function waitForWithFakes<T>(cond: () => T): Promise<T | null> {
  let val: null | T = null;
  for (let i = 0; i < 10; ++i) {
    val = cond();
    if (val) {
      break;
    }

    jest.runAllTimers();
  }

  return val;
}

[louis-young]

Hi 👋

I should preface this by saying that the package you referenced has been (partially) merged into the main @testing-library/react package. It shouldn't be used with React 18.

When you use fake timers you mock various date and timing APIs which is why you can't automagically wait for something to happen; you've mocked/faked time, so it's not moving/advancing in the background. Having said that, you should be able to advance the timers by N amount of milliseconds or run pending/all timers as you demonstrated above. The situations in which I can imagine fake time being useful in a unit test is for testing things like re-fetch intervals, which you should be able to do by advancing time (see: https://jestjs.io/docs/timer-mocks#advance-timers-by-time).

Does this help?