From b1538fc6cb0ce5b5d3f73b01796d2cef5659504e Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Thu, 23 Apr 2026 10:11:00 +0900 Subject: [PATCH 1/2] test(query-persist-client-core/createPersister): lowercase 'Should' to 'should' in 'it' descriptions for consistency (#10560) --- .../src/__tests__/createPersister.test.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/query-persist-client-core/src/__tests__/createPersister.test.ts b/packages/query-persist-client-core/src/__tests__/createPersister.test.ts index b8b1de807b..8e385bc3da 100644 --- a/packages/query-persist-client-core/src/__tests__/createPersister.test.ts +++ b/packages/query-persist-client-core/src/__tests__/createPersister.test.ts @@ -436,7 +436,7 @@ describe('createPersister', () => { }) describe('persistQuery', () => { - it('Should properly persist basic query', async () => { + it('should properly persist basic query', async () => { const storage = getFreshStorage() const { persister, query, queryHash, queryKey, storageKey } = setupPersister(['foo'], { @@ -458,7 +458,7 @@ describe('createPersister', () => { }) }) - it('Should skip persistence if storage is not provided', async () => { + it('should skip persistence if storage is not provided', async () => { const serializeMock = vi.fn() const { persister, query } = setupPersister(['foo'], { storage: null, @@ -473,7 +473,7 @@ describe('createPersister', () => { }) describe('persistQueryByKey', () => { - it('Should skip persistence if storage is not provided', async () => { + it('should skip persistence if storage is not provided', async () => { const serializeMock = vi.fn() const { persister, client, queryKey } = setupPersister(['foo'], { storage: null, @@ -500,7 +500,7 @@ describe('createPersister', () => { expect(serializeMock).toHaveBeenCalledTimes(0) }) - it('Should properly persist basic query', async () => { + it('should properly persist basic query', async () => { const storage = getFreshStorage() const { persister, client, queryHash, queryKey, storageKey } = setupPersister(['foo'], { From e236194f100bd99fe2c5e77ed38a533f8622fbc0 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Thu, 23 Apr 2026 13:44:10 +0900 Subject: [PATCH 2/2] test(react-query/useQuery.promise): improve stability by isolating 'queryClient' per test and switching 'queryFn' to real 'sleep' (#10562) * test(react-query/useQuery.promise): improve stability by isolating 'queryClient' per test and switching 'queryFn' to real 'sleep' * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- .../src/__tests__/useQuery.promise.test.tsx | 166 ++++++------------ 1 file changed, 55 insertions(+), 111 deletions(-) diff --git a/packages/react-query/src/__tests__/useQuery.promise.test.tsx b/packages/react-query/src/__tests__/useQuery.promise.test.tsx index 5e1d892df0..e721c6a4d9 100644 --- a/packages/react-query/src/__tests__/useQuery.promise.test.tsx +++ b/packages/react-query/src/__tests__/useQuery.promise.test.tsx @@ -1,12 +1,11 @@ -import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' import * as React from 'react' import { ErrorBoundary } from 'react-error-boundary' import { createRenderStream, useTrackRenders, } from '@testing-library/react-render-stream' -import { queryKey } from '@tanstack/query-test-utils' -import { waitFor } from '@testing-library/react' +import { queryKey, sleep } from '@tanstack/query-test-utils' import { QueryClient, QueryClientProvider, @@ -18,26 +17,26 @@ import { import { QueryCache } from '../index' describe('useQuery().promise', { timeout: 10_000 }, () => { - const queryCache = new QueryCache() - const queryClient = new QueryClient({ - queryCache, - }) + let queryCache: QueryCache + let queryClient: QueryClient - beforeAll(() => { + beforeEach(() => { vi.useFakeTimers({ shouldAdvanceTime: true, toFake: ['setTimeout', 'clearTimeout', 'setInterval', 'clearInterval'], }) - queryClient.setDefaultOptions({ - queries: { experimental_prefetchInRender: true }, + queryCache = new QueryCache() + queryClient = new QueryClient({ + queryCache, + defaultOptions: { + queries: { experimental_prefetchInRender: true }, + }, }) }) - afterAll(() => { + afterEach(() => { vi.useRealTimers() - queryClient.setDefaultOptions({ - queries: { experimental_prefetchInRender: false }, - }) + queryClient.clear() }) it('should work with a basic test', async () => { @@ -60,10 +59,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { useTrackRenders() const query = useQuery({ queryKey: key, - queryFn: async () => { - await vi.advanceTimersByTimeAsync(1) - return 'test' - }, + queryFn: () => sleep(10).then(() => 'test'), }) return ( @@ -107,7 +103,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { queryKey: key, queryFn: async () => { callCount++ - await vi.advanceTimersByTimeAsync(1) + await sleep(10) return 'test' }, staleTime: 1000, @@ -161,7 +157,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { queryKey: key, queryFn: async () => { callCount++ - await vi.advanceTimersByTimeAsync(1) + await sleep(10) return 'test' }, staleTime: 1000, @@ -238,10 +234,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { useTrackRenders() const query = useQuery({ queryKey: key, - queryFn: async () => { - await vi.advanceTimersByTimeAsync(1) - return 'test' - }, + queryFn: () => sleep(10).then(() => 'test'), initialData: 'initial', }) @@ -274,10 +267,9 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { it('should not fetch with initial data and staleTime', async () => { const key = queryKey() const renderStream = createRenderStream({ snapshotDOM: true }) - const queryFn = vi.fn().mockImplementation(async () => { - await vi.advanceTimersByTimeAsync(1) - return 'test' - }) + const queryFn = vi + .fn() + .mockImplementation(() => sleep(10).then(() => 'test')) function MyComponent(props: { promise: Promise }) { useTrackRenders() @@ -339,10 +331,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { function Page() { const query = useQuery({ queryKey: key, - queryFn: async () => { - await vi.advanceTimersByTimeAsync(1) - return 'test' - }, + queryFn: () => sleep(10).then(() => 'test'), placeholderData: 'placeholder', }) useTrackRenders() @@ -392,10 +381,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { const [count, setCount] = React.useState(0) const query = useQuery({ queryKey: [...key, count], - queryFn: async () => { - await vi.advanceTimersByTimeAsync(1) - return 'test-' + count - }, + queryFn: () => sleep(10).then(() => 'test-' + count), placeholderData: keepPreviousData, }) @@ -461,10 +447,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { function Page() { const query = useQuery({ queryKey: key, - queryFn: async () => { - await vi.advanceTimersByTimeAsync(1) - return { name: 'test' } - }, + queryFn: () => sleep(10).then(() => ({ name: 'test' })), select: (data) => data.name, }) @@ -517,7 +500,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { const query = useQuery({ queryKey: key, queryFn: async () => { - await vi.advanceTimersByTimeAsync(1) + await sleep(10) if (++queryCount > 1) { // second time this query mounts, it should not throw return 'data' @@ -598,10 +581,8 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { function MyComponent() { const query = useQuery({ queryKey: key, - queryFn: async () => { - await vi.advanceTimersByTimeAsync(1) - throw new Error('Error test') - }, + queryFn: () => + sleep(10).then(() => Promise.reject(new Error('Error test'))), retry: false, }) const data = React.use(query.promise) @@ -656,10 +637,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { function Page() { const query = useQuery({ queryKey: key, - queryFn: async () => { - await vi.advanceTimersByTimeAsync(1) - return 'test1' - }, + queryFn: () => sleep(10).then(() => 'test1'), }) useTrackRenders() @@ -700,10 +678,9 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { it('should dedupe when re-fetched with queryClient.fetchQuery while suspending', async () => { const key = queryKey() const renderStream = createRenderStream({ snapshotDOM: true }) - const queryFn = vi.fn().mockImplementation(async () => { - await vi.advanceTimersByTimeAsync(10) - return 'test' - }) + const queryFn = vi + .fn() + .mockImplementation(() => sleep(10).then(() => 'test')) const options = { queryKey: key, @@ -757,10 +734,9 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { const key = queryKey() let count = 0 const renderStream = createRenderStream({ snapshotDOM: true }) - const queryFn = vi.fn().mockImplementation(async () => { - await vi.advanceTimersByTimeAsync(10) - return 'test' + count++ - }) + const queryFn = vi + .fn() + .mockImplementation(() => sleep(10).then(() => 'test' + count++)) const options = { queryKey: key, @@ -817,7 +793,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { const key = queryKey() let count = 0 const queryFn = vi.fn().mockImplementation(async () => { - await vi.advanceTimersByTimeAsync(10) + await sleep(10) return 'test' + count++ }) @@ -891,10 +867,9 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { it('should resolve to previous data when canceled with cancelQueries while suspending', async () => { const renderStream = createRenderStream({ snapshotDOM: true }) const key = queryKey() - const queryFn = vi.fn().mockImplementation(async () => { - await vi.advanceTimersByTimeAsync(10) - return 'test' - }) + const queryFn = vi + .fn() + .mockImplementation(() => sleep(10).then(() => 'test')) const options = { queryKey: key, @@ -954,10 +929,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { const options = (count: number) => ({ queryKey: [...key, count], - queryFn: async () => { - await vi.advanceTimersByTimeAsync(10) - return 'test' + count - }, + queryFn: () => sleep(10).then(() => 'test' + count), }) function MyComponent(props: { promise: Promise }) { @@ -1010,10 +982,9 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { const renderStream = createRenderStream({ snapshotDOM: true }) queryClient.setQueryData(key, 'initial') - const queryFn = vi.fn().mockImplementation(async () => { - await vi.advanceTimersByTimeAsync(1) - return 'test' - }) + const queryFn = vi + .fn() + .mockImplementation(() => sleep(10).then(() => 'test')) function MyComponent(props: { promise: Promise }) { const data = React.use(props.promise) @@ -1072,10 +1043,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { const [count, setCount] = React.useState(0) const query = useQuery({ queryKey: [key, count], - queryFn: async () => { - await vi.advanceTimersByTimeAsync(10) - return 'test' + count - }, + queryFn: () => sleep(10).then(() => 'test' + count), staleTime: Infinity, }) @@ -1152,10 +1120,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { const [count, setCount] = React.useState(0) const query = useQuery({ queryKey: [key, count], - queryFn: async () => { - await vi.advanceTimersByTimeAsync(10) - return 'test' + count - }, + queryFn: () => sleep(10).then(() => 'test' + count), staleTime: Infinity, }) @@ -1228,10 +1193,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { const [count, setCount] = React.useState(0) const query = useQuery({ queryKey: [key, count], - queryFn: async () => { - await vi.advanceTimersByTimeAsync(10) - return 'test' + count + modifier - }, + queryFn: () => sleep(10).then(() => 'test' + count + modifier), }) return ( @@ -1291,24 +1253,16 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { modifier = 'new' rendered.getByText('dec').click() - { - const { snapshot } = await renderStream.takeRender() - expect(snapshot).toMatchObject({ data: 'test3' }) - } + await vi.advanceTimersByTimeAsync(11) + expect(rendered.getByText('test2new')).toBeInTheDocument() rendered.getByText('dec').click() - { - const { snapshot } = await renderStream.takeRender() - expect(snapshot).toMatchObject({ data: 'test3' }) - } + await vi.advanceTimersByTimeAsync(11) + expect(rendered.getByText('test1new')).toBeInTheDocument() rendered.getByText('dec').click() - { - const { snapshot } = await renderStream.takeRender() - expect(snapshot).toMatchObject({ data: 'test0' }) - } - - await waitFor(() => rendered.getByText('test0new')) + await vi.advanceTimersByTimeAsync(11) + expect(rendered.getByText('test0new')).toBeInTheDocument() }) it('should not suspend indefinitely with multiple, nested observers)', async () => { @@ -1326,10 +1280,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { return useQuery({ staleTime: Infinity, queryKey: [key, input], - queryFn: async () => { - await vi.advanceTimersByTimeAsync(1) - return input + ' response' - }, + queryFn: () => sleep(10).then(() => input + ' response'), }) } @@ -1400,10 +1351,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { useTrackRenders() const query = useInfiniteQuery({ queryKey: key, - queryFn: async () => { - await vi.advanceTimersByTimeAsync(1) - return { nextCursor: 1, data: 'test' } - }, + queryFn: () => sleep(10).then(() => ({ nextCursor: 1, data: 'test' })), initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.nextCursor, }) @@ -1446,7 +1394,7 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { const query = useInfiniteQuery({ queryKey: key, queryFn: async ({ pageParam = 0 }) => { - await vi.advanceTimersByTimeAsync(1) + await sleep(10) if (pageParam === 0) { return { nextCursor: 1, data: 'page-1' } } @@ -1494,13 +1442,9 @@ describe('useQuery().promise', { timeout: 10_000 }, () => { } rendered.getByText('fetchNext').click() - await vi.advanceTimersByTimeAsync(1) + await vi.advanceTimersByTimeAsync(11) - await waitFor(() => { - expect( - rendered.getByText('isFetchNextPageError:true'), - ).toBeInTheDocument() - }) + expect(rendered.getByText('isFetchNextPageError:true')).toBeInTheDocument() expect(rendered.queryByText('error boundary')).toBeNull() })