diff --git a/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx b/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx index e114642019..26de8f3335 100644 --- a/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx +++ b/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx @@ -1,5 +1,5 @@ -import { describe, expect, it, vi } from 'vitest' -import { fireEvent, render, waitFor } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { fireEvent, render } from '@testing-library/react' import * as React from 'react' import { createRenderStream, @@ -46,6 +46,14 @@ const fetchItems = async ( } describe('useInfiniteQuery', () => { + beforeEach(() => { + vi.useFakeTimers() + }) + + afterEach(() => { + vi.useRealTimers() + }) + const queryCache = new QueryCache() const queryClient = new QueryClient({ queryCache, @@ -73,7 +81,7 @@ describe('useInfiniteQuery', () => { renderWithClient(queryClient, ) - await sleep(100) + await vi.advanceTimersByTimeAsync(100) expect(states.length).toBe(2) expect(states[0]).toEqual({ @@ -186,7 +194,7 @@ describe('useInfiniteQuery', () => { renderWithClient(queryClient, ) - await waitFor(() => expect(noThrow).toBe(true)) + await vi.waitFor(() => expect(noThrow).toBe(true)) }) it('should keep the previous data when placeholderData is set', async () => { @@ -222,15 +230,15 @@ describe('useInfiniteQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => rendered.getByText('data: 0-desc')) + await vi.waitFor(() => rendered.getByText('data: 0-desc')) fireEvent.click(rendered.getByRole('button', { name: /fetchNextPage/i })) - await waitFor(() => rendered.getByText('data: 0-desc,1-desc')) + await vi.waitFor(() => rendered.getByText('data: 0-desc,1-desc')) fireEvent.click(rendered.getByRole('button', { name: /order/i })) - await waitFor(() => rendered.getByText('data: 0-asc')) - await waitFor(() => rendered.getByText('isFetching: false')) - await waitFor(() => expect(states.length).toBe(6)) + await vi.waitFor(() => rendered.getByText('data: 0-asc')) + await vi.waitFor(() => rendered.getByText('isFetching: false')) + await vi.waitFor(() => expect(states.length).toBe(6)) expect(states[0]).toMatchObject({ data: undefined, @@ -299,7 +307,7 @@ describe('useInfiniteQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => { + await vi.waitFor(() => { rendered.getByText('count: 1') }) @@ -348,7 +356,7 @@ describe('useInfiniteQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => { + await vi.waitFor(() => { rendered.getByText('count: 1') }) @@ -397,12 +405,12 @@ describe('useInfiniteQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => rendered.getByText('data: 0')) + await vi.waitFor(() => rendered.getByText('data: 0')) fireEvent.click(rendered.getByRole('button', { name: /fetchNextPage/i })) - await waitFor(() => rendered.getByText('data: 1,0')) + await vi.waitFor(() => rendered.getByText('data: 1,0')) - await waitFor(() => expect(states.length).toBe(4)) + await vi.waitFor(() => expect(states.length).toBe(4)) expect(states[0]).toMatchObject({ data: undefined, isSuccess: false, @@ -453,7 +461,7 @@ describe('useInfiniteQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => { + await vi.waitFor(() => { rendered.getByText('data: 10') }) @@ -461,7 +469,7 @@ describe('useInfiniteQuery', () => { rendered.getByRole('button', { name: /fetch previous page/i }), ) - await waitFor(() => { + await vi.waitFor(() => { rendered.getByText('data: 9,10') }) @@ -538,18 +546,18 @@ describe('useInfiniteQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => rendered.getByText('data: 10')) + await vi.waitFor(() => rendered.getByText('data: 10')) fireEvent.click(rendered.getByRole('button', { name: /fetchNextPage/i })) - await waitFor(() => rendered.getByText('data: 10,11')) + await vi.waitFor(() => rendered.getByText('data: 10,11')) fireEvent.click( rendered.getByRole('button', { name: /fetchPreviousPage/i }), ) - await waitFor(() => rendered.getByText('data: 9,10,11')) + await vi.waitFor(() => rendered.getByText('data: 9,10,11')) fireEvent.click(rendered.getByRole('button', { name: /refetch/i })) - await waitFor(() => rendered.getByText('isFetching: false')) - await waitFor(() => expect(states.length).toBe(8)) + await vi.waitFor(() => rendered.getByText('isFetching: false')) + await vi.waitFor(() => expect(states.length).toBe(8)) // Initial fetch expect(states[0]).toMatchObject({ @@ -656,11 +664,11 @@ describe('useInfiniteQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => rendered.getByText('data: 10')) + await vi.waitFor(() => rendered.getByText('data: 10')) fireEvent.click(rendered.getByRole('button', { name: /refetch/i })) - await waitFor(() => rendered.getByText('isFetching: false')) - await waitFor(() => expect(states.length).toBe(4)) + await vi.waitFor(() => rendered.getByText('isFetching: false')) + await vi.waitFor(() => expect(states.length).toBe(4)) // Initial fetch expect(states[0]).toMatchObject({ @@ -743,11 +751,11 @@ describe('useInfiniteQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => rendered.getByText('data: 10')) + await vi.waitFor(() => rendered.getByText('data: 10')) fireEvent.click(rendered.getByRole('button', { name: /fetchNextPage/i })) - await waitFor(() => rendered.getByText('isFetching: false')) - await waitFor(() => expect(states.length).toBe(4)) + await vi.waitFor(() => rendered.getByText('isFetching: false')) + await vi.waitFor(() => expect(states.length).toBe(4)) // Initial fetch expect(states[0]).toMatchObject({ @@ -832,13 +840,13 @@ describe('useInfiniteQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => rendered.getByText('data: 10')) + await vi.waitFor(() => rendered.getByText('data: 10')) fireEvent.click( rendered.getByRole('button', { name: /fetchPreviousPage/i }), ) - await waitFor(() => rendered.getByText('isFetching: false')) - await waitFor(() => expect(states.length).toBe(4)) + await vi.waitFor(() => rendered.getByText('isFetching: false')) + await vi.waitFor(() => expect(states.length).toBe(4)) // Initial fetch expect(states[0]).toMatchObject({ @@ -916,27 +924,27 @@ describe('useInfiniteQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => + await vi.waitFor(() => expect(rendered.getByText('status: success, idle')).toBeInTheDocument(), ) - await waitFor(() => + await vi.waitFor(() => expect( rendered.getByText('data: {"pages":[10],"pageParams":[10]}'), ).toBeInTheDocument(), ) fireEvent.click(rendered.getByRole('button', { name: /refetch/i })) - await waitFor(() => + await vi.waitFor(() => expect( rendered.getByText('status: success, fetching'), ).toBeInTheDocument(), ) fireEvent.click(rendered.getByRole('button', { name: /fetchNextPage/i })) - await waitFor(() => + await vi.waitFor(() => expect(rendered.getByText('status: success, idle')).toBeInTheDocument(), ) - await waitFor(() => + await vi.waitFor(() => expect( rendered.getByText('data: {"pages":[10,11],"pageParams":[10,11]}'), ).toBeInTheDocument(), @@ -983,7 +991,7 @@ describe('useInfiniteQuery', () => { renderWithClient(queryClient, ) - await sleep(300) + await vi.advanceTimersByTimeAsync(300) const expectedCallCount = 3 expect(fetchPage).toBeCalledTimes(expectedCallCount) @@ -1059,7 +1067,7 @@ describe('useInfiniteQuery', () => { renderWithClient(queryClient, ) - await sleep(300) + await vi.advanceTimersByTimeAsync(300) const expectedCallCount = 2 expect(fetchPage).toBeCalledTimes(expectedCallCount) @@ -1117,7 +1125,7 @@ describe('useInfiniteQuery', () => { renderWithClient(queryClient, ) - await sleep(100) + await vi.advanceTimersByTimeAsync(100) expect(states.length).toBe(2) expect(states[0]).toMatchObject({ @@ -1174,7 +1182,7 @@ describe('useInfiniteQuery', () => { renderWithClient(queryClient, ) - await sleep(300) + await vi.advanceTimersByTimeAsync(300) expect(fetches).toBe(2) expect(queryClient.getQueryState(key)).toMatchObject({ @@ -1223,7 +1231,7 @@ describe('useInfiniteQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => + await vi.waitFor(() => expect( rendered.getByText('data: {"pages":[0],"pageParams":[0]}'), ).toBeInTheDocument(), @@ -1231,7 +1239,7 @@ describe('useInfiniteQuery', () => { fireEvent.click(rendered.getByRole('button', { name: /setPages/i })) - await waitFor(() => + await vi.waitFor(() => expect( rendered.getByText('data: {"pages":[7,8],"pageParams":[7,8]}'), ).toBeInTheDocument(), @@ -1241,7 +1249,7 @@ describe('useInfiniteQuery', () => { fireEvent.click(rendered.getByRole('button', { name: /refetch/i })) - await waitFor(() => + await vi.waitFor(() => expect( rendered.getByText('data: {"pages":[14,30],"pageParams":[7,15]}'), ).toBeInTheDocument(), @@ -1249,6 +1257,8 @@ describe('useInfiniteQuery', () => { }) it('should only refetch the first page when initialData is provided', async () => { + vi.useRealTimers() + const key = queryKey() const renderStream = @@ -1345,7 +1355,7 @@ describe('useInfiniteQuery', () => { renderWithClient(queryClient, ) - await sleep(100) + await vi.advanceTimersByTimeAsync(100) expect(states.length).toBe(2) expect(states[0]).toMatchObject({ @@ -1384,7 +1394,7 @@ describe('useInfiniteQuery', () => { renderWithClient(queryClient, ) - await sleep(100) + await vi.advanceTimersByTimeAsync(100) expect(states.length).toBe(2) expect(states[0]).toMatchObject({ @@ -1423,7 +1433,7 @@ describe('useInfiniteQuery', () => { renderWithClient(queryClient, ) - await sleep(100) + await vi.advanceTimersByTimeAsync(100) expect(states.length).toBe(2) expect(states[0]).toMatchObject({ @@ -1465,7 +1475,7 @@ describe('useInfiniteQuery', () => { renderWithClient(queryClient, ) - await sleep(100) + await vi.advanceTimersByTimeAsync(100) expect(states.length).toBe(2) expect(states[0]).toMatchObject({ @@ -1576,31 +1586,31 @@ describe('useInfiniteQuery', () => { rendered.getByText('Loading...') - await waitFor(() => rendered.getByText('Item: 2')) - await waitFor(() => rendered.getByText('Page 0: 0')) + await vi.waitFor(() => rendered.getByText('Item: 2')) + await vi.waitFor(() => rendered.getByText('Page 0: 0')) fireEvent.click(rendered.getByText('Load More')) - await waitFor(() => rendered.getByText('Loading more...')) - await waitFor(() => rendered.getByText('Item: 5')) - await waitFor(() => rendered.getByText('Page 0: 0')) - await waitFor(() => rendered.getByText('Page 1: 1')) + await vi.waitFor(() => rendered.getByText('Loading more...')) + await vi.waitFor(() => rendered.getByText('Item: 5')) + await vi.waitFor(() => rendered.getByText('Page 0: 0')) + await vi.waitFor(() => rendered.getByText('Page 1: 1')) fireEvent.click(rendered.getByText('Load More')) - await waitFor(() => rendered.getByText('Loading more...')) - await waitFor(() => rendered.getByText('Item: 8')) - await waitFor(() => rendered.getByText('Page 0: 0')) - await waitFor(() => rendered.getByText('Page 1: 1')) - await waitFor(() => rendered.getByText('Page 2: 2')) + await vi.waitFor(() => rendered.getByText('Loading more...')) + await vi.waitFor(() => rendered.getByText('Item: 8')) + await vi.waitFor(() => rendered.getByText('Page 0: 0')) + await vi.waitFor(() => rendered.getByText('Page 1: 1')) + await vi.waitFor(() => rendered.getByText('Page 2: 2')) fireEvent.click(rendered.getByText('Refetch')) - await waitFor(() => rendered.getByText('Background Updating...')) - await waitFor(() => rendered.getByText('Item: 8')) - await waitFor(() => rendered.getByText('Page 0: 3')) - await waitFor(() => rendered.getByText('Page 1: 4')) - await waitFor(() => rendered.getByText('Page 2: 5')) + await vi.waitFor(() => rendered.getByText('Background Updating...')) + await vi.waitFor(() => rendered.getByText('Item: 8')) + await vi.waitFor(() => rendered.getByText('Page 0: 3')) + await vi.waitFor(() => rendered.getByText('Page 1: 4')) + await vi.waitFor(() => rendered.getByText('Page 2: 5')) // ensure that Item: 4 is rendered before removing it expect(rendered.queryAllByText('Item: 4')).toHaveLength(1) @@ -1608,12 +1618,12 @@ describe('useInfiniteQuery', () => { // remove Item: 4 fireEvent.click(rendered.getByText('Remove item')) - await waitFor(() => rendered.getByText('Background Updating...')) + await vi.waitFor(() => rendered.getByText('Background Updating...')) // ensure that an additional item is rendered (it means that cursors were properly rebuilt) - await waitFor(() => rendered.getByText('Item: 9')) - await waitFor(() => rendered.getByText('Page 0: 6')) - await waitFor(() => rendered.getByText('Page 1: 7')) - await waitFor(() => rendered.getByText('Page 2: 8')) + await vi.waitFor(() => rendered.getByText('Item: 9')) + await vi.waitFor(() => rendered.getByText('Page 0: 6')) + await vi.waitFor(() => rendered.getByText('Page 1: 7')) + await vi.waitFor(() => rendered.getByText('Page 2: 8')) // ensure that Item: 4 is no longer rendered expect(rendered.queryAllByText('Item: 4')).toHaveLength(0) @@ -1701,16 +1711,16 @@ describe('useInfiniteQuery', () => { rendered.getByText('Loading...') - await waitFor(() => { + await vi.waitFor(() => { rendered.getByText('Item: 9') rendered.getByText('Page 0: 0') }) fireEvent.click(rendered.getByText('Load More')) - await waitFor(() => rendered.getByText('Loading more...')) + await vi.waitFor(() => rendered.getByText('Loading more...')) - await waitFor(() => { + await vi.waitFor(() => { rendered.getByText('Item: 19') rendered.getByText('Page 0: 0') rendered.getByText('Page 1: 1') @@ -1718,9 +1728,9 @@ describe('useInfiniteQuery', () => { fireEvent.click(rendered.getByText('Load More')) - await waitFor(() => rendered.getByText('Loading more...')) + await vi.waitFor(() => rendered.getByText('Loading more...')) - await waitFor(() => { + await vi.waitFor(() => { rendered.getByText('Item: 29') rendered.getByText('Page 0: 0') rendered.getByText('Page 1: 1') @@ -1731,13 +1741,11 @@ describe('useInfiniteQuery', () => { fireEvent.click(rendered.getByText('Remove Last Page')) - await sleep(10) - fireEvent.click(rendered.getByText('Refetch')) - await waitFor(() => rendered.getByText('Background Updating...')) + await vi.waitFor(() => rendered.getByText('Background Updating...')) - await waitFor(() => { + await vi.waitFor(() => { rendered.getByText('Page 0: 3') rendered.getByText('Page 1: 4') }) @@ -1790,11 +1798,11 @@ describe('useInfiniteQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => rendered.getByText('visible')) + await vi.waitFor(() => rendered.getByText('visible')) fireEvent.click(rendered.getByRole('button', { name: 'hide' })) - await waitFor(() => rendered.getByText('hidden')) + await vi.waitFor(() => rendered.getByText('hidden')) expect(cancelFn).toHaveBeenCalled() }) @@ -1821,12 +1829,14 @@ describe('useInfiniteQuery', () => { const rendered = render() - await waitFor(() => + await vi.waitFor(() => expect(rendered.getByText('data: custom client')).toBeInTheDocument(), ) }) it('should work with React.use()', async () => { + vi.useRealTimers() + const key = queryKey() const renderStream = createRenderStream({ snapshotDOM: true })