Query never updates when using Vitest fake timers

[dyst5422]

Describe the bug

When using fake timers with vitest, the query result never updates.

import { it, expect, afterAll, beforeAll, vitest } from 'vitest';
import { renderHook, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

beforeAll(() => {
  vitest.useFakeTimers();
});

afterAll(() => {
  vitest.useRealTimers();
});

it('should work', async () => {
  const wrapper = ({ children }) => <QueryClientProvider client={new QueryClient()}>{children}</QueryClientProvider>;
  const { result } = renderHook(
    () => {
      const query = useQuery({
        queryKey: ['some'],
        queryFn: () => 'some',
      });

      console.log(query.data);

      return query;
    },
    { wrapper },
  );

  await waitFor(() => expect(result.current.data).toBe('some'));
});

stdout | src/test.spec.tsx > should work
undefined

 ❯ src/test.spec.tsx (1) 5018ms
   × should work 5016ms

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/test.spec.tsx > should work
Error: Test timed out in 5000ms.
If this is a long-running test, pass a timeout value as the last argument or configure it globally with "testTimeout".
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  1 failed (1)
   Start at  14:56:56
   Duration  5.19s

Your minimal, reproducible example

https://stackblitz.com/edit/stackblitz-starters-kwfghb?file=vite.config.ts

Steps to reproduce

run vitest on the linked example

Expected behavior

I would expect that fake timers don't block the update from propagating.

Notable, without fake timers, it works fine.

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

macOS and nodejs

Tanstack Query adapter

react-query

TanStack Query version

4 and 5

TypeScript version

5

Additional context

I was surprised as I ran into this when migrating from jest to vitest. I know Vitest uses sinonjs timers, so perhaps there's some kind of compatibility problem there.

[dyst5422]

If there is a simple workaround for this (like advancing timers by a bit), I'm very happy to take that as well, bit I tried everything I could think of.

[TkDodo]

if you use fake timers, you need to advance the timers somehow because we use timeouts internally.

[TkDodo]

we use fakeTimers in our tests, too, and you definitely need to advance them manually. See:

query/packages/react-query/src/__tests__/useSuspenseQueries.test.tsx

Lines 174 to 176 in 7a90193

	await act(() => vi.advanceTimersByTimeAsync(10))
	rendered.getByText('loading...')

[dyst5422]

Unfortunate, but I'll take it over being completely unworkable.

[antoantonydh]

I had to do like this to get it worked.

    await act(async () => {
      await jest.advanceTimersByTimeAsync(0);
    });

It happened to me after migrating from react query v3 to v4. Wherever I used jest.useFakeTimers()] , I had to do advanceTimers before expecting the data change from react query. With v3, I normally wait for API call toHaveBeenCalled then do the assertions for data.

beforeEach(() => {
  jest.useFakeTimers().setSystemTime(new Date("2020-01-01"));
});

it("should fetch the data from the API", async () => {
  api.mockResolvedValue(createAxiosResponse([mockData]));

  renderHook(() => useGetTodoList(), {
    wrapper: TestBedWrapper(),
  });

  await waitFor(() => {
    expect(api).toHaveBeenCalledTimes(1);
  });

  // here trying to advanceTimers, so that react query will trigger updates
  await act(async () => {
    await jest.advanceTimersByTimeAsync(0);
  });

  expect(getReduxState()).toEqual(
    expect.objectContaining({
      data: [mockData],
    })
  );

  api.mockResolvedValue(createAxiosResponse([updatedData]));

  act(() => {
    jest.advanceTimersByTime(POLLING_INTERVAL * 1000);
  });

  await waitFor(() => {
    expect(api).toHaveBeenCalledTimes(2);
    expect(getOrderState()).toEqual(
      expect.objectContaining({
        orders: [mockedAcceptedOrder],
      })
    );
  });
});

[dyst5422]

We found that we had to do the following:

beforeAll(() => vi.useFakeTimers({ shouldAdvanceTime: true }));
afterAll(() => vi.useRealTimers());
it('should renew credentials before expiration', async () => {
    const { result } = renderHook(() => useMidwayToken(), { wrapper });
    await waitFor(() => expect(typeof result.current).toBe('string'));

    const midwayTokenBeforeRefresh = result.current;

    await act(() => vi.advanceTimersByTimeAsync(15000));
    await waitFor(() => expect(result.current).toBe(midwayTokenBeforeRefresh));

    await act(() => vi.advanceTimersByTimeAsync(15000));
    await waitFor(() => expect(result.current).not.toBe(midwayTokenBeforeRefresh));
  });

Specifically, shouldAdvanceTime: true fixed all of our problems, both with this and other libraries.

[antoantonydh]

@dyst5422 actually I was able to fix it properly without any hacks. In my case, the issue was due to this line:

beforeEach(() => {
  jest.useFakeTimers().setSystemTime(new Date("2020-01-01"));
});

I changed this to before all

  beforeAll(() => {
    jest.useFakeTimers();
  });

  afterAll(() => {
    jest.useRealTimers();
  });

  beforeEach(() => {
    jest.setSystemTime(new Date(currentTime));

It fixes everything. I don't have to do the advance the timers.