import { queryKey, sleep } from '@tanstack/query-test-utils' import { fireEvent } from '@testing-library/preact' import { Suspense } from 'preact/compat' import { useEffect, useState } from 'preact/hooks' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' import { QueryCache, QueryClient, QueryErrorResetBoundary, useQueries, useQuery, useSuspenseQueries, useSuspenseQuery, } from '..' import { ErrorBoundary } from './ErrorBoundary' import { renderWithClient } from './utils' describe('QueryErrorResetBoundary', () => { beforeEach(() => { vi.useFakeTimers() }) afterEach(() => { vi.useRealTimers() }) const queryCache = new QueryCache() const queryClient = new QueryClient({ queryCache }) describe('useQuery', () => { it('should retry fetch if the reset error boundary has been reset', async () => { const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) const key = queryKey() let succeed = false function Page() { const { data } = useQuery({ queryKey: key, queryFn: () => sleep(10).then(() => { if (!succeed) throw new Error('Error') return 'data' }), retry: false, throwOnError: true, }) return

{data}

} const rendered = renderWithClient( queryClient, {({ reset }) => ( (

error boundary

status: {status}

{data}

) } const rendered = renderWithClient( queryClient, {({ reset }) => ( (

error boundary

)} > )} , ) await vi.advanceTimersByTimeAsync(11) expect(rendered.getByText('error boundary')).toBeInTheDocument() expect(rendered.getByText('retry')).toBeInTheDocument() succeed = true fireEvent.click(rendered.getByText('retry')) await vi.advanceTimersByTimeAsync(11) expect(rendered.getByText('status: error')).toBeInTheDocument() consoleMock.mockRestore() }) it('should not throw error if query is disabled, and refetch if query becomes enabled again', async () => { const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) const key = queryKey() let succeed = false function Page() { const [enabled, setEnabled] = useState(false) const { data } = useQuery({ queryKey: key, queryFn: () => sleep(10).then(() => { if (!succeed) throw new Error('Error') return 'data' }), retry: false, enabled, throwOnError: true, }) useEffect(() => { setEnabled(true) }, []) return

{data}

} const rendered = renderWithClient( queryClient, {({ reset }) => ( (

error boundary

status: {status}, fetchStatus: {fetchStatus}

{data}

) } const rendered = renderWithClient( queryClient, {({ reset }) => ( (

error boundary

)} > )} , ) expect( rendered.getByText('status: pending, fetchStatus: idle'), ).toBeInTheDocument() await vi.advanceTimersByTimeAsync(11) expect( rendered.getByText('status: pending, fetchStatus: idle'), ).toBeInTheDocument() fireEvent.click(rendered.getByRole('button', { name: /refetch/i })) await vi.advanceTimersByTimeAsync(11) expect(rendered.getByText('error boundary')).toBeInTheDocument() consoleMock.mockRestore() }) it('should not retry fetch if the reset error boundary has not been reset', async () => { const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) const key = queryKey() let succeed = false function Page() { const { data } = useQuery({ queryKey: key, queryFn: () => sleep(10).then(() => { if (!succeed) throw new Error('Error') return 'data' }), retry: false, throwOnError: true, }) return

{data}

} const rendered = renderWithClient( queryClient, {() => ( (

error boundary

)} > )} , ) await vi.advanceTimersByTimeAsync(11) expect(rendered.getByText('error boundary')).toBeInTheDocument() expect(rendered.getByText('retry')).toBeInTheDocument() succeed = true fireEvent.click(rendered.getByText('retry')) await vi.advanceTimersByTimeAsync(11) expect(rendered.getByText('error boundary')).toBeInTheDocument() consoleMock.mockRestore() }) it('should retry fetch if the reset error boundary has been reset and the query contains data from a previous fetch', async () => { const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) const key = queryKey() let succeed = false function Page() { const { data } = useQuery({ queryKey: key, queryFn: () => sleep(10).then(() => { if (!succeed) throw new Error('Error') return 'data' }), retry: false, throwOnError: true, initialData: 'initial', }) return

{data}

} const rendered = renderWithClient( queryClient, {({ reset }) => ( (

error boundary

)} > )} , ) expect(rendered.getByText('initial')).toBeInTheDocument() await vi.advanceTimersByTimeAsync(11) expect(rendered.getByText('error boundary')).toBeInTheDocument() expect(rendered.getByText('retry')).toBeInTheDocument() succeed = true fireEvent.click(rendered.getByText('retry')) await vi.advanceTimersByTimeAsync(11) expect(rendered.getByText('data')).toBeInTheDocument() consoleMock.mockRestore() }) it('should not retry fetch if the reset error boundary has not been reset after a previous reset', async () => { const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) const key = queryKey() let succeed = false let shouldReset = false function Page() { const { data } = useQuery({ queryKey: key, queryFn: () => sleep(10).then(() => { if (!succeed) throw new Error('Error') return 'data' }), retry: false, throwOnError: true, }) return

{data}

} const rendered = renderWithClient( queryClient, {({ reset }) => ( { if (shouldReset) { reset() } }} fallbackRender={({ resetErrorBoundary }) => (

error boundary

)} > )} , ) await vi.advanceTimersByTimeAsync(11) expect(rendered.getByText('error boundary')).toBeInTheDocument() expect(rendered.getByText('retry')).toBeInTheDocument() succeed = false shouldReset = true await vi.advanceTimersByTimeAsync(11) expect(rendered.getByText('error boundary')).toBeInTheDocument() expect(rendered.getByText('retry')).toBeInTheDocument() succeed = true shouldReset = false fireEvent.click(rendered.getByText('retry')) await vi.advanceTimersByTimeAsync(11) expect(rendered.getByText('error boundary')).toBeInTheDocument() succeed = true shouldReset = true fireEvent.click(rendered.getByText('retry')) await vi.advanceTimersByTimeAsync(11) expect(rendered.getByText('data')).toBeInTheDocument() consoleMock.mockRestore() }) it('should throw again on error after the reset error boundary has been reset', async () => { const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) const key = queryKey() let fetchCount = 0 function Page() { const { data } = useQuery({ queryKey: key, queryFn: () => sleep(10).then(() => { fetchCount++ throw new Error('Error') }), retry: false, throwOnError: true, }) return

{data}

} const rendered = renderWithClient( queryClient, {({ reset }) => ( (

error boundary

)} > )} , ) await vi.advanceTimersByTimeAsync(11) expect(rendered.getByText('error boundary')).toBeInTheDocument() expect(rendered.getByText('retry')).toBeInTheDocument() fireEvent.click(rendered.getByText('retry')) await vi.advanceTimersByTimeAsync(11) expect(rendered.getByText('error boundary')).toBeInTheDocument() expect(rendered.getByText('retry')).toBeInTheDocument() fireEvent.click(rendered.getByText('retry')) await vi.advanceTimersByTimeAsync(11) expect(rendered.getByText('error boundary')).toBeInTheDocument() expect(fetchCount).toBe(3) consoleMock.mockRestore() }) it('should never render the component while the query is in error state', async () => { const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) const key = queryKey() let fetchCount = 0 let renders = 0 function Page() { const { data } = useSuspenseQuery({ queryKey: key, queryFn: () => sleep(10).then(() => { fetchCount++ if (fetchCount > 2) return 'data' throw new Error('Error') }), retry: false, }) renders++ return

{data}

} const rendered = renderWithClient( queryClient, {({ reset }) => ( (

error boundary

)} > loading}> )} , ) expect(rendered.getByText('loading')).toBeInTheDocument() await vi.advanceTimersByTimeAsync(10) expect(rendered.getByText('error boundary')).toBeInTheDocument() expect(rendered.getByText('retry')).toBeInTheDocument() fireEvent.click(rendered.getByText('retry')) expect(rendered.getByText('loading')).toBeInTheDocument() await vi.advanceTimersByTimeAsync(10) expect(rendered.getByText('error boundary')).toBeInTheDocument() expect(rendered.getByText('retry')).toBeInTheDocument() fireEvent.click(rendered.getByText('retry')) expect(rendered.getByText('loading')).toBeInTheDocument() await vi.advanceTimersByTimeAsync(10) expect(rendered.getByText('data')).toBeInTheDocument() expect(fetchCount).toBe(3) expect(renders).toBe(1) consoleMock.mockRestore() }) it('should render children', () => { const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) function Page() { return (

page

) } const rendered = renderWithClient( queryClient, , ) expect(rendered.queryByText('page')).not.toBeNull() consoleMock.mockRestore() }) it('should show error boundary when using tracked queries even though we do not track the error field', async () => { const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) const key = queryKey() let succeed = false function Page() { const { data } = useQuery({ queryKey: key, queryFn: () => sleep(10).then(() => { if (!succeed) throw new Error('Error') return 'data' }), retry: false, throwOnError: true, }) return

{data}

} const rendered = renderWithClient( queryClient, {({ reset }) => ( (

error boundary

)} > )} , ) await vi.advanceTimersByTimeAsync(11) expect(rendered.getByText('error boundary')).toBeInTheDocument() expect(rendered.getByText('retry')).toBeInTheDocument() succeed = true fireEvent.click(rendered.getByText('retry')) await vi.advanceTimersByTimeAsync(11) expect(rendered.getByText('data')).toBeInTheDocument() consoleMock.mockRestore() }) }) describe('useQueries', () => { it('should retry fetch if the reset error boundary has been reset', async () => { const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) const key = queryKey() let succeed = false function Page() { const [{ data }] = useQueries({ queries: [ { queryKey: key, queryFn: () => sleep(10).then(() => { if (!succeed) throw new Error('Error') return 'data' }), retry: false, throwOnError: true, retryOnMount: true, }, ], }) return

{data}

} const rendered = renderWithClient( queryClient, {({ reset }) => ( (

error boundary

{data}

} const rendered = renderWithClient( queryClient, {({ reset }) => ( (

error boundary

)} > )} , ) expect(rendered.getByText('loading')).toBeInTheDocument() await vi.advanceTimersByTimeAsync(10) expect(rendered.getByText('error boundary')).toBeInTheDocument() expect(rendered.getByText('retry')).toBeInTheDocument() succeed = true fireEvent.click(rendered.getByText('retry')) expect(rendered.getByText('loading')).toBeInTheDocument() await vi.advanceTimersByTimeAsync(10) expect(rendered.getByText('data')).toBeInTheDocument() consoleMock.mockRestore() }) }) })