import { afterAll, beforeAll, 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 { QueryClient, QueryClientProvider, QueryErrorResetBoundary, keepPreviousData, useInfiniteQuery, useQuery, } from '..' import { QueryCache } from '../index' describe('useQuery().promise', { timeout: 10_000 }, () => { const queryCache = new QueryCache() const queryClient = new QueryClient({ queryCache, }) beforeAll(() => { vi.useFakeTimers({ shouldAdvanceTime: true, toFake: ['setTimeout', 'clearTimeout', 'setInterval', 'clearInterval'], }) queryClient.setDefaultOptions({ queries: { experimental_prefetchInRender: true }, }) }) afterAll(() => { vi.useRealTimers() queryClient.setDefaultOptions({ queries: { experimental_prefetchInRender: false }, }) }) it('should work with a basic test', async () => { const key = queryKey() const renderStream = createRenderStream({ snapshotDOM: true }) function MyComponent(props: { promise: Promise }) { const data = React.use(props.promise) useTrackRenders() return <>{data} } function Loading() { useTrackRenders() return <>loading.. } function Page() { useTrackRenders() const query = useQuery({ queryKey: key, queryFn: async () => { await vi.advanceTimersByTimeAsync(1) return 'test' }, }) return ( }>

status:{query.status}

) } await renderStream.render( , ) { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('loading..') expect(renderedComponents).toEqual([Page, Loading]) } { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('test') expect(renderedComponents).toEqual([Page, MyComponent]) } }) it('colocate suspense and promise', async () => { const key = queryKey() let callCount = 0 const renderStream = createRenderStream({ snapshotDOM: true }) function MyComponent() { useTrackRenders() const query = useQuery({ queryKey: key, queryFn: async () => { callCount++ await vi.advanceTimersByTimeAsync(1) return 'test' }, staleTime: 1000, }) const data = React.use(query.promise) return <>{data} } function Loading() { useTrackRenders() return <>loading.. } function Page() { useTrackRenders() return ( }> ) } await renderStream.render( , ) { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('loading..') expect(renderedComponents).toEqual([Page, Loading]) } { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('test') expect(renderedComponents).toEqual([MyComponent]) } expect(callCount).toBe(1) }) it('parallel queries', async () => { const key = queryKey() const renderStream = createRenderStream({ snapshotDOM: true }) let callCount = 0 function MyComponent() { useTrackRenders() const query = useQuery({ queryKey: key, queryFn: async () => { callCount++ await vi.advanceTimersByTimeAsync(1) return 'test' }, staleTime: 1000, }) const data = React.use(query.promise) return <>{data} } function Loading() { useTrackRenders() return <>loading.. } function Page() { useTrackRenders() return ( <> }> ) } await renderStream.render( , ) { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('loading..') expect(renderedComponents).toEqual([Page, Loading]) } { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('testtesttesttesttest') expect(renderedComponents).toEqual([ MyComponent, MyComponent, MyComponent, MyComponent, MyComponent, ]) } expect(callCount).toBe(1) }) it('should work with initial data', async () => { const key = queryKey() const renderStream = createRenderStream({ snapshotDOM: true }) function MyComponent(props: { promise: Promise }) { useTrackRenders() const data = React.use(props.promise) return <>{data} } function Loading() { useTrackRenders() return <>loading.. } function Page() { useTrackRenders() const query = useQuery({ queryKey: key, queryFn: async () => { await vi.advanceTimersByTimeAsync(1) return 'test' }, initialData: 'initial', }) return ( }> ) } await renderStream.render( , ) { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('initial') expect(renderedComponents).toEqual([Page, MyComponent]) } { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('test') expect(renderedComponents).toEqual([Page, MyComponent]) } }) 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' }) function MyComponent(props: { promise: Promise }) { useTrackRenders() const data = React.use(props.promise) return <>{data} } function Loading() { useTrackRenders() return <>loading.. } function Page() { useTrackRenders() const query = useQuery({ queryKey: key, queryFn, initialData: 'initial', staleTime: 1000, }) return ( }> ) } await renderStream.render( , ) { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('initial') expect(renderedComponents).toEqual([Page, MyComponent]) } // should not call queryFn because of staleTime + initialData combo expect(queryFn).toHaveBeenCalledTimes(0) }) it('should work with static placeholderData', async () => { const key = queryKey() const renderStream = createRenderStream({ snapshotDOM: true }) function MyComponent(props: { promise: Promise }) { useTrackRenders() const data = React.use(props.promise) return <>{data} } function Loading() { useTrackRenders() return <>loading.. } function Page() { const query = useQuery({ queryKey: key, queryFn: async () => { await vi.advanceTimersByTimeAsync(1) return 'test' }, placeholderData: 'placeholder', }) useTrackRenders() return ( }> ) } await renderStream.render( , ) { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('placeholder') expect(renderedComponents).toEqual([Page, MyComponent]) } { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('test') expect(renderedComponents).toEqual([Page, MyComponent]) } }) it('should work with placeholderData: keepPreviousData', async () => { const key = queryKey() const renderStream = createRenderStream({ snapshotDOM: true }) function MyComponent(props: { promise: Promise }) { useTrackRenders() const data = React.use(props.promise) return <>{data} } function Loading() { useTrackRenders() return <>loading.. } function Page() { useTrackRenders() const [count, setCount] = React.useState(0) const query = useQuery({ queryKey: [...key, count], queryFn: async () => { await vi.advanceTimersByTimeAsync(1) return 'test-' + count }, placeholderData: keepPreviousData, }) return (

) } const rendered = await renderStream.render( , ) { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('loading..') expect(renderedComponents).toEqual([Page, Loading]) } { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('test-0') expect(renderedComponents).toEqual([Page, MyComponent]) } rendered.getByRole('button', { name: 'increment' }).click() // re-render because of the increment { const { renderedComponents } = await renderStream.takeRender() expect(renderedComponents).toEqual([Page, MyComponent]) } // re-render with new data, no loading between { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('test-1') // no more suspense boundary rendering expect(renderedComponents).toEqual([Page, MyComponent]) } }) it('should be possible to select a part of the data with select', async () => { const key = queryKey() const renderStream = createRenderStream({ snapshotDOM: true }) function MyComponent(props: { promise: Promise }) { useTrackRenders() const data = React.use(props.promise) return <>{data} } function Loading() { useTrackRenders() return <>loading.. } function Page() { const query = useQuery({ queryKey: key, queryFn: async () => { await vi.advanceTimersByTimeAsync(1) return { name: 'test' } }, select: (data) => data.name, }) useTrackRenders() return ( }> ) } await renderStream.render( , ) { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('loading..') expect(renderedComponents).toEqual([Page, Loading]) } { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('test') expect(renderedComponents).toEqual([Page, MyComponent]) } }) it('should throw error if the promise fails', async () => { const renderStream = createRenderStream({ snapshotDOM: true }) const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) const key = queryKey() function MyComponent(props: { promise: Promise }) { const data = React.use(props.promise) return <>{data} } function Loading() { return <>loading.. } let queryCount = 0 function Page() { const query = useQuery({ queryKey: key, queryFn: async () => { await vi.advanceTimersByTimeAsync(1) if (++queryCount > 1) { // second time this query mounts, it should not throw return 'data' } throw new Error('Error test') }, retry: false, }) return ( }> ) } const rendered = await renderStream.render( {({ reset }) => ( (

error boundary

)} > )} , ) { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('loading..') } { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('error boundary') } consoleMock.mockRestore() rendered.getByText('resetErrorBoundary').click() { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('loading..') } { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('data') } expect(queryCount).toBe(2) }) it('should throw error if the promise fails (colocate suspense and promise)', async () => { const renderStream = createRenderStream({ snapshotDOM: true }) const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) const key = queryKey() function MyComponent() { const query = useQuery({ queryKey: key, queryFn: async () => { await vi.advanceTimersByTimeAsync(1) throw new Error('Error test') }, retry: false, }) const data = React.use(query.promise) return <>{data} } function Page() { return ( ) } await renderStream.render(

error boundary

}> , ) { const { withinDOM } = await renderStream.takeRender() expect(withinDOM().getByText('loading..')).toBeInTheDocument() } { const { withinDOM } = await renderStream.takeRender() expect(withinDOM().getByText('error boundary')).toBeInTheDocument() } consoleMock.mockRestore() }) it('should recreate promise with data changes', async () => { const key = queryKey() const renderStream = createRenderStream({ snapshotDOM: true }) function MyComponent(props: { promise: Promise }) { useTrackRenders() const data = React.use(props.promise) return <>{data} } function Loading() { useTrackRenders() return <>loading.. } function Page() { const query = useQuery({ queryKey: key, queryFn: async () => { await vi.advanceTimersByTimeAsync(1) return 'test1' }, }) useTrackRenders() return ( }> ) } await renderStream.render( , ) { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('loading..') expect(renderedComponents).toEqual([Page, Loading]) } { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('test1') expect(renderedComponents).toEqual([Page, MyComponent]) } queryClient.setQueryData(key, 'test2') { const { renderedComponents, withinDOM } = await renderStream.takeRender() withinDOM().getByText('test2') expect(renderedComponents).toEqual([Page, MyComponent]) } }) 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 options = { queryKey: key, queryFn, } function MyComponent(props: { promise: Promise }) { const data = React.use(props.promise) return <>{data} } function Loading() { return <>loading.. } function Page() { const query = useQuery(options) return (

) } const rendered = await renderStream.render( , ) { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('loading..') } rendered.getByText('fetch').click() { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('test') } expect(queryFn).toHaveBeenCalledOnce() }) it('should dedupe when re-fetched with refetchQueries while suspending', async () => { 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 options = { queryKey: key, queryFn, } function MyComponent(props: { promise: Promise }) { const data = React.use(props.promise) return <>{data} } function Loading() { return <>loading.. } function Page() { const query = useQuery(options) return (

) } const rendered = await renderStream.render( , ) { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('loading..') } rendered.getByText('refetch').click() { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('test0') } expect(queryFn).toHaveBeenCalledOnce() }) it.skip('should stay pending when canceled with cancelQueries while suspending until refetched', async () => { const renderStream = createRenderStream({ snapshotDOM: true }) const key = queryKey() let count = 0 const queryFn = vi.fn().mockImplementation(async () => { await vi.advanceTimersByTimeAsync(10) return 'test' + count++ }) const options = { queryKey: key, queryFn, } function MyComponent(props: { promise: Promise }) { const data = React.use(props.promise) return <>{data} } function Loading() { return <>loading.. } function Page() { const query = useQuery(options) return (

) } const rendered = await renderStream.render( <>error boundary}> , ) { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('loading..') } rendered.getByText('cancel').click() await vi.waitFor(() => { const state = queryClient.getQueryState(key) expect(state).toMatchObject({ status: 'pending', fetchStatus: 'idle', }) }) expect(queryFn).toHaveBeenCalledOnce() rendered.getByText('fetch').click() { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('hello') } }) 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 options = { queryKey: key, queryFn, } function MyComponent(props: { promise: Promise }) { const data = React.use(props.promise) return <>{data} } function Loading() { return <>loading.. } function Page() { const query = useQuery(options) return (

) } const rendered = await renderStream.render( , ) { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('loading..') } queryClient.setQueryData(key, 'initial') rendered.getByText('cancel').click() await vi.waitFor(() => { const state = queryClient.getQueryState(key) expect(state?.data).toBe('initial') }) expect(queryFn).toHaveBeenCalledTimes(1) }) it('should suspend when not enabled', async () => { const renderStream = createRenderStream({ snapshotDOM: true }) const key = queryKey() const options = (count: number) => ({ queryKey: [...key, count], queryFn: async () => { await vi.advanceTimersByTimeAsync(10) return 'test' + count }, }) function MyComponent(props: { promise: Promise }) { const data = React.use(props.promise) return <>{data} } function Loading() { return <>loading.. } function Page() { const [count, setCount] = React.useState(0) const query = useQuery({ ...options(count), enabled: count > 0 }) return (

) } const rendered = await renderStream.render( , ) { const { withinDOM } = await renderStream.takeRender() expect(withinDOM().getByText('loading..')).toBeInTheDocument() } rendered.getByText('enable').click() // loading re-render with enabled await renderStream.takeRender() { const { withinDOM } = await renderStream.takeRender() expect(withinDOM().getByText('test1')).toBeInTheDocument() } }) it('should show correct data when read from cache only (staleTime)', async () => { const key = queryKey() const renderStream = createRenderStream({ snapshotDOM: true }) queryClient.setQueryData(key, 'initial') const queryFn = vi.fn().mockImplementation(async () => { await vi.advanceTimersByTimeAsync(1) return 'test' }) function MyComponent(props: { promise: Promise }) { const data = React.use(props.promise) return <>{data} } function Loading() { return <>loading.. } function Page() { const query = useQuery({ queryKey: key, queryFn, staleTime: Infinity, }) return ( }> ) } await renderStream.render( , ) { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('initial') } expect(queryFn).toHaveBeenCalledTimes(0) }) it('should show correct data when switching between cache entries without re-fetches', async () => { const key = queryKey() const renderStream = createRenderStream({ snapshotDOM: true }) function MyComponent(props: { promise: Promise }) { useTrackRenders() const data = React.use(props.promise) return <>{data} } function Loading() { useTrackRenders() return <>loading.. } function Page() { useTrackRenders() const [count, setCount] = React.useState(0) const query = useQuery({ queryKey: [key, count], queryFn: async () => { await vi.advanceTimersByTimeAsync(10) return 'test' + count }, staleTime: Infinity, }) return (

) } const rendered = await renderStream.render( , ) { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('loading..') } { const { snapshot, withinDOM } = await renderStream.takeRender() withinDOM().getByText('test0') expect(snapshot).toMatchObject({ data: 'test0' }) } rendered.getByText('inc').click() { const { snapshot } = await renderStream.takeRender() expect(snapshot).toMatchObject({ data: 'test0' }) } rendered.getByText('inc').click() { const { snapshot } = await renderStream.takeRender() expect(snapshot).toMatchObject({ data: 'test0' }) } rendered.getByText('inc').click() { const { snapshot, withinDOM } = await renderStream.takeRender() withinDOM().getByText('loading..') expect(snapshot).toMatchObject({ data: 'test0' }) } { const { snapshot, withinDOM } = await renderStream.takeRender() withinDOM().getByText('test3') expect(snapshot).toMatchObject({ data: 'test3' }) } modifier = 'new' rendered.getByText('dec').click() { const { snapshot } = await renderStream.takeRender() expect(snapshot).toMatchObject({ data: 'test3' }) } rendered.getByText('dec').click() { const { snapshot } = await renderStream.takeRender() expect(snapshot).toMatchObject({ data: 'test3' }) } rendered.getByText('dec').click() { const { snapshot } = await renderStream.takeRender() expect(snapshot).toMatchObject({ data: 'test0' }) } await waitFor(() => rendered.getByText('test0new')) }) it('should not suspend indefinitely with multiple, nested observers)', async () => { const key = queryKey() const renderStream = createRenderStream({ snapshotDOM: true }) function MyComponent({ input }: { input: string }) { const query = useTheQuery(input) const data = React.use(query.promise) return <>{data} } function useTheQuery(input: string) { return useQuery({ staleTime: Infinity, queryKey: [key, input], queryFn: async () => { await vi.advanceTimersByTimeAsync(1) return input + ' response' }, }) } function Page() { const [input, setInput] = React.useState('defaultInput') useTheQuery(input) return (

) } const rendered = await renderStream.render( , ) { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('loading..') } { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('defaultInput response') } expect( queryClient.getQueryCache().find({ queryKey: [key, 'defaultInput'] })! .observers.length, ).toBe(2) rendered.getByText('setInput').click() { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('loading..') } { const { withinDOM } = await renderStream.takeRender() withinDOM().getByText('someInput response') } expect( queryClient.getQueryCache().find({ queryKey: [key, 'defaultInput'] })! .observers.length, ).toBe(0) expect( queryClient.getQueryCache().find({ queryKey: [key, 'someInput'] })! .observers.length, ).toBe(2) }) it('should implicitly observe data when promise is used', async () => { const key = queryKey() const renderStream = createRenderStream({ snapshotDOM: true }) function Page() { useTrackRenders() const query = useInfiniteQuery({ queryKey: key, queryFn: async () => { await vi.advanceTimersByTimeAsync(1) return { nextCursor: 1, data: 'test' } }, initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.nextCursor, }) React.use(query.promise) const hasNextPage = query.hasNextPage return (

hasNextPage: {String(hasNextPage)}

) } await renderStream.render( , ) { const { withinDOM } = await renderStream.takeRender() expect(withinDOM().getByText('loading..')).toBeInTheDocument() } { const { withinDOM } = await renderStream.takeRender() expect(withinDOM().getByText('hasNextPage: true')).toBeInTheDocument() } }) it('should not throw to error boundary for refetch errors in infinite queries', async () => { const key = queryKey() const renderStream = createRenderStream({ snapshotDOM: true }) function Page() { const query = useInfiniteQuery({ queryKey: key, queryFn: async ({ pageParam = 0 }) => { await vi.advanceTimersByTimeAsync(1) if (pageParam === 0) { return { nextCursor: 1, data: 'page-1' } } throw new Error('page error') }, initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.nextCursor, retry: false, }) const data = React.use(query.promise) return (

pages:{data.pages.length}

isError:{String(query.isError)}

isFetchNextPageError:{String(query.isFetchNextPageError)}

) } const rendered = await renderStream.render(

error boundary

}> , ) { const { withinDOM } = await renderStream.takeRender() expect(withinDOM().getByText('loading..')).toBeInTheDocument() } { const { withinDOM } = await renderStream.takeRender() expect(withinDOM().getByText('pages:1')).toBeInTheDocument() expect(withinDOM().getByText('isError:false')).toBeInTheDocument() expect( withinDOM().getByText('isFetchNextPageError:false'), ).toBeInTheDocument() } rendered.getByText('fetchNext').click() await vi.advanceTimersByTimeAsync(1) await waitFor(() => { expect( rendered.getByText('isFetchNextPageError:true'), ).toBeInTheDocument() }) expect(rendered.queryByText('error boundary')).toBeNull() }) })