diff --git a/packages/react-query-devtools/eslint.config.js b/packages/react-query-devtools/eslint.config.js index 9133d598946..ec7943f0190 100644 --- a/packages/react-query-devtools/eslint.config.js +++ b/packages/react-query-devtools/eslint.config.js @@ -1,6 +1,5 @@ // @ts-check -import vitest from '@vitest/eslint-plugin' import pluginReact from '@eslint-react/eslint-plugin' import pluginReactHooks from 'eslint-plugin-react-hooks' import rootConfig from './root.eslint.config.js' @@ -20,11 +19,4 @@ export default [ 'react-hooks/rules-of-hooks': 'error', }, }, - { - plugins: { vitest }, - rules: { - ...vitest.configs.recommended.rules, - 'vitest/expect-expect': 'warn', - }, - }, ] diff --git a/packages/react-query-next-experimental/eslint.config.js b/packages/react-query-next-experimental/eslint.config.js index 45811bb8a14..3554c211ee3 100644 --- a/packages/react-query-next-experimental/eslint.config.js +++ b/packages/react-query-next-experimental/eslint.config.js @@ -1,6 +1,5 @@ // @ts-check -import vitest from '@vitest/eslint-plugin' import pluginReact from '@eslint-react/eslint-plugin' import pluginReactHooks from 'eslint-plugin-react-hooks' import rootConfig from './root.eslint.config.js' @@ -21,11 +20,4 @@ export default [ 'react-hooks/rules-of-hooks': 'error', }, }, - { - plugins: { vitest }, - rules: { - ...vitest.configs.recommended.rules, - 'vitest/expect-expect': 'warn', - }, - }, ] diff --git a/packages/react-query-persist-client/eslint.config.js b/packages/react-query-persist-client/eslint.config.js index 9133d598946..ec7943f0190 100644 --- a/packages/react-query-persist-client/eslint.config.js +++ b/packages/react-query-persist-client/eslint.config.js @@ -1,6 +1,5 @@ // @ts-check -import vitest from '@vitest/eslint-plugin' import pluginReact from '@eslint-react/eslint-plugin' import pluginReactHooks from 'eslint-plugin-react-hooks' import rootConfig from './root.eslint.config.js' @@ -20,11 +19,4 @@ export default [ 'react-hooks/rules-of-hooks': 'error', }, }, - { - plugins: { vitest }, - rules: { - ...vitest.configs.recommended.rules, - 'vitest/expect-expect': 'warn', - }, - }, ] diff --git a/packages/react-query/eslint.config.js b/packages/react-query/eslint.config.js index 60faf155e0e..aadb420b907 100644 --- a/packages/react-query/eslint.config.js +++ b/packages/react-query/eslint.config.js @@ -1,6 +1,5 @@ // @ts-check -import vitest from '@vitest/eslint-plugin' import pluginReact from '@eslint-react/eslint-plugin' // @ts-expect-error import pluginReactCompiler from 'eslint-plugin-react-compiler' @@ -32,11 +31,4 @@ export default [ 'react-compiler/react-compiler': 'off', }, }, - { - plugins: { vitest }, - rules: { - ...vitest.configs.recommended.rules, - 'vitest/expect-expect': 'warn', - }, - }, ] diff --git a/packages/react-query/src/__tests__/QueryResetErrorBoundary.test.tsx b/packages/react-query/src/__tests__/QueryResetErrorBoundary.test.tsx index 6ee2dd37ed9..eeb19512d9a 100644 --- a/packages/react-query/src/__tests__/QueryResetErrorBoundary.test.tsx +++ b/packages/react-query/src/__tests__/QueryResetErrorBoundary.test.tsx @@ -68,11 +68,17 @@ describe('QueryErrorResetBoundary', () => { , ) - await waitFor(() => rendered.getByText('error boundary')) - await waitFor(() => rendered.getByText('retry')) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('retry')).toBeInTheDocument(), + ) succeed = true fireEvent.click(rendered.getByText('retry')) - await waitFor(() => rendered.getByText('data')) + await waitFor(() => + expect(rendered.getByText('data')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -132,11 +138,17 @@ describe('QueryErrorResetBoundary', () => { , ) - await waitFor(() => rendered.getByText('error boundary')) - await waitFor(() => rendered.getByText('retry')) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('retry')).toBeInTheDocument(), + ) succeed = true fireEvent.click(rendered.getByText('retry')) - await waitFor(() => rendered.getByText('status: error')) + await waitFor(() => + expect(rendered.getByText('status: error')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -198,11 +210,17 @@ describe('QueryErrorResetBoundary', () => { , ) - await waitFor(() => rendered.getByText('error boundary')) - await waitFor(() => rendered.getByText('retry')) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('retry')).toBeInTheDocument(), + ) succeed = true fireEvent.click(rendered.getByText('retry')) - await waitFor(() => rendered.getByText('data')) + await waitFor(() => + expect(rendered.getByText('data')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -259,10 +277,14 @@ describe('QueryErrorResetBoundary', () => { ) await waitFor(() => - rendered.getByText('status: pending, fetchStatus: idle'), + expect( + rendered.getByText('status: pending, fetchStatus: idle'), + ).toBeInTheDocument(), ) fireEvent.click(rendered.getByRole('button', { name: /refetch/i })) - await waitFor(() => rendered.getByText('error boundary')) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -316,11 +338,17 @@ describe('QueryErrorResetBoundary', () => { , ) - await waitFor(() => rendered.getByText('error boundary')) - await waitFor(() => rendered.getByText('retry')) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('retry')).toBeInTheDocument(), + ) succeed = true fireEvent.click(rendered.getByText('retry')) - await waitFor(() => rendered.getByText('error boundary')) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -376,11 +404,17 @@ describe('QueryErrorResetBoundary', () => { , ) - await waitFor(() => rendered.getByText('error boundary')) - await waitFor(() => rendered.getByText('retry')) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('retry')).toBeInTheDocument(), + ) succeed = true fireEvent.click(rendered.getByText('retry')) - await waitFor(() => rendered.getByText('data')) + await waitFor(() => + expect(rendered.getByText('data')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -440,11 +474,17 @@ describe('QueryErrorResetBoundary', () => { , ) - await waitFor(() => rendered.getByText('error boundary')) - await waitFor(() => rendered.getByText('retry')) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('retry')).toBeInTheDocument(), + ) shouldReset = true fireEvent.click(rendered.getByText('retry')) - await waitFor(() => rendered.getByText('error boundary')) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) succeed = true shouldReset = false fireEvent.click(rendered.getByText('retry')) @@ -651,11 +691,17 @@ describe('QueryErrorResetBoundary', () => { , ) - await waitFor(() => rendered.getByText('error boundary')) - await waitFor(() => rendered.getByText('retry')) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('retry')).toBeInTheDocument(), + ) succeed = true fireEvent.click(rendered.getByText('retry')) - await waitFor(() => rendered.getByText('data')) + await waitFor(() => + expect(rendered.getByText('data')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) }) @@ -715,11 +761,17 @@ describe('QueryErrorResetBoundary', () => { , ) - await waitFor(() => rendered.getByText('error boundary')) - await waitFor(() => rendered.getByText('retry')) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('retry')).toBeInTheDocument(), + ) succeed = true fireEvent.click(rendered.getByText('retry')) - await waitFor(() => rendered.getByText('data')) + await waitFor(() => + expect(rendered.getByText('data')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -779,11 +831,17 @@ describe('QueryErrorResetBoundary', () => { , ) - await waitFor(() => rendered.getByText('error boundary')) - await waitFor(() => rendered.getByText('retry')) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('retry')).toBeInTheDocument(), + ) succeed = true fireEvent.click(rendered.getByText('retry')) - await waitFor(() => rendered.getByText('data')) + await waitFor(() => + expect(rendered.getByText('data')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) }) diff --git a/packages/react-query/src/__tests__/infiniteQueryOptions.test-d.tsx b/packages/react-query/src/__tests__/infiniteQueryOptions.test-d.tsx index c5d7efeee94..a1d97bf0927 100644 --- a/packages/react-query/src/__tests__/infiniteQueryOptions.test-d.tsx +++ b/packages/react-query/src/__tests__/infiniteQueryOptions.test-d.tsx @@ -1,4 +1,4 @@ -import { describe, expectTypeOf, it, test } from 'vitest' +import { assertType, describe, expectTypeOf, it, test } from 'vitest' import { QueryClient, dataTagSymbol, skipToken } from '@tanstack/query-core' import { infiniteQueryOptions } from '../infiniteQueryOptions' import { useInfiniteQuery } from '../useInfiniteQuery' @@ -12,14 +12,16 @@ import type { describe('infiniteQueryOptions', () => { it('should not allow excess properties', () => { - infiniteQueryOptions({ - queryKey: ['key'], - queryFn: () => Promise.resolve('data'), - getNextPageParam: () => 1, - initialPageParam: 1, - // @ts-expect-error this is a good error, because stallTime does not exist! - stallTime: 1000, - }) + assertType( + infiniteQueryOptions({ + queryKey: ['key'], + queryFn: () => Promise.resolve('data'), + getNextPageParam: () => 1, + initialPageParam: 1, + // @ts-expect-error this is a good error, because stallTime does not exist! + stallTime: 1000, + }), + ) }) it('should infer types for callbacks', () => { infiniteQueryOptions({ @@ -159,14 +161,22 @@ describe('infiniteQueryOptions', () => { getNextPageParam: () => 1, initialPageParam: 1, }) - // @ts-expect-error cannot pass infinite options to non-infinite query functions - useQuery(options) - // @ts-expect-error cannot pass infinite options to non-infinite query functions - queryClient.ensureQueryData(options) - // @ts-expect-error cannot pass infinite options to non-infinite query functions - queryClient.fetchQuery(options) - // @ts-expect-error cannot pass infinite options to non-infinite query functions - queryClient.prefetchQuery(options) + assertType( + // @ts-expect-error cannot pass infinite options to non-infinite query functions + useQuery(options), + ) + assertType( + // @ts-expect-error cannot pass infinite options to non-infinite query functions + queryClient.ensureQueryData(options), + ) + assertType( + // @ts-expect-error cannot pass infinite options to non-infinite query functions + queryClient.fetchQuery(options), + ) + assertType( + // @ts-expect-error cannot pass infinite options to non-infinite query functions + queryClient.prefetchQuery(options), + ) }) test('allow optional initialData function', () => { diff --git a/packages/react-query/src/__tests__/queryOptions.test-d.tsx b/packages/react-query/src/__tests__/queryOptions.test-d.tsx index f453900888b..aac63737eb3 100644 --- a/packages/react-query/src/__tests__/queryOptions.test-d.tsx +++ b/packages/react-query/src/__tests__/queryOptions.test-d.tsx @@ -1,4 +1,4 @@ -import { describe, expectTypeOf, it } from 'vitest' +import { assertType, describe, expectTypeOf, it } from 'vitest' import { QueriesObserver, QueryClient, @@ -18,12 +18,14 @@ import type { describe('queryOptions', () => { it('should not allow excess properties', () => { - queryOptions({ - queryKey: ['key'], - queryFn: () => Promise.resolve(5), - // @ts-expect-error this is a good error, because stallTime does not exist! - stallTime: 1000, - }) + assertType( + queryOptions({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + // @ts-expect-error this is a good error, because stallTime does not exist! + stallTime: 1000, + }), + ) }) it('should infer types for callbacks', () => { queryOptions({ @@ -203,7 +205,7 @@ describe('queryOptions', () => { }) it('should allow undefined response in initialData', () => { - return (id: string | null) => + assertType((id: string | null) => queryOptions({ queryKey: ['todo', id], queryFn: () => @@ -218,7 +220,8 @@ describe('queryOptions', () => { id, title: 'Initial Data', }, - }) + }), + ) }) it('should allow optional initialData object', () => { @@ -248,7 +251,7 @@ describe('queryOptions', () => { queryFn: () => Promise.resolve(1), }) - somethingWithQueryOptions(options) + assertType(somethingWithQueryOptions(options)) }) it('should return a custom query key type', () => { diff --git a/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx b/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx index 75768977cf6..433bc3fa2c1 100644 --- a/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx +++ b/packages/react-query/src/__tests__/useInfiniteQuery.test.tsx @@ -920,18 +920,30 @@ describe('useInfiniteQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => rendered.getByText('status: success, idle')) await waitFor(() => - rendered.getByText('data: {"pages":[10],"pageParams":[10]}'), + expect(rendered.getByText('status: success, idle')).toBeInTheDocument(), + ) + await waitFor(() => + expect( + rendered.getByText('data: {"pages":[10],"pageParams":[10]}'), + ).toBeInTheDocument(), ) fireEvent.click(rendered.getByRole('button', { name: /refetch/i })) - await waitFor(() => rendered.getByText('status: success, fetching')) + await waitFor(() => + expect( + rendered.getByText('status: success, fetching'), + ).toBeInTheDocument(), + ) fireEvent.click(rendered.getByRole('button', { name: /fetchNextPage/i })) - await waitFor(() => rendered.getByText('status: success, idle')) await waitFor(() => - rendered.getByText('data: {"pages":[10,11],"pageParams":[10,11]}'), + expect(rendered.getByText('status: success, idle')).toBeInTheDocument(), + ) + await waitFor(() => + expect( + rendered.getByText('data: {"pages":[10,11],"pageParams":[10,11]}'), + ).toBeInTheDocument(), ) }) @@ -1216,13 +1228,17 @@ describe('useInfiniteQuery', () => { const rendered = renderWithClient(queryClient, ) await waitFor(() => - rendered.getByText('data: {"pages":[0],"pageParams":[0]}'), + expect( + rendered.getByText('data: {"pages":[0],"pageParams":[0]}'), + ).toBeInTheDocument(), ) fireEvent.click(rendered.getByRole('button', { name: /setPages/i })) await waitFor(() => - rendered.getByText('data: {"pages":[7,8],"pageParams":[7,8]}'), + expect( + rendered.getByText('data: {"pages":[7,8],"pageParams":[7,8]}'), + ).toBeInTheDocument(), ) multiplier = 2 @@ -1230,7 +1246,9 @@ describe('useInfiniteQuery', () => { fireEvent.click(rendered.getByRole('button', { name: /refetch/i })) await waitFor(() => - rendered.getByText('data: {"pages":[14,30],"pageParams":[7,15]}'), + expect( + rendered.getByText('data: {"pages":[14,30],"pageParams":[7,15]}'), + ).toBeInTheDocument(), ) }) @@ -1807,7 +1825,9 @@ describe('useInfiniteQuery', () => { const rendered = render() - await waitFor(() => rendered.getByText('data: custom client')) + await waitFor(() => + expect(rendered.getByText('data: custom client')).toBeInTheDocument(), + ) }) it('should work with React.use()', async () => { diff --git a/packages/react-query/src/__tests__/useIsFetching.test.tsx b/packages/react-query/src/__tests__/useIsFetching.test.tsx index 223d586d646..bed5506fe99 100644 --- a/packages/react-query/src/__tests__/useIsFetching.test.tsx +++ b/packages/react-query/src/__tests__/useIsFetching.test.tsx @@ -53,20 +53,20 @@ describe('useIsFetching', () => { ) } - const { findByText, getByRole } = renderWithClient(queryClient, ) + const { getByText, getByRole } = renderWithClient(queryClient, ) await vi.waitFor(() => { - findByText('isFetching: 0') + expect(getByText('isFetching: 0')).toBeInTheDocument() }) fireEvent.click(getByRole('button', { name: /setReady/i })) await vi.waitFor(() => { - findByText('isFetching: 1') + expect(getByText('isFetching: 1')).toBeInTheDocument() }) await vi.waitFor(() => { - findByText('isFetching: 0') + expect(getByText('isFetching: 0')).toBeInTheDocument() }) }) @@ -226,11 +226,11 @@ describe('useIsFetching', () => { const rendered = renderWithClient(queryClient, ) await vi.waitFor(() => { - rendered.findByText('isFetching: 1') + expect(rendered.getByText('isFetching: 1')).toBeInTheDocument() }) await vi.waitFor(() => { - rendered.findByText('isFetching: 0') + expect(rendered.getByText('isFetching: 0')).toBeInTheDocument() }) }) @@ -262,7 +262,7 @@ describe('useIsFetching', () => { const rendered = render() await vi.waitFor(() => { - rendered.getByText('isFetching: 1') + expect(rendered.getByText('isFetching: 1')).toBeInTheDocument() }) }) }) diff --git a/packages/react-query/src/__tests__/useMutation.test.tsx b/packages/react-query/src/__tests__/useMutation.test.tsx index 668ac07f4b4..20aad96b95b 100644 --- a/packages/react-query/src/__tests__/useMutation.test.tsx +++ b/packages/react-query/src/__tests__/useMutation.test.tsx @@ -197,22 +197,42 @@ describe('useMutation', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('Data')) + await vi.waitFor(() => + expect(rendered.getByText('Data')).toBeInTheDocument(), + ) fireEvent.click(rendered.getByRole('button', { name: /mutate/i })) - await vi.waitFor(() => rendered.getByText('Data')) - await vi.waitFor(() => rendered.getByText('Status error')) - await vi.waitFor(() => rendered.getByText('Failed 1 times')) await vi.waitFor(() => - rendered.getByText('Failed because Error test Jonas'), + expect(rendered.getByText('Data')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('Status error')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('Failed 1 times')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect( + rendered.getByText('Failed because Error test Jonas'), + ).toBeInTheDocument(), ) fireEvent.click(rendered.getByRole('button', { name: /mutate/i })) - await vi.waitFor(() => rendered.getByText('Status pending')) - await vi.waitFor(() => rendered.getByText('Status success')) - await vi.waitFor(() => rendered.getByText('Data 2')) - await vi.waitFor(() => rendered.getByText('Failed 0 times')) - await vi.waitFor(() => rendered.getByText('Failed because null')) + await vi.waitFor(() => + expect(rendered.getByText('Status pending')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('Status success')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('Data 2')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('Failed 0 times')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('Failed because null')).toBeInTheDocument(), + ) }) it('should be able to call `onError` and `onSettled` after each failed mutate', async () => { @@ -682,6 +702,7 @@ describe('useMutation', () => { onlineMock.mockRestore() }) + // eslint-disable-next-line vitest/expect-expect it('should not change state if unmounted', () => { function Mutates() { const { mutate } = useMutation({ mutationFn: () => sleep(10) }) @@ -1084,12 +1105,18 @@ describe('useMutation', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.findByText('error: null, status: idle')) + await vi.waitFor(() => + expect( + rendered.getByText('error: null, status: idle'), + ).toBeInTheDocument(), + ) rendered.getByRole('button', { name: /mutate/i }).click() await vi.waitFor(() => - rendered.findByText('error: mutateFnError, status: error'), + expect( + rendered.getByText('error: mutateFnError, status: error'), + ).toBeInTheDocument(), ) }) @@ -1158,12 +1185,18 @@ describe('useMutation', () => { const rendered = render() - await vi.waitFor(() => rendered.findByText('data: null, status: idle')) + await vi.waitFor(() => + expect( + rendered.getByText('data: null, status: idle'), + ).toBeInTheDocument(), + ) fireEvent.click(rendered.getByRole('button', { name: /mutate/i })) await vi.waitFor(() => - rendered.findByText('data: custom client, status: success'), + expect( + rendered.getByText('data: custom client, status: success'), + ).toBeInTheDocument(), ) }) }) diff --git a/packages/react-query/src/__tests__/useMutationState.test.tsx b/packages/react-query/src/__tests__/useMutationState.test.tsx index cd6bcda438d..1f88ed6200e 100644 --- a/packages/react-query/src/__tests__/useMutationState.test.tsx +++ b/packages/react-query/src/__tests__/useMutationState.test.tsx @@ -163,7 +163,9 @@ describe('useIsMutating', () => { const rendered = render() - await vi.waitFor(() => rendered.getByText('mutating: 1')) + await vi.waitFor(() => + expect(rendered.getByText('mutating: 1')).toBeInTheDocument(), + ) }) }) diff --git a/packages/react-query/src/__tests__/usePrefetchInfiniteQuery.test-d.tsx b/packages/react-query/src/__tests__/usePrefetchInfiniteQuery.test-d.tsx index f813a14382f..03af450c93a 100644 --- a/packages/react-query/src/__tests__/usePrefetchInfiniteQuery.test-d.tsx +++ b/packages/react-query/src/__tests__/usePrefetchInfiniteQuery.test-d.tsx @@ -1,4 +1,4 @@ -import { describe, expectTypeOf, it } from 'vitest' +import { assertType, describe, expectTypeOf, it } from 'vitest' import { usePrefetchInfiniteQuery } from '..' describe('usePrefetchInfiniteQuery', () => { @@ -14,39 +14,47 @@ describe('usePrefetchInfiniteQuery', () => { }) it('should require initialPageParam and getNextPageParam', () => { - // @ts-expect-error TS2345 - usePrefetchInfiniteQuery({ - queryKey: ['key'], - queryFn: () => Promise.resolve(5), - }) + assertType( + // @ts-expect-error TS2345 + usePrefetchInfiniteQuery({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + }), + ) }) it('should not allow refetchInterval, enabled or throwOnError options', () => { - usePrefetchInfiniteQuery({ - queryKey: ['key'], - queryFn: () => Promise.resolve(5), - initialPageParam: 1, - getNextPageParam: () => 1, - // @ts-expect-error TS2353 - refetchInterval: 1000, - }) + assertType( + usePrefetchInfiniteQuery({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + initialPageParam: 1, + getNextPageParam: () => 1, + // @ts-expect-error TS2353 + refetchInterval: 1000, + }), + ) - usePrefetchInfiniteQuery({ - queryKey: ['key'], - queryFn: () => Promise.resolve(5), - initialPageParam: 1, - getNextPageParam: () => 1, - // @ts-expect-error TS2353 - enabled: true, - }) + assertType( + usePrefetchInfiniteQuery({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + initialPageParam: 1, + getNextPageParam: () => 1, + // @ts-expect-error TS2353 + enabled: true, + }), + ) - usePrefetchInfiniteQuery({ - queryKey: ['key'], - queryFn: () => Promise.resolve(5), - initialPageParam: 1, - getNextPageParam: () => 1, - // @ts-expect-error TS2353 - throwOnError: true, - }) + assertType( + usePrefetchInfiniteQuery({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + initialPageParam: 1, + getNextPageParam: () => 1, + // @ts-expect-error TS2353 + throwOnError: true, + }), + ) }) }) diff --git a/packages/react-query/src/__tests__/usePrefetchQuery.test-d.tsx b/packages/react-query/src/__tests__/usePrefetchQuery.test-d.tsx index d337d77e2e7..e7d9db5007c 100644 --- a/packages/react-query/src/__tests__/usePrefetchQuery.test-d.tsx +++ b/packages/react-query/src/__tests__/usePrefetchQuery.test-d.tsx @@ -1,4 +1,4 @@ -import { describe, expectTypeOf, it } from 'vitest' +import { assertType, describe, expectTypeOf, it } from 'vitest' import { usePrefetchQuery } from '..' describe('usePrefetchQuery', () => { @@ -12,25 +12,31 @@ describe('usePrefetchQuery', () => { }) it('should not allow refetchInterval, enabled or throwOnError options', () => { - usePrefetchQuery({ - queryKey: ['key'], - queryFn: () => Promise.resolve(5), - // @ts-expect-error TS2345 - refetchInterval: 1000, - }) + assertType( + usePrefetchQuery({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + // @ts-expect-error TS2345 + refetchInterval: 1000, + }), + ) - usePrefetchQuery({ - queryKey: ['key'], - queryFn: () => Promise.resolve(5), - // @ts-expect-error TS2345 - enabled: true, - }) + assertType( + usePrefetchQuery({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + // @ts-expect-error TS2345 + enabled: true, + }), + ) - usePrefetchQuery({ - queryKey: ['key'], - queryFn: () => Promise.resolve(5), - // @ts-expect-error TS2345 - throwOnError: true, - }) + assertType( + usePrefetchQuery({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + // @ts-expect-error TS2345 + throwOnError: true, + }), + ) }) }) diff --git a/packages/react-query/src/__tests__/useQueries.test.tsx b/packages/react-query/src/__tests__/useQueries.test.tsx index 55ee81e9802..8bb81fffccd 100644 --- a/packages/react-query/src/__tests__/useQueries.test.tsx +++ b/packages/react-query/src/__tests__/useQueries.test.tsx @@ -836,8 +836,12 @@ describe('useQueries', () => { , ) - await waitFor(() => rendered.getByText('error boundary')) - await waitFor(() => rendered.getByText('single query error')) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('single query error')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -903,8 +907,12 @@ describe('useQueries', () => { , ) - await waitFor(() => rendered.getByText('error boundary')) - await waitFor(() => rendered.getByText('single query error')) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('single query error')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -932,7 +940,9 @@ describe('useQueries', () => { const rendered = render() - await waitFor(() => rendered.getByText('data: custom client')) + await waitFor(() => + expect(rendered.getByText('data: custom client')).toBeInTheDocument(), + ) }) it('should combine queries', async () => { @@ -974,7 +984,9 @@ describe('useQueries', () => { const rendered = render() await waitFor(() => - rendered.getByText('data: true first result,second result'), + expect( + rendered.getByText('data: true first result,second result'), + ).toBeInTheDocument(), ) }) @@ -1085,9 +1097,11 @@ describe('useQueries', () => { const rendered = renderWithClient(queryClient, ) await waitFor(() => - rendered.getByText( - 'data: {"data":{"query1":"query1","query2":"query2"}}', - ), + expect( + rendered.getByText( + 'data: {"data":{"query1":"query1","query2":"query2"}}', + ), + ).toBeInTheDocument(), ) }) @@ -1144,7 +1158,9 @@ describe('useQueries', () => { const rendered = render() await waitFor(() => - rendered.getByText('data: true first result 0,second result 0'), + expect( + rendered.getByText('data: true first result 0,second result 0'), + ).toBeInTheDocument(), ) expect(results.length).toBe(3) @@ -1237,9 +1253,15 @@ describe('useQueries', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => rendered.getByText('Loading Status: Loading...')) + await waitFor(() => + expect( + rendered.getByText('Loading Status: Loading...'), + ).toBeInTheDocument(), + ) - await waitFor(() => rendered.getByText('Loading Status: Loaded')) + await waitFor(() => + expect(rendered.getByText('Loading Status: Loaded')).toBeInTheDocument(), + ) }) it('should not have stale closures with combine (#6648)', async () => { @@ -1281,7 +1303,9 @@ describe('useQueries', () => { fireEvent.click(rendered.getByRole('button', { name: /inc/i })) - await waitFor(() => rendered.getByText('data: 1 result')) + await waitFor(() => + expect(rendered.getByText('data: 1 result')).toBeInTheDocument(), + ) }) it('should optimize combine if it is a stable reference', async () => { @@ -1610,17 +1634,23 @@ describe('useQueries', () => { const rendered = render() - await waitFor(() => rendered.getByText('data: pending')) await waitFor(() => - rendered.getByText('data: first result, second result, third result'), + expect(rendered.getByText('data: pending')).toBeInTheDocument(), + ) + await waitFor(() => + expect( + rendered.getByText('data: first result, second result, third result'), + ).toBeInTheDocument(), ) fireEvent.click(rendered.getByRole('button', { name: /update/i })) await waitFor(() => - rendered.getByText( - 'data: first result updated, second result, third result', - ), + expect( + rendered.getByText( + 'data: first result updated, second result, third result', + ), + ).toBeInTheDocument(), ) }) }) diff --git a/packages/react-query/src/__tests__/useQuery.promise.test.tsx b/packages/react-query/src/__tests__/useQuery.promise.test.tsx index d4c64efd0fe..915100d3676 100644 --- a/packages/react-query/src/__tests__/useQuery.promise.test.tsx +++ b/packages/react-query/src/__tests__/useQuery.promise.test.tsx @@ -620,12 +620,12 @@ describe('useQuery().promise', () => { { const { withinDOM } = await renderStream.takeRender() - withinDOM().getByText('loading..') + expect(withinDOM().getByText('loading..')).toBeInTheDocument() } { const { withinDOM } = await renderStream.takeRender() - withinDOM().getByText('error boundary') + expect(withinDOM().getByText('error boundary')).toBeInTheDocument() } consoleMock.mockRestore() @@ -979,7 +979,7 @@ describe('useQuery().promise', () => { { const { withinDOM } = await renderStream.takeRender() - withinDOM().getByText('loading..') + expect(withinDOM().getByText('loading..')).toBeInTheDocument() } rendered.getByText('enable').click() @@ -989,7 +989,7 @@ describe('useQuery().promise', () => { { const { withinDOM } = await renderStream.takeRender() - withinDOM().getByText('test1') + expect(withinDOM().getByText('test1')).toBeInTheDocument() } }) diff --git a/packages/react-query/src/__tests__/useQuery.test.tsx b/packages/react-query/src/__tests__/useQuery.test.tsx index e401ee8612d..0cc6d639fb1 100644 --- a/packages/react-query/src/__tests__/useQuery.test.tsx +++ b/packages/react-query/src/__tests__/useQuery.test.tsx @@ -54,9 +54,11 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - rendered.getByText('default') + expect(rendered.getByText('default')).toBeInTheDocument() - await vi.waitFor(() => rendered.getByText('test')) + await vi.waitFor(() => + expect(rendered.getByText('test')).toBeInTheDocument(), + ) }) it('should return the correct states for a successful query', async () => { @@ -292,14 +294,16 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - rendered.getByText('data: prefetched') - rendered.getByText('isFetched: true') - rendered.getByText('isFetchedAfterMount: false') + expect(rendered.getByText('data: prefetched')).toBeInTheDocument() + expect(rendered.getByText('isFetched: true')).toBeInTheDocument() + expect(rendered.getByText('isFetchedAfterMount: false')).toBeInTheDocument() await vi.waitFor(() => { - rendered.getByText('data: new data') - rendered.getByText('isFetched: true') - rendered.getByText('isFetchedAfterMount: true') + expect(rendered.getByText('data: new data')).toBeInTheDocument() + expect(rendered.getByText('isFetched: true')).toBeInTheDocument() + expect( + rendered.getByText('isFetchedAfterMount: true'), + ).toBeInTheDocument() }) }) @@ -997,9 +1001,13 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('data: set')) + await vi.waitFor(() => + expect(rendered.getByText('data: set')).toBeInTheDocument(), + ) fireEvent.click(rendered.getByRole('button', { name: /refetch/i })) - await vi.waitFor(() => rendered.getByText('data: fetched')) + await vi.waitFor(() => + expect(rendered.getByText('data: fetched')).toBeInTheDocument(), + ) }) it('should update query stale state and refetch when invalidated with invalidateQueries', async () => { @@ -1033,14 +1041,20 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) await vi.waitFor(() => - rendered.getByText('data: 1, isStale: false, isFetching: false'), + expect( + rendered.getByText('data: 1, isStale: false, isFetching: false'), + ).toBeInTheDocument(), ) fireEvent.click(rendered.getByRole('button', { name: /invalidate/i })) await vi.waitFor(() => - rendered.getByText('data: 1, isStale: true, isFetching: true'), + expect( + rendered.getByText('data: 1, isStale: true, isFetching: true'), + ).toBeInTheDocument(), ) await vi.waitFor(() => - rendered.getByText('data: 2, isStale: false, isFetching: false'), + expect( + rendered.getByText('data: 2, isStale: false, isFetching: false'), + ).toBeInTheDocument(), ) }) @@ -2032,13 +2046,19 @@ describe('useQuery', () => { fireEvent.click(rendered.getByRole('button', { name: /set id/i })) await vi.waitFor(() => { - rendered.getByText('User fetching status is fetching') + expect( + rendered.getByText('User fetching status is fetching'), + ).toBeInTheDocument() }) await vi.waitFor(() => { - rendered.getByText('UserInfo data is {"id":42,"name":"John"}') + expect( + rendered.getByText('UserInfo data is {"id":42,"name":"John"}'), + ).toBeInTheDocument() }) - rendered.getByText('User fetching status is idle') + expect( + rendered.getByText('User fetching status is idle'), + ).toBeInTheDocument() }) describe('notifyOnChangeProps', () => { @@ -2333,10 +2353,10 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - rendered.getByText('First Data: init') - rendered.getByText('Second Data: init') - rendered.getByText('First Status: success') - rendered.getByText('Second Status: success') + expect(rendered.getByText('First Data: init')).toBeInTheDocument() + expect(rendered.getByText('Second Data: init')).toBeInTheDocument() + expect(rendered.getByText('First Status: success')).toBeInTheDocument() + expect(rendered.getByText('Second Status: success')).toBeInTheDocument() }) it('should update query options', () => { @@ -2408,7 +2428,9 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('new')) + await vi.waitFor(() => + expect(rendered.getByText('new')).toBeInTheDocument(), + ) }) // See https://github.com/tannerlinsley/react-query/issues/170 @@ -2440,11 +2462,19 @@ describe('useQuery', () => { // use "act" to wait for state update and prevent console warning - rendered.getByText('First Status: pending, idle') + expect( + rendered.getByText('First Status: pending, idle'), + ).toBeInTheDocument() + await vi.waitFor(() => + expect( + rendered.getByText('Second Status: pending, fetching'), + ).toBeInTheDocument(), + ) await vi.waitFor(() => - rendered.getByText('Second Status: pending, fetching'), + expect( + rendered.getByText('Second Status: success, idle'), + ).toBeInTheDocument(), ) - await vi.waitFor(() => rendered.getByText('Second Status: success, idle')) }) // See https://github.com/tannerlinsley/react-query/issues/144 @@ -2465,7 +2495,7 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - rendered.getByText('status: pending') + expect(rendered.getByText('status: pending')).toBeInTheDocument() }) it('should not refetch query on focus when `enabled` is set to `false`', async () => { @@ -2620,13 +2650,21 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('data: 0, isFetching: false')) + await vi.waitFor(() => + expect( + rendered.getByText('data: 0, isFetching: false'), + ).toBeInTheDocument(), + ) act(() => { window.dispatchEvent(new Event('visibilitychange')) }) - await vi.waitFor(() => rendered.getByText('data: 1, isFetching: false')) + await vi.waitFor(() => + expect( + rendered.getByText('data: 1, isFetching: false'), + ).toBeInTheDocument(), + ) }) it('should calculate focus behavior for `refetchOnWindowFocus` depending on function', async () => { @@ -2781,8 +2819,12 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('error')) - await vi.waitFor(() => rendered.getByText('Error test')) + await vi.waitFor(() => + expect(rendered.getByText('error')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('Error test')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -2816,7 +2858,9 @@ describe('useQuery', () => { , ) - await vi.waitFor(() => rendered.getByText('error boundary')) + await vi.waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -2873,8 +2917,12 @@ describe('useQuery', () => { , ) - await vi.waitFor(() => rendered.getByText('error')) - await vi.waitFor(() => rendered.getByText('Local Error')) + await vi.waitFor(() => + expect(rendered.getByText('error')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('Local Error')).toBeInTheDocument(), + ) }) it('should throw error instead of setting status when error should be thrown', async () => { @@ -2915,8 +2963,12 @@ describe('useQuery', () => { , ) - await vi.waitFor(() => rendered.getByText('error boundary')) - await vi.waitFor(() => rendered.getByText('Remote Error')) + await vi.waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('Remote Error')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -2959,12 +3011,24 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('failureCount: 1')) - await vi.waitFor(() => rendered.getByText('failureReason: some error')) + await vi.waitFor(() => + expect(rendered.getByText('failureCount: 1')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect( + rendered.getByText('failureReason: some error'), + ).toBeInTheDocument(), + ) fireEvent.click(rendered.getByRole('button', { name: /hide/i })) - await vi.waitFor(() => rendered.getByRole('button', { name: /show/i })) + await vi.waitFor(() => + expect( + rendered.getByRole('button', { name: /show/i }), + ).toBeInTheDocument(), + ) fireEvent.click(rendered.getByRole('button', { name: /show/i })) - await vi.waitFor(() => rendered.getByText('error: some error')) + await vi.waitFor(() => + expect(rendered.getByText('error: some error')).toBeInTheDocument(), + ) expect(count).toBe(4) }) @@ -3011,13 +3075,25 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('failureCount: 1')) - await vi.waitFor(() => rendered.getByText('failureReason: some error')) + await vi.waitFor(() => + expect(rendered.getByText('failureCount: 1')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect( + rendered.getByText('failureReason: some error'), + ).toBeInTheDocument(), + ) fireEvent.click(rendered.getByRole('button', { name: /hide/i })) fireEvent.click(rendered.getByRole('button', { name: /cancel/i })) - await vi.waitFor(() => rendered.getByRole('button', { name: /show/i })) + await vi.waitFor(() => + expect( + rendered.getByRole('button', { name: /show/i }), + ).toBeInTheDocument(), + ) fireEvent.click(rendered.getByRole('button', { name: /show/i })) - await vi.waitFor(() => rendered.getByText('error: some error')) + await vi.waitFor(() => + expect(rendered.getByText('error: some error')).toBeInTheDocument(), + ) // initial fetch (1), which will be cancelled, followed by new mount(2) + 2 retries = 4 expect(count).toBe(4) @@ -3399,15 +3475,31 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) // The query should display the first error result - await vi.waitFor(() => rendered.getByText('failureCount 1')) - await vi.waitFor(() => rendered.getByText('failureReason fetching error 1')) - await vi.waitFor(() => rendered.getByText('status pending')) - await vi.waitFor(() => rendered.getByText('error null')) + await vi.waitFor(() => + expect(rendered.getByText('failureCount 1')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect( + rendered.getByText('failureReason fetching error 1'), + ).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('status pending')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('error null')).toBeInTheDocument(), + ) // Check if the query really paused await vi.advanceTimersByTimeAsync(10) - await vi.waitFor(() => rendered.getByText('failureCount 1')) - await vi.waitFor(() => rendered.getByText('failureReason fetching error 1')) + await vi.waitFor(() => + expect(rendered.getByText('failureCount 1')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect( + rendered.getByText('failureReason fetching error 1'), + ).toBeInTheDocument(), + ) act(() => { // reset visibilityState to original value @@ -3416,15 +3508,31 @@ describe('useQuery', () => { }) // Wait for the final result - await vi.waitFor(() => rendered.getByText('failureCount 4')) - await vi.waitFor(() => rendered.getByText('failureReason fetching error 4')) - await vi.waitFor(() => rendered.getByText('status error')) - await vi.waitFor(() => rendered.getByText('error fetching error 4')) + await vi.waitFor(() => + expect(rendered.getByText('failureCount 4')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect( + rendered.getByText('failureReason fetching error 4'), + ).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('status error')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('error fetching error 4')).toBeInTheDocument(), + ) // Check if the query really stopped await vi.advanceTimersByTimeAsync(10) - await vi.waitFor(() => rendered.getByText('failureCount 4')) - await vi.waitFor(() => rendered.getByText('failureReason fetching error 4')) + await vi.waitFor(() => + expect(rendered.getByText('failureCount 4')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect( + rendered.getByText('failureReason fetching error 4'), + ).toBeInTheDocument(), + ) }) it('should fetch on mount when a query was already created with setQueryData', async () => { @@ -3617,10 +3725,18 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('failureCount 2')) - await vi.waitFor(() => rendered.getByText('failureReason error')) - await vi.waitFor(() => rendered.getByText('failureCount 0')) - await vi.waitFor(() => rendered.getByText('failureReason null')) + await vi.waitFor(() => + expect(rendered.getByText('failureCount 2')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('failureReason error')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('failureCount 0')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('failureReason null')).toBeInTheDocument(), + ) }) // See https://github.com/tannerlinsley/react-query/issues/199 @@ -3665,11 +3781,17 @@ describe('useQuery', () => { } const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('isPrefetched')) + await vi.waitFor(() => + expect(rendered.getByText('isPrefetched')).toBeInTheDocument(), + ) fireEvent.click(rendered.getByText('setKey')) - await vi.waitFor(() => rendered.getByText('data: prefetched data')) - await vi.waitFor(() => rendered.getByText('data: 1')) + await vi.waitFor(() => + expect(rendered.getByText('data: prefetched data')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('data: 1')).toBeInTheDocument(), + ) expect(count).toBe(1) }) @@ -3698,15 +3820,17 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - rendered.getByText('FetchStatus: idle') - rendered.getByText('Data: no data') + expect(rendered.getByText('FetchStatus: idle')).toBeInTheDocument() + expect(rendered.getByText('Data: no data')).toBeInTheDocument() fireEvent.click(rendered.getByText('fetch')) - await vi.waitFor(() => rendered.getByText('FetchStatus: fetching')) + await vi.waitFor(() => + expect(rendered.getByText('FetchStatus: fetching')).toBeInTheDocument(), + ) await vi.waitFor(() => [ - rendered.getByText('FetchStatus: idle'), - rendered.getByText('Data: data'), + expect(rendered.getByText('FetchStatus: idle')).toBeInTheDocument(), + expect(rendered.getByText('Data: data')).toBeInTheDocument(), ]) }) @@ -3807,12 +3931,22 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('Current Todos, filter: all')) + await vi.waitFor(() => + expect( + rendered.getByText('Current Todos, filter: all'), + ).toBeInTheDocument(), + ) fireEvent.click(rendered.getByRole('button', { name: /high/i })) - await vi.waitFor(() => rendered.getByText('Current Todos, filter: high')) + await vi.waitFor(() => + expect( + rendered.getByText('Current Todos, filter: high'), + ).toBeInTheDocument(), + ) fireEvent.click(rendered.getByRole('button', { name: /all/i })) - await vi.waitFor(() => rendered.getByText('todo B - medium')) + await vi.waitFor(() => + expect(rendered.getByText('todo B - medium')).toBeInTheDocument(), + ) }) // // See https://github.com/tannerlinsley/react-query/issues/214 @@ -3850,15 +3984,15 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) await vi.waitFor(() => { - rendered.getByText('fetched data') - rendered.getByText('enabled') + expect(rendered.getByText('fetched data')).toBeInTheDocument() + expect(rendered.getByText('enabled')).toBeInTheDocument() }) fireEvent.click(rendered.getByRole('button', { name: /enable/i })) await vi.waitFor(() => { - rendered.getByText('fetched data') - rendered.getByText('disabled') + expect(rendered.getByText('fetched data')).toBeInTheDocument() + expect(rendered.getByText('disabled')).toBeInTheDocument() }) expect(results.length).toBe(3) @@ -3886,7 +4020,7 @@ describe('useQuery', () => { expect(queryFn).not.toHaveBeenCalled() expect(queryCache.find({ queryKey: key })).not.toBeUndefined() - rendered.getByText('fetchStatus: idle') + expect(rendered.getByText('fetchStatus: idle')).toBeInTheDocument() }) // See https://github.com/tannerlinsley/react-query/issues/360 @@ -3911,7 +4045,9 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('status: pending, idle')) + await vi.waitFor(() => + expect(rendered.getByText('status: pending, idle')).toBeInTheDocument(), + ) }) test('should not schedule garbage collection, if gcTimeout is set to `Infinity`', async () => { @@ -4033,9 +4169,15 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) // mount - await vi.waitFor(() => rendered.getByText('count: 0')) - await vi.waitFor(() => rendered.getByText('count: 1')) - await vi.waitFor(() => rendered.getByText('count: 2')) + await vi.waitFor(() => + expect(rendered.getByText('count: 0')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('count: 1')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('count: 2')).toBeInTheDocument(), + ) }) it('should refetch in an interval depending on function result', async () => { @@ -4139,7 +4281,7 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('')) + await vi.waitFor(() => expect(rendered.getByText('')).toBeInTheDocument()) }) it('should accept an object as query key', async () => { @@ -4153,7 +4295,9 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('[{"a":"a"}]')) + await vi.waitFor(() => + expect(rendered.getByText('[{"a":"a"}]')).toBeInTheDocument(), + ) }) it('should refetch if any query instance becomes enabled', async () => { @@ -4458,19 +4602,29 @@ describe('useQuery', () => { } const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('Data: selected 101')) // 99 + 2 + await vi.waitFor(() => + expect(rendered.getByText('Data: selected 101')).toBeInTheDocument(), + ) // 99 + 2 - await vi.waitFor(() => rendered.getByText('Data: selected 2')) // 0 + 2 + await vi.waitFor(() => + expect(rendered.getByText('Data: selected 2')).toBeInTheDocument(), + ) // 0 + 2 fireEvent.click(rendered.getByRole('button', { name: /inc/i })) - await vi.waitFor(() => rendered.getByText('Data: selected 3')) // 0 + 3 + await vi.waitFor(() => + expect(rendered.getByText('Data: selected 3')).toBeInTheDocument(), + ) // 0 + 3 fireEvent.click(rendered.getByRole('button', { name: /forceUpdate/i })) - await vi.waitFor(() => rendered.getByText('forceValue: 2')) + await vi.waitFor(() => + expect(rendered.getByText('forceValue: 2')).toBeInTheDocument(), + ) // data should still be 3 after an independent re-render - await vi.waitFor(() => rendered.getByText('Data: selected 3')) + await vi.waitFor(() => + expect(rendered.getByText('Data: selected 3')).toBeInTheDocument(), + ) }) it('select should structurally share data', async () => { @@ -4966,18 +5120,24 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) // initial state check - rendered.getByText('status: pending') + expect(rendered.getByText('status: pending')).toBeInTheDocument() // render error state component - await vi.waitFor(() => rendered.getByText('error')) + await vi.waitFor(() => + expect(rendered.getByText('error')).toBeInTheDocument(), + ) // change to unmount query fireEvent.click(rendered.getByLabelText('change')) - await vi.waitFor(() => rendered.getByText('rendered')) + await vi.waitFor(() => + expect(rendered.getByText('rendered')).toBeInTheDocument(), + ) // change to mount new query fireEvent.click(rendered.getByLabelText('change')) - await vi.waitFor(() => rendered.getByText('error')) + await vi.waitFor(() => + expect(rendered.getByText('error')).toBeInTheDocument(), + ) }) it('should refetch when query key changed when switching between erroneous queries', async () => { @@ -5019,20 +5179,30 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) // initial state check - rendered.getByText('status: fetching') + expect(rendered.getByText('status: fetching')).toBeInTheDocument() // render error state component - await vi.waitFor(() => rendered.getByText('error')) + await vi.waitFor(() => + expect(rendered.getByText('error')).toBeInTheDocument(), + ) // change to mount second query fireEvent.click(rendered.getByLabelText('change')) - await vi.waitFor(() => rendered.getByText('status: fetching')) - await vi.waitFor(() => rendered.getByText('error')) + await vi.waitFor(() => + expect(rendered.getByText('status: fetching')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('error')).toBeInTheDocument(), + ) // change to mount first query again fireEvent.click(rendered.getByLabelText('change')) - await vi.waitFor(() => rendered.getByText('status: fetching')) - await vi.waitFor(() => rendered.getByText('error')) + await vi.waitFor(() => + expect(rendered.getByText('status: fetching')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('error')).toBeInTheDocument(), + ) }) it('should have no error in pending state when refetching after error occurred', async () => { @@ -6038,11 +6208,17 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) const fetchBtn = rendered.getByRole('button', { name: 'refetch' }) - await vi.waitFor(() => rendered.getByText('data: 1')) + await vi.waitFor(() => + expect(rendered.getByText('data: 1')).toBeInTheDocument(), + ) fireEvent.click(fetchBtn) - await vi.waitFor(() => rendered.getByText('data: 2')) + await vi.waitFor(() => + expect(rendered.getByText('data: 2')).toBeInTheDocument(), + ) fireEvent.click(fetchBtn) - await vi.waitFor(() => rendered.getByText('data: 3')) + await vi.waitFor(() => + expect(rendered.getByText('data: 3')).toBeInTheDocument(), + ) }) it('should use provided custom queryClient', async () => { @@ -6065,7 +6241,9 @@ describe('useQuery', () => { const rendered = render() - await vi.waitFor(() => rendered.getByText('data: custom client')) + await vi.waitFor(() => + expect(rendered.getByText('data: custom client')).toBeInTheDocument(), + ) }) it('should be notified of updates between create and subscribe', async () => { @@ -6098,8 +6276,12 @@ describe('useQuery', () => { } const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('status: success')) - await vi.waitFor(() => rendered.getByText('data: 1')) + await vi.waitFor(() => + expect(rendered.getByText('status: success')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('data: 1')).toBeInTheDocument(), + ) }) it('should reuse same data object reference when queryKey changes back to some cached data', async () => { const key = queryKey() @@ -6243,7 +6425,9 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('Works')) + await vi.waitFor(() => + expect(rendered.getByText('Works')).toBeInTheDocument(), + ) }) it('should keep the previous data when placeholderData is set and cache is used', async () => { @@ -6402,11 +6586,17 @@ describe('useQuery', () => { const rendered = renderWithClient(queryClient, ) - await vi.waitFor(() => rendered.getByText('status: pending')) + await vi.waitFor(() => + expect(rendered.getByText('status: pending')).toBeInTheDocument(), + ) fireEvent.click(rendered.getByRole('button', { name: 'enable' })) - await vi.waitFor(() => rendered.getByText('status: success')) - await vi.waitFor(() => rendered.getByText('data: data')) + await vi.waitFor(() => + expect(rendered.getByText('status: success')).toBeInTheDocument(), + ) + await vi.waitFor(() => + expect(rendered.getByText('data: data')).toBeInTheDocument(), + ) }) it('should allow enabled: true and queryFn: skipToken', async () => { diff --git a/packages/react-query/src/__tests__/useSuspenseInfiniteQuery.test-d.tsx b/packages/react-query/src/__tests__/useSuspenseInfiniteQuery.test-d.tsx index d59672fec79..49cdb7939b9 100644 --- a/packages/react-query/src/__tests__/useSuspenseInfiniteQuery.test-d.tsx +++ b/packages/react-query/src/__tests__/useSuspenseInfiniteQuery.test-d.tsx @@ -1,4 +1,4 @@ -import { describe, expectTypeOf, it } from 'vitest' +import { assertType, describe, expectTypeOf, it } from 'vitest' import { skipToken } from '@tanstack/query-core' import { useSuspenseInfiniteQuery } from '../useSuspenseInfiniteQuery' import type { InfiniteData } from '@tanstack/query-core' @@ -16,17 +16,21 @@ describe('useSuspenseInfiniteQuery', () => { }) it('should not allow skipToken in queryFn', () => { - useSuspenseInfiniteQuery({ - queryKey: ['key'], - // @ts-expect-error - queryFn: skipToken, - }) + assertType( + useSuspenseInfiniteQuery({ + queryKey: ['key'], + // @ts-expect-error + queryFn: skipToken, + }), + ) - useSuspenseInfiniteQuery({ - queryKey: ['key'], - // @ts-expect-error - queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), - }) + assertType( + useSuspenseInfiniteQuery({ + queryKey: ['key'], + // @ts-expect-error + queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), + }), + ) }) it('should not have pending status', () => { @@ -41,33 +45,39 @@ describe('useSuspenseInfiniteQuery', () => { }) it('should not allow placeholderData, enabled or throwOnError props', () => { - useSuspenseInfiniteQuery({ - queryKey: ['key'], - queryFn: () => Promise.resolve(5), - initialPageParam: 1, - getNextPageParam: () => 1, - // @ts-expect-error TS2345 - placeholderData: 5, - enabled: true, - }) + assertType( + useSuspenseInfiniteQuery({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + initialPageParam: 1, + getNextPageParam: () => 1, + // @ts-expect-error TS2345 + placeholderData: 5, + enabled: true, + }), + ) - useSuspenseInfiniteQuery({ - queryKey: ['key'], - queryFn: () => Promise.resolve(5), - initialPageParam: 1, - getNextPageParam: () => 1, - // @ts-expect-error TS2345 - enabled: true, - }) + assertType( + useSuspenseInfiniteQuery({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + initialPageParam: 1, + getNextPageParam: () => 1, + // @ts-expect-error TS2345 + enabled: true, + }), + ) - useSuspenseInfiniteQuery({ - queryKey: ['key'], - queryFn: () => Promise.resolve(5), - initialPageParam: 1, - getNextPageParam: () => 1, - // @ts-expect-error TS2345 - throwOnError: true, - }) + assertType( + useSuspenseInfiniteQuery({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + initialPageParam: 1, + getNextPageParam: () => 1, + // @ts-expect-error TS2345 + throwOnError: true, + }), + ) }) it('should not return isPlaceholderData', () => { @@ -78,7 +88,6 @@ describe('useSuspenseInfiniteQuery', () => { getNextPageParam: () => 1, }) - // @ts-expect-error TS2339 - query.isPlaceholderData + expectTypeOf(query).not.toHaveProperty('isPlaceholderData') }) }) diff --git a/packages/react-query/src/__tests__/useSuspenseQueries.test-d.tsx b/packages/react-query/src/__tests__/useSuspenseQueries.test-d.tsx index 8f3a48c150b..7298a9e594d 100644 --- a/packages/react-query/src/__tests__/useSuspenseQueries.test-d.tsx +++ b/packages/react-query/src/__tests__/useSuspenseQueries.test-d.tsx @@ -1,4 +1,4 @@ -import { describe, expectTypeOf, it } from 'vitest' +import { assertType, describe, expectTypeOf, it } from 'vitest' import { skipToken, useSuspenseQueries } from '..' import { queryOptions } from '../queryOptions' import type { OmitKeyof } from '..' @@ -90,25 +90,29 @@ describe('UseSuspenseQueries config object overload', () => { }) it('should not allow skipToken in queryFn', () => { - useSuspenseQueries({ - queries: [ - { - queryKey: ['key'], - // @ts-expect-error - queryFn: skipToken, - }, - ], - }) - - useSuspenseQueries({ - queries: [ - { - queryKey: ['key'], - // @ts-expect-error - queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), - }, - ], - }) + assertType( + useSuspenseQueries({ + queries: [ + { + queryKey: ['key'], + // @ts-expect-error + queryFn: skipToken, + }, + ], + }), + ) + + assertType( + useSuspenseQueries({ + queries: [ + { + queryKey: ['key'], + // @ts-expect-error + queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), + }, + ], + }), + ) }) it('TData should have correct type when conditional skipToken is passed', () => { @@ -206,39 +210,47 @@ describe('UseSuspenseQueries config object overload', () => { }) it('queryOptions with skipToken in queryFn should not work on useSuspenseQueries', () => { - const query1 = queryOptions({ - queryKey: ['key1'], - queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), - }) - - const query2 = queryOptions({ - queryKey: ['key1'], - queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), - initialData: 5, - }) - - // @ts-expect-error - useSuspenseQueries({ queries: [query1] }) - // @ts-expect-error - useSuspenseQueries({ queries: [query2] }) + assertType( + useSuspenseQueries({ + queries: [ + // @ts-expect-error + queryOptions({ + queryKey: ['key1'], + queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), + }), + ], + }), + ) + + assertType( + useSuspenseQueries({ + queries: [ + // @ts-expect-error + queryOptions({ + queryKey: ['key1'], + queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), + initialData: 5, + }), + ], + }), + ) }) it('should not show type error when using spreaded queryOptions', () => { - function myQueryOptions() { - return queryOptions({ - queryKey: ['key1'], - queryFn: () => 'Query Data', - }) - } - useSuspenseQueries({ - queries: [ - { - ...myQueryOptions(), - select(data: string) { - return data + assertType( + useSuspenseQueries({ + queries: [ + { + ...queryOptions({ + queryKey: ['key1'], + queryFn: () => 'Query Data', + }), + select(data: string) { + return data + }, }, - }, - ], - }) + ], + }), + ) }) }) diff --git a/packages/react-query/src/__tests__/useSuspenseQueries.test.tsx b/packages/react-query/src/__tests__/useSuspenseQueries.test.tsx index 98084c48880..af541cebb6c 100644 --- a/packages/react-query/src/__tests__/useSuspenseQueries.test.tsx +++ b/packages/react-query/src/__tests__/useSuspenseQueries.test.tsx @@ -322,21 +322,27 @@ describe('useSuspenseQueries 2', () => { , ) - await waitFor(() => rendered.getByText('loading')) + await waitFor(() => + expect(rendered.getByText('loading')).toBeInTheDocument(), + ) await waitFor(() => rendered.getByText('Data 0')) // go offline document.dispatchEvent(new CustomEvent('offline')) fireEvent.click(rendered.getByText('fetch')) - await waitFor(() => rendered.getByText('Data 0')) + await waitFor(() => + expect(rendered.getByText('Data 0')).toBeInTheDocument(), + ) // go back online document.dispatchEvent(new CustomEvent('online')) fireEvent.click(rendered.getByText('fetch')) // query should resume - await waitFor(() => rendered.getByText('Data 1')) + await waitFor(() => + expect(rendered.getByText('Data 1')).toBeInTheDocument(), + ) }) it('should throw error when queryKey changes and new query fails', async () => { @@ -426,15 +432,19 @@ describe('useSuspenseQueries 2', () => { , ) - await waitFor(() => rendered.getByText('Loading...')) + await waitFor(() => + expect(rendered.getByText('Loading...')).toBeInTheDocument(), + ) - await waitFor(() => rendered.getByText('data0')) + await waitFor(() => expect(rendered.getByText('data0')).toBeInTheDocument()) fireEvent.click(rendered.getByText('inc')) - await waitFor(() => rendered.getByText('Pending...')) + await waitFor(() => + expect(rendered.getByText('Pending...')).toBeInTheDocument(), + ) - await waitFor(() => rendered.getByText('data1')) + await waitFor(() => expect(rendered.getByText('data1')).toBeInTheDocument()) }) it('should not request old data inside transitions (issue #6486)', async () => { @@ -533,15 +543,19 @@ describe('useSuspenseQueries 2', () => { , ) - await waitFor(() => rendered.getByText('Loading...')) + await waitFor(() => + expect(rendered.getByText('Loading...')).toBeInTheDocument(), + ) - await waitFor(() => rendered.getByText('data0')) + await waitFor(() => expect(rendered.getByText('data0')).toBeInTheDocument()) fireEvent.click(rendered.getByText('inc')) - await waitFor(() => rendered.getByText('Pending...')) + await waitFor(() => + expect(rendered.getByText('Pending...')).toBeInTheDocument(), + ) - await waitFor(() => rendered.getByText('data1')) + await waitFor(() => expect(rendered.getByText('data1')).toBeInTheDocument()) }) it('should show error boundary even with gcTime:0 (#7853)', async () => { diff --git a/packages/react-query/src/__tests__/useSuspenseQuery.test-d.tsx b/packages/react-query/src/__tests__/useSuspenseQuery.test-d.tsx index 09576d63b89..e78b8a907dd 100644 --- a/packages/react-query/src/__tests__/useSuspenseQuery.test-d.tsx +++ b/packages/react-query/src/__tests__/useSuspenseQuery.test-d.tsx @@ -1,4 +1,4 @@ -import { describe, expectTypeOf, it } from 'vitest' +import { assertType, describe, expectTypeOf, it } from 'vitest' import { skipToken } from '@tanstack/query-core' import { useSuspenseQuery } from '../useSuspenseQuery' @@ -22,51 +22,57 @@ describe('useSuspenseQuery', () => { }) it('should not allow skipToken in queryFn', () => { - useSuspenseQuery({ - queryKey: ['key'], - // @ts-expect-error - queryFn: skipToken, - }) - - useSuspenseQuery({ - queryKey: ['key'], - // @ts-expect-error - queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), - }) + assertType( + useSuspenseQuery({ + queryKey: ['key'], + // @ts-expect-error + queryFn: skipToken, + }), + ) + assertType( + useSuspenseQuery({ + queryKey: ['key'], + // @ts-expect-error + queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), + }), + ) }) it('should not allow placeholderData, enabled or throwOnError props', () => { - useSuspenseQuery({ - queryKey: ['key'], - queryFn: () => Promise.resolve(5), - // @ts-expect-error TS2345 - placeholderData: 5, - enabled: true, - }) - - useSuspenseQuery({ - queryKey: ['key'], - queryFn: () => Promise.resolve(5), - // @ts-expect-error TS2345 - enabled: true, - }) - - useSuspenseQuery({ - queryKey: ['key'], - queryFn: () => Promise.resolve(5), - // @ts-expect-error TS2345 - throwOnError: true, - }) + assertType( + useSuspenseQuery({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + // @ts-expect-error TS2345 + placeholderData: 5, + enabled: true, + }), + ) + assertType( + useSuspenseQuery({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + // @ts-expect-error TS2345 + enabled: true, + }), + ) + assertType( + useSuspenseQuery({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + // @ts-expect-error TS2345 + throwOnError: true, + }), + ) }) it('should not return isPlaceholderData', () => { - const query = useSuspenseQuery({ - queryKey: ['key'], - queryFn: () => Promise.resolve(5), - }) - - // @ts-expect-error TS2339 - query.isPlaceholderData + expectTypeOf( + useSuspenseQuery({ + queryKey: ['key'], + queryFn: () => Promise.resolve(5), + }), + ).not.toHaveProperty('isPlaceholderData') }) it('should type-narrow the error field', () => { diff --git a/packages/react-query/src/__tests__/useSuspenseQuery.test.tsx b/packages/react-query/src/__tests__/useSuspenseQuery.test.tsx index d86e710cd07..06b8e61d07d 100644 --- a/packages/react-query/src/__tests__/useSuspenseQuery.test.tsx +++ b/packages/react-query/src/__tests__/useSuspenseQuery.test.tsx @@ -315,15 +315,23 @@ describe('useSuspenseQuery', () => { , ) - await waitFor(() => rendered.getByText('Loading...')) - await waitFor(() => rendered.getByText('error boundary')) - await waitFor(() => rendered.getByText('retry')) + await waitFor(() => + expect(rendered.getByText('Loading...')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) + await waitFor(() => expect(rendered.getByText('retry')).toBeInTheDocument()) fireEvent.click(rendered.getByText('retry')) - await waitFor(() => rendered.getByText('error boundary')) - await waitFor(() => rendered.getByText('retry')) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) + await waitFor(() => expect(rendered.getByText('retry')).toBeInTheDocument()) succeed = true fireEvent.click(rendered.getByText('retry')) - await waitFor(() => rendered.getByText('rendered')) + await waitFor(() => + expect(rendered.getByText('rendered')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -404,11 +412,19 @@ describe('useSuspenseQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => rendered.getByText('Loading...')) - await waitFor(() => rendered.getByText(`data: ${key1}`)) + await waitFor(() => + expect(rendered.getByText('Loading...')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText(`data: ${key1}`)).toBeInTheDocument(), + ) fireEvent.click(rendered.getByText('switch')) - await waitFor(() => rendered.getByText('Loading...')) - await waitFor(() => rendered.getByText(`data: ${key2}`)) + await waitFor(() => + expect(rendered.getByText('Loading...')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText(`data: ${key2}`)).toBeInTheDocument(), + ) }) it('should retry fetch if the reset error boundary has been reset with global hook', async () => { @@ -462,15 +478,23 @@ describe('useSuspenseQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => rendered.getByText('Loading...')) - await waitFor(() => rendered.getByText('error boundary')) - await waitFor(() => rendered.getByText('retry')) + await waitFor(() => + expect(rendered.getByText('Loading...')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) + await waitFor(() => expect(rendered.getByText('retry')).toBeInTheDocument()) fireEvent.click(rendered.getByText('retry')) - await waitFor(() => rendered.getByText('error boundary')) - await waitFor(() => rendered.getByText('retry')) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) + await waitFor(() => expect(rendered.getByText('retry')).toBeInTheDocument()) succeed = true fireEvent.click(rendered.getByText('retry')) - await waitFor(() => rendered.getByText('rendered')) + await waitFor(() => + expect(rendered.getByText('rendered')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -510,8 +534,12 @@ describe('useSuspenseQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => rendered.getByText('Loading...')) - await waitFor(() => rendered.getByText('error boundary')) + await waitFor(() => + expect(rendered.getByText('Loading...')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -553,8 +581,12 @@ describe('useSuspenseQuery', () => { const rendered = renderWithClient(queryClient, ) - await waitFor(() => rendered.getByText('Loading...')) - await waitFor(() => rendered.getByText('error boundary')) + await waitFor(() => + expect(rendered.getByText('Loading...')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('error boundary')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -794,16 +826,22 @@ describe('useSuspenseQuery', () => { const rendered = renderWithClient(queryClient, ) // render suspense fallback (Loading...) - await waitFor(() => rendered.getByText('Loading...')) + await waitFor(() => + expect(rendered.getByText('Loading...')).toBeInTheDocument(), + ) // resolve promise -> render Page (rendered) - await waitFor(() => rendered.getByText('rendered data success')) + await waitFor(() => + expect(rendered.getByText('rendered data success')).toBeInTheDocument(), + ) // change promise result to error succeed = false // refetch fireEvent.click(rendered.getByRole('button', { name: 'refetch' })) // we are now in error state but still have data to show - await waitFor(() => rendered.getByText('rendered data error')) + await waitFor(() => + expect(rendered.getByText('rendered data error')).toBeInTheDocument(), + ) consoleMock.mockRestore() }) @@ -849,12 +887,20 @@ describe('useSuspenseQuery', () => { , ) - await waitFor(() => rendered.getByText('loading')) - await waitFor(() => rendered.getByText('data: 1')) + await waitFor(() => + expect(rendered.getByText('loading')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('data: 1')).toBeInTheDocument(), + ) fireEvent.click(rendered.getByLabelText('toggle')) - await waitFor(() => rendered.getByText('loading')) - await waitFor(() => rendered.getByText('data: 2')) + await waitFor(() => + expect(rendered.getByText('loading')).toBeInTheDocument(), + ) + await waitFor(() => + expect(rendered.getByText('data: 2')).toBeInTheDocument(), + ) }) it('should log an error when skipToken is passed as queryFn', () => {