@tanstack/react-query 5.0.0-alpha.4 → 5.0.0-alpha.6

package/src/__tests__/useMutation.test.tsx

@@ -13,6 +13,7 @@ import {
   setActTimeout,
   sleep,
 } from './utils'
+import { vi } from 'vitest'
 
 describe('useMutation', () => {
   const queryCache = new QueryCache()
@@ -95,8 +96,8 @@ describe('useMutation', () => {
 
   it('should be able to call `onSuccess` and `onSettled` after each successful mutate', async () => {
     let count = 0
-    const onSuccessMock = jest.fn()
-    const onSettledMock = jest.fn()
+    const onSuccessMock = vi.fn()
+    const onSettledMock = vi.fn()
 
     function Page() {
       const { mutate } = useMutation({
@@ -151,7 +152,7 @@ describe('useMutation', () => {
     let count = 0
     type Value = { count: number }
 
-    const mutateFn = jest.fn<Promise<Value>, [value: Value]>()
+    const mutateFn = vi.fn<[value: Value], Promise<Value>>()
 
     mutateFn.mockImplementationOnce(() => {
       return Promise.reject(new Error('Error test Jonas'))
@@ -197,8 +198,8 @@ describe('useMutation', () => {
   })
 
   it('should be able to call `onError` and `onSettled` after each failed mutate', async () => {
-    const onErrorMock = jest.fn()
-    const onSettledMock = jest.fn()
+    const onErrorMock = vi.fn()
+    const onSettledMock = vi.fn()
     let count = 0
 
     function Page() {
@@ -488,7 +489,7 @@ describe('useMutation', () => {
 
   it('should call onMutate even if paused', async () => {
     const onlineMock = mockNavigatorOnLine(false)
-    const onMutate = jest.fn()
+    const onMutate = vi.fn()
     let count = 0
 
     function Page() {
@@ -688,7 +689,7 @@ describe('useMutation', () => {
   })
 
   it('should be able to throw an error when throwErrors is set to true', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     function Page() {
@@ -735,7 +736,7 @@ describe('useMutation', () => {
   })
 
   it('should be able to throw an error when throwErrors is a function that returns true', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     let boundary = false
@@ -788,8 +789,8 @@ describe('useMutation', () => {
   })
 
   it('should pass meta to mutation', async () => {
-    const errorMock = jest.fn()
-    const successMock = jest.fn()
+    const errorMock = vi.fn()
+    const successMock = vi.fn()
 
     const queryClientMutationMeta = createQueryClient({
       mutationCache: new MutationCache({
@@ -847,10 +848,10 @@ describe('useMutation', () => {
   })
 
   it('should call cache callbacks when unmounted', async () => {
-    const onSuccess = jest.fn()
-    const onSuccessMutate = jest.fn()
-    const onSettled = jest.fn()
-    const onSettledMutate = jest.fn()
+    const onSuccess = vi.fn()
+    const onSuccessMutate = vi.fn()
+    const onSettled = vi.fn()
+    const onSettledMutate = vi.fn()
     const mutationKey = queryKey()
     let count = 0
 
@@ -919,10 +920,10 @@ describe('useMutation', () => {
   })
 
   it('should call mutate callbacks only for the last observer', async () => {
-    const onSuccess = jest.fn()
-    const onSuccessMutate = jest.fn()
-    const onSettled = jest.fn()
-    const onSettledMutate = jest.fn()
+    const onSuccess = vi.fn()
+    const onSuccessMutate = vi.fn()
+    const onSettled = vi.fn()
+    const onSettledMutate = vi.fn()
     let count = 0
 
     function Page() {
@@ -1008,7 +1009,7 @@ describe('useMutation', () => {
 
   it('should go to error state if onSuccess callback errors', async () => {
     const error = new Error('error from onSuccess')
-    const onError = jest.fn()
+    const onError = vi.fn()
 
     function Page() {
       const mutation = useMutation({
@@ -1076,7 +1077,7 @@ describe('useMutation', () => {
   it('should go to error state if onSettled callback errors', async () => {
     const error = new Error('error from onSettled')
     const mutateFnError = new Error('mutateFnError')
-    const onError = jest.fn()
+    const onError = vi.fn()
 
     function Page() {
       const mutation = useMutation({

package/src/__tests__/useMutationState.test.tsx

@@ -8,8 +8,6 @@ import {
   setActTimeout,
   sleep,
 } from './utils'
-import * as MutationCacheModule from '../../../query-core/src/mutationCache'
-import { screen } from 'solid-testing-library'
 
 describe('useIsMutating', () => {
   it('should return the number of fetching mutations', async () => {
@@ -140,61 +138,6 @@ describe('useIsMutating', () => {
     await waitFor(() => expect(isMutatings).toEqual([0, 1, 0]))
   })
 
-  it('should not change state if unmounted', async () => {
-    // We have to mock the MutationCache to not unsubscribe
-    // the listener when the component is unmounted
-    class MutationCacheMock extends MutationCacheModule.MutationCache {
-      subscribe(listener: any) {
-        super.subscribe(listener)
-        return () => void 0
-      }
-    }
-
-    const MutationCacheSpy = jest
-      .spyOn(MutationCacheModule, 'MutationCache')
-      .mockImplementation((fn) => {
-        return new MutationCacheMock(fn)
-      })
-
-    const queryClient = createQueryClient()
-
-    function IsMutating() {
-      useIsMutating()
-      return null
-    }
-
-    function Page() {
-      const [mounted, setMounted] = React.useState(true)
-      const { mutate: mutate1 } = useMutation({
-        mutationKey: ['mutation1'],
-        mutationFn: async () => {
-          await sleep(10)
-          return 'data'
-        },
-      })
-
-      React.useEffect(() => {
-        mutate1()
-      }, [mutate1])
-
-      return (
-        <div>
-          <button onClick={() => setMounted(false)}>unmount</button>
-          {mounted && <IsMutating />}
-        </div>
-      )
-    }
-
-    const { getByText } = renderWithClient(queryClient, <Page />)
-    fireEvent.click(getByText('unmount'))
-
-    // Should not display the console error
-    // "Warning: Can't perform a React state update on an unmounted component"
-
-    await sleep(20)
-    MutationCacheSpy.mockRestore()
-  })
-
   it('should use provided custom queryClient', async () => {
     const queryClient = createQueryClient()
 
@@ -275,7 +218,7 @@ describe('useMutationState', () => {
 
     await waitFor(() => rendered.getByText('data: null'))
 
-    fireEvent.click(screen.getByRole('button', { name: /mutate/i }))
+    fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
 
     await waitFor(() => rendered.getByText('data: data1'))
 

package/src/__tests__/useQueries.test.tsx

@@ -1,9 +1,17 @@
-import { fireEvent, render, waitFor } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 
-import * as QueriesObserverModule from '../../../query-core/src/queriesObserver'
-
+import type { QueryFunctionContext } from '@tanstack/query-core'
+import { vi } from 'vitest'
+import type {
+  QueryFunction,
+  QueryKey,
+  QueryObserverResult,
+  UseQueryOptions,
+  UseQueryResult,
+} from '..'
+import { QueryCache, useQueries } from '..'
 import {
   createQueryClient,
   expectType,
@@ -12,15 +20,6 @@ import {
   renderWithClient,
   sleep,
 } from './utils'
-import type {
-  QueryFunction,
-  QueryKey,
-  QueryObserverResult,
-  UseQueryOptions,
-  UseQueryResult,
-} from '..'
-import { QueriesObserver, QueryCache, useQueries } from '..'
-import type { QueryFunctionContext } from '@tanstack/query-core'
 
 describe('useQueries', () => {
   const queryCache = new QueryCache()
@@ -716,67 +715,8 @@ describe('useQueries', () => {
     }
   })
 
-  it('should not change state if unmounted', async () => {
-    const key1 = queryKey()
-
-    // We have to mock the QueriesObserver to not unsubscribe
-    // the listener when the component is unmounted
-    class QueriesObserverMock extends QueriesObserver {
-      subscribe(listener: any) {
-        super.subscribe(listener)
-        return () => void 0
-      }
-    }
-
-    const QueriesObserverSpy = jest
-      .spyOn(QueriesObserverModule, 'QueriesObserver')
-      .mockImplementation((fn) => {
-        return new QueriesObserverMock(fn)
-      })
-
-    function Queries() {
-      useQueries({
-        queries: [
-          {
-            queryKey: key1,
-            queryFn: async () => {
-              await sleep(10)
-              return 1
-            },
-          },
-        ],
-      })
-
-      return (
-        <div>
-          <span>queries</span>
-        </div>
-      )
-    }
-
-    function Page() {
-      const [mounted, setMounted] = React.useState(true)
-
-      return (
-        <div>
-          <button onClick={() => setMounted(false)}>unmount</button>
-          {mounted && <Queries />}
-        </div>
-      )
-    }
-
-    const { getByText } = renderWithClient(queryClient, <Page />)
-    fireEvent.click(getByText('unmount'))
-
-    // Should not display the console error
-    // "Warning: Can't perform a React state update on an unmounted component"
-
-    await sleep(20)
-    QueriesObserverSpy.mockRestore()
-  })
-
   it("should throw error if in one of queries' queryFn throws and throwErrors is in use", async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     const key1 = queryKey()
@@ -841,7 +781,7 @@ describe('useQueries', () => {
   })
 
   it("should throw error if in one of queries' queryFn throws and throwErrors function resolves to true", async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     const key1 = queryKey()

package/src/__tests__/useQuery.test.tsx

@@ -21,6 +21,8 @@ import type {
 } from '..'
 import { QueryCache, useQuery, keepPreviousData } from '..'
 import { ErrorBoundary } from 'react-error-boundary'
+import { vi } from 'vitest'
+import type { Mock } from 'vitest'
 
 describe('useQuery', () => {
   const queryCache = new QueryCache()
@@ -451,7 +453,7 @@ describe('useQuery', () => {
   it('should call onSuccess after a query has been fetched', async () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
-    const onSuccess = jest.fn()
+    const onSuccess = vi.fn()
 
     function Page() {
       const state = useQuery({
@@ -477,7 +479,7 @@ describe('useQuery', () => {
   it('should call onSuccess after a query has been refetched', async () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
-    const onSuccess = jest.fn()
+    const onSuccess = vi.fn()
     let count = 0
 
     function Page() {
@@ -515,7 +517,7 @@ describe('useQuery', () => {
   it('should call onSuccess after a disabled query has been fetched', async () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
-    const onSuccess = jest.fn()
+    const onSuccess = vi.fn()
 
     function Page() {
       const state = useQuery({
@@ -554,7 +556,7 @@ describe('useQuery', () => {
   it('should not call onSuccess if a component has unmounted', async () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
-    const onSuccess = jest.fn()
+    const onSuccess = vi.fn()
 
     function Page() {
       const [show, setShow] = React.useState(true)
@@ -589,7 +591,7 @@ describe('useQuery', () => {
   it('should call onError after a query has been fetched with an error', async () => {
     const key = queryKey()
     const states: UseQueryResult<unknown>[] = []
-    const onError = jest.fn()
+    const onError = vi.fn()
 
     function Page() {
       const state = useQuery<unknown>({
@@ -612,7 +614,7 @@ describe('useQuery', () => {
 
   it('should not call onError when receiving a CancelledError', async () => {
     const key = queryKey()
-    const onError = jest.fn()
+    const onError = vi.fn()
 
     function Page() {
       const { status, fetchStatus } = useQuery({
@@ -646,7 +648,7 @@ describe('useQuery', () => {
   it('should call onSettled after a query has been fetched', async () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
-    const onSettled = jest.fn()
+    const onSettled = vi.fn()
 
     function Page() {
       const state = useQuery({
@@ -672,7 +674,7 @@ describe('useQuery', () => {
 
   it('should call onSettled after a query has been fetched with an error', async () => {
     const key = queryKey()
-    const onSettled = jest.fn()
+    const onSettled = vi.fn()
     const error = new Error('error')
 
     function Page() {
@@ -2584,7 +2586,7 @@ describe('useQuery', () => {
 
   it('should not refetch query on focus when `enabled` is set to `false`', async () => {
     const key = queryKey()
-    const queryFn = jest.fn<string, unknown[]>().mockReturnValue('data')
+    const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
 
     function Page() {
       const { data = 'default' } = useQuery({
@@ -2895,7 +2897,7 @@ describe('useQuery', () => {
   })
 
   it('should throw error if queryFn throws and throwErrors is in use', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     const key = queryKey()
@@ -2987,7 +2989,7 @@ describe('useQuery', () => {
   })
 
   it('should throw error instead of setting status when error should be thrown', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
 
@@ -3355,7 +3357,7 @@ describe('useQuery', () => {
   it('should retry specified number of times', async () => {
     const key = queryKey()
 
-    const queryFn = jest.fn<unknown, unknown[]>()
+    const queryFn = vi.fn<unknown[], unknown>()
     queryFn.mockImplementation(() => {
       return Promise.reject(new Error('Error test Barrett'))
     })
@@ -3392,7 +3394,7 @@ describe('useQuery', () => {
   it('should not retry if retry function `false`', async () => {
     const key = queryKey()
 
-    const queryFn = jest.fn<unknown, unknown[]>()
+    const queryFn = vi.fn<unknown[], unknown>()
 
     queryFn.mockImplementationOnce(() => {
       return Promise.reject(new Error('Error test Tanner'))
@@ -3438,7 +3440,7 @@ describe('useQuery', () => {
 
     type DelayError = { delay: number }
 
-    const queryFn = jest.fn<unknown, unknown[]>()
+    const queryFn = vi.fn<unknown[], unknown>()
     queryFn.mockImplementation(() => {
       return Promise.reject({ delay: 50 })
     })
@@ -3631,10 +3633,10 @@ describe('useQuery', () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
 
-    const queryFn = jest.fn<string, unknown[]>()
+    const queryFn = vi.fn<unknown[], string>()
     queryFn.mockImplementation(() => 'data')
 
-    const prefetchQueryFn = jest.fn<string, unknown[]>()
+    const prefetchQueryFn = vi.fn<unknown[], string>()
     prefetchQueryFn.mockImplementation(() => 'not yet...')
 
     await queryClient.prefetchQuery({
@@ -3662,10 +3664,10 @@ describe('useQuery', () => {
   it('should not refetch if not stale after a prefetch', async () => {
     const key = queryKey()
 
-    const queryFn = jest.fn<string, unknown[]>()
+    const queryFn = vi.fn<unknown[], string>()
     queryFn.mockImplementation(() => 'data')
 
-    const prefetchQueryFn = jest.fn<Promise<string>, unknown[]>()
+    const prefetchQueryFn = vi.fn<unknown[], Promise<string>>()
     prefetchQueryFn.mockImplementation(async () => {
       await sleep(10)
       return 'not yet...'
@@ -3971,7 +3973,7 @@ describe('useQuery', () => {
 
   it('it should support enabled:false in query object syntax', async () => {
     const key = queryKey()
-    const queryFn = jest.fn<string, unknown[]>()
+    const queryFn = vi.fn<unknown[], string>()
     queryFn.mockImplementation(() => 'data')
 
     function Page() {
@@ -4030,15 +4032,11 @@ describe('useQuery', () => {
     const rendered = renderWithClient(queryClient, <Page />)
 
     await waitFor(() => rendered.getByText('fetched data'))
-    jest.useFakeTimers({
-      legacyFakeTimers: true,
-    })
-    const setTimeoutSpy = jest.spyOn(globalThis.window, 'setTimeout')
+    const setTimeoutSpy = vi.spyOn(globalThis.window, 'setTimeout')
 
     rendered.unmount()
 
     expect(setTimeoutSpy).not.toHaveBeenCalled()
-    jest.useRealTimers()
   })
 
   test('should schedule garbage collection, if gcTimeout is not set to infinity', async () => {
@@ -4057,10 +4055,7 @@ describe('useQuery', () => {
 
     await waitFor(() => rendered.getByText('fetched data'))
 
-    jest.useFakeTimers({
-      legacyFakeTimers: true,
-    })
-    const setTimeoutSpy = jest.spyOn(globalThis.window, 'setTimeout')
+    const setTimeoutSpy = vi.spyOn(globalThis.window, 'setTimeout')
 
     rendered.unmount()
 
@@ -4068,13 +4063,12 @@ describe('useQuery', () => {
       expect.any(Function),
       1000 * 60 * 10,
     )
-    jest.useRealTimers()
   })
 
   it('should not cause memo churn when data does not change', async () => {
     const key = queryKey()
-    const queryFn = jest.fn<string, unknown[]>().mockReturnValue('data')
-    const memoFn = jest.fn()
+    const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
+    const memoFn = vi.fn()
 
     function Page() {
       const result = useQuery({
@@ -4281,7 +4275,7 @@ describe('useQuery', () => {
   it('should refetch if any query instance becomes enabled', async () => {
     const key = queryKey()
 
-    const queryFn = jest.fn<string, unknown[]>().mockReturnValue('data')
+    const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
 
     function Disabled() {
       useQuery({ queryKey: key, queryFn, enabled: false })
@@ -4640,11 +4634,11 @@ describe('useQuery', () => {
 
   it('should cancel the query function when there are no more subscriptions', async () => {
     const key = queryKey()
-    let cancelFn: jest.Mock = jest.fn()
+    let cancelFn: Mock = vi.fn()
 
     const queryFn = ({ signal }: { signal?: AbortSignal }) => {
       const promise = new Promise<string>((resolve, reject) => {
-        cancelFn = jest.fn(() => reject('Cancelled'))
+        cancelFn = vi.fn(() => reject('Cancelled'))
         signal?.addEventListener('abort', cancelFn)
         sleep(20).then(() => resolve('OK'))
       })
@@ -4963,7 +4957,7 @@ describe('useQuery', () => {
   })
 
   it('should refetch when changed enabled to true in error state', async () => {
-    const queryFn = jest.fn<unknown, unknown[]>()
+    const queryFn = vi.fn<unknown[], unknown>()
     queryFn.mockImplementation(async () => {
       await sleep(10)
       return Promise.reject(new Error('Suspense Error Bingo'))
@@ -5981,7 +5975,7 @@ describe('useQuery', () => {
 
   it('setQueryData - should not call onSuccess callback of active observers', async () => {
     const key = queryKey()
-    const onSuccess = jest.fn()
+    const onSuccess = vi.fn()
 
     function Page() {
       const state = useQuery({

package/src/__tests__/utils.tsx

@@ -3,6 +3,7 @@ import { act, render } from '@testing-library/react'
 import type { QueryClientConfig } from '..'
 import { QueryClient, QueryClientProvider } from '..'
 import * as utils from '@tanstack/query-core'
+import { vi } from 'vitest'
 
 export function renderWithClient(
   client: QueryClient,
@@ -45,11 +46,11 @@ export function createQueryClient(config?: QueryClientConfig): QueryClient {
 }
 
 export function mockVisibilityState(value: DocumentVisibilityState) {
-  return jest.spyOn(document, 'visibilityState', 'get').mockReturnValue(value)
+  return vi.spyOn(document, 'visibilityState', 'get').mockReturnValue(value)
 }
 
 export function mockNavigatorOnLine(value: boolean) {
-  return jest.spyOn(navigator, 'onLine', 'get').mockReturnValue(value)
+  return vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(value)
 }
 
 let queryKeyCount = 0