refactor(tests): Get rid of TS errors in tests files (#4180)

* chore: get rid of TS errors in tests files

Test files in most packages were importing `tests/utils` from the root of the repo causing hundreds of typescript errors. This commit collocates these utils in each of the packages and removes 'exclude' statements from all tsconfig files as they are no longer necessary for the typechecking to pass.

* style: fix formatting

* fix: resolve broken references

packages/query-async-storage-persister/src/__tests__/asyncThrottle.test.ts

@@ -1,5 +1,5 @@
 import { asyncThrottle } from '../asyncThrottle'
-import { sleep as delay } from '../../../../tests/utils'
+import { sleep as delay } from './utils'
 
 describe('asyncThrottle', () => {
   test('basic', async () => {

packages/query-async-storage-persister/src/__tests__/utils.ts

@@ -0,0 +1,5 @@
+export function sleep(timeout: number): Promise<void> {
+  return new Promise((resolve, _reject) => {
+    setTimeout(resolve, timeout)
+  })
+}

packages/query-async-storage-persister/tsconfig.json

@@ -7,7 +7,6 @@
     "tsBuildInfoFile": "./build/.tsbuildinfo"
   },
   "include": ["src"],
-  "exclude": ["src/__tests__"],
   "references": [
     { "path": "../query-core" },
     { "path": "../react-query-persist-client" }

packages/query-broadcast-client-experimental/tsconfig.json

@@ -7,6 +7,5 @@
     "tsBuildInfoFile": "./build/.tsbuildinfo"
   },
   "include": ["src"],
-  "exclude": ["src/__tests__"],
   "references": [{ "path": "../query-core" }]
 }

packages/query-core/src/index.ts

@@ -12,6 +12,7 @@ export { onlineManager } from './onlineManager'
 export {
   hashQueryKey,
   isError,
+  isServer,
   parseQueryArgs,
   parseFilterArgs,
   parseMutationFilterArgs,

packages/query-core/src/tests/focusManager.test.tsx

@@ -1,6 +1,6 @@
 import { sleep } from '../utils'
 import { FocusManager } from '../focusManager'
-import { setIsServer } from '../../../../tests/utils'
+import { setIsServer } from './utils'
 
 describe('focusManager', () => {
   let focusManager: FocusManager

packages/query-core/src/tests/hydration.test.tsx

@@ -3,7 +3,7 @@ import {
   executeMutation,
   mockNavigatorOnLine,
   sleep,
-} from '../../../../tests/utils'
+} from './utils'
 import { QueryCache } from '../queryCache'
 import { dehydrate, hydrate } from '../hydration'
 

packages/query-core/src/tests/infiniteQueryBehavior.test.tsx

@@ -4,7 +4,7 @@ import {
   InfiniteQueryObserver,
   InfiniteQueryObserverResult,
 } from '@tanstack/query-core'
-import { createQueryClient, queryKey } from '../../../../tests/utils'
+import { createQueryClient, queryKey } from './utils'
 
 describe('InfiniteQueryBehavior', () => {
   let queryClient: QueryClient

packages/query-core/src/tests/infiniteQueryObserver.test.tsx

@@ -1,4 +1,4 @@
-import { createQueryClient, queryKey, sleep } from '../../../../tests/utils'
+import { createQueryClient, queryKey, sleep } from './utils'
 import { QueryClient, InfiniteQueryObserver } from '..'
 
 describe('InfiniteQueryObserver', () => {

packages/query-core/src/tests/mutationCache.test.tsx

@@ -1,10 +1,5 @@
 import { waitFor } from '@testing-library/react'
-import {
-  queryKey,
-  sleep,
-  executeMutation,
-  createQueryClient,
-} from '../../../../tests/utils'
+import { queryKey, sleep, executeMutation, createQueryClient } from './utils'
 import { MutationCache, MutationObserver } from '..'
 
 describe('mutationCache', () => {

packages/query-core/src/tests/mutationObserver.test.tsx

@@ -1,5 +1,5 @@
 import { waitFor } from '@testing-library/react'
-import { createQueryClient, sleep } from '../../../../tests/utils'
+import { createQueryClient, sleep } from './utils'
 import { QueryClient, MutationObserver } from '..'
 
 describe('mutationObserver', () => {

packages/query-core/src/tests/mutations.test.tsx

@@ -1,10 +1,5 @@
 import { QueryClient } from '..'
-import {
-  createQueryClient,
-  executeMutation,
-  queryKey,
-  sleep,
-} from '../../../../tests/utils'
+import { createQueryClient, executeMutation, queryKey, sleep } from './utils'
 import { MutationState } from '../mutation'
 import { MutationObserver } from '../mutationObserver'
 

packages/query-core/src/tests/notifyManager.test.tsx

@@ -1,5 +1,5 @@
 import { createNotifyManager } from '../notifyManager'
-import { sleep } from '../../../../tests/utils'
+import { sleep } from './utils'
 
 describe('notifyManager', () => {
   it('should use default notifyFn', async () => {

packages/query-core/src/tests/onlineManager.test.tsx

@@ -1,5 +1,5 @@
 import { OnlineManager } from '../onlineManager'
-import { setIsServer, sleep } from '../../../../tests/utils'
+import { setIsServer, sleep } from './utils'
 
 describe('onlineManager', () => {
   let onlineManager: OnlineManager

packages/query-core/src/tests/queriesObserver.test.tsx

@@ -1,10 +1,5 @@
 import { waitFor } from '@testing-library/react'
-import {
-  sleep,
-  queryKey,
-  createQueryClient,
-  mockLogger,
-} from '../../../../tests/utils'
+import { sleep, queryKey, createQueryClient, mockLogger } from './utils'
 import {
   QueryClient,
   QueriesObserver,

packages/query-core/src/tests/query.test.tsx

@@ -4,7 +4,7 @@ import {
   mockVisibilityState,
   mockLogger,
   createQueryClient,
-} from '../../../../tests/utils'
+} from './utils'
 import {
   QueryCache,
   QueryClient,

packages/query-core/src/tests/queryCache.test.tsx

@@ -1,4 +1,4 @@
-import { sleep, queryKey, createQueryClient } from '../../../../tests/utils'
+import { sleep, queryKey, createQueryClient } from './utils'
 import { QueryCache, QueryClient } from '..'
 import { Query } from '.././query'
 

packages/query-core/src/tests/queryClient.test.tsx

@@ -1,12 +1,7 @@
 import { waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 
-import {
-  sleep,
-  queryKey,
-  mockLogger,
-  createQueryClient,
-} from '../../../../tests/utils'
+import { sleep, queryKey, mockLogger, createQueryClient } from './utils'
 import {
   InfiniteQueryObserver,
   QueryCache,

packages/query-core/src/tests/queryObserver.test.tsx

@@ -4,7 +4,7 @@ import {
   expectType,
   mockLogger,
   createQueryClient,
-} from '../../../../tests/utils'
+} from './utils'
 import {
   QueryClient,
   QueryObserver,

packages/query-core/src/tests/utils.test.tsx

@@ -9,7 +9,7 @@ import {
   isPlainArray,
 } from '../utils'
 import { Mutation } from '../mutation'
-import { createQueryClient } from '../../../../tests/utils'
+import { createQueryClient } from './utils'
 
 describe('core/utils', () => {
   describe('isPlainObject', () => {

tests/utils.ts → packages/query-core/src/tests/utils.ts

@@ -5,7 +5,7 @@ import {
   QueryClient,
   QueryClientConfig,
 } from '@tanstack/query-core'
-import * as utils from '../packages/query-core/src/utils'
+import * as utils from '../utils'
 
 export function createQueryClient(config?: QueryClientConfig): QueryClient {
   jest.spyOn(console, 'error').mockImplementation(() => undefined)

packages/query-core/tsconfig.json

@@ -6,6 +6,5 @@
     "outDir": "./build/lib",
     "tsBuildInfoFile": "./build/.tsbuildinfo"
   },
-  "include": ["src"],
-  "exclude": ["src/tests"]
+  "include": ["src"]
 }

packages/query-sync-storage-persister/src/__tests__/storageIsFull.test.ts

@@ -6,7 +6,7 @@ import {
 } from '@tanstack/query-core'
 import { removeOldestQuery } from '@tanstack/react-query-persist-client'
 import { createSyncStoragePersister } from '../index'
-import { sleep } from '../../../../tests/utils'
+import { sleep } from './utils'
 
 function getMockStorage(limitSize?: number) {
   const dataSet = new Map<string, string>()

packages/query-sync-storage-persister/src/__tests__/utils.ts

@@ -0,0 +1,5 @@
+export function sleep(timeout: number): Promise<void> {
+  return new Promise((resolve, _reject) => {
+    setTimeout(resolve, timeout)
+  })
+}

packages/query-sync-storage-persister/tsconfig.json

@@ -7,7 +7,6 @@
     "tsBuildInfoFile": "./build/.tsbuildinfo"
   },
   "include": ["src"],
-  "exclude": ["src/__tests__"],
   "references": [
     { "path": "../react-query-persist-client" }
   ]

packages/react-query-devtools/tsconfig.json

@@ -7,7 +7,6 @@
     "tsBuildInfoFile": "./build/.tsbuildinfo"
   },
   "include": ["src"],
-  "exclude": ["src/__tests__"],
   "references": [
     { "path": "../query-core" },
     { "path": "../react-query-persist-client" }

packages/react-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx

@@ -8,12 +8,7 @@ import {
   useQueries,
   DefinedUseQueryResult,
 } from '@tanstack/react-query'
-import {
-  createQueryClient,
-  mockLogger,
-  queryKey,
-  sleep,
-} from '../../../../tests/utils'
+import { createQueryClient, mockLogger, queryKey, sleep } from './utils'
 import { PersistedClient, Persister, persistQueryClientSave } from '../persist'
 import { PersistQueryClientProvider } from '../PersistQueryClientProvider'
 

packages/react-query-persist-client/src/__tests__/persist.test.tsx

@@ -1,4 +1,4 @@
-import { createQueryClient, sleep } from '../../../../tests/utils'
+import { createQueryClient, sleep } from './utils'
 import {
   PersistedClient,
   Persister,

packages/react-query-persist-client/src/__tests__/utils.ts

@@ -0,0 +1,34 @@
+import { act } from '@testing-library/react'
+
+import { QueryClient, QueryClientConfig } from '@tanstack/query-core'
+
+export function createQueryClient(config?: QueryClientConfig): QueryClient {
+  jest.spyOn(console, 'error').mockImplementation(() => undefined)
+  return new QueryClient({ logger: mockLogger, ...config })
+}
+
+export const mockLogger = {
+  log: jest.fn(),
+  warn: jest.fn(),
+  error: jest.fn(),
+}
+
+let queryKeyCount = 0
+export function queryKey(): Array<string> {
+  queryKeyCount++
+  return [`query_${queryKeyCount}`]
+}
+
+export function sleep(timeout: number): Promise<void> {
+  return new Promise((resolve, _reject) => {
+    setTimeout(resolve, timeout)
+  })
+}
+
+export function setActTimeout(fn: () => void, ms?: number) {
+  return setTimeout(() => {
+    act(() => {
+      fn()
+    })
+  }, ms)
+}

packages/react-query-persist-client/tsconfig.json

@@ -7,7 +7,6 @@
     "tsBuildInfoFile": "./build/.tsbuildinfo"
   },
   "include": ["src"],
-  "exclude": ["src/__tests__"],
   "references": [
     { "path": "../query-core" },
     { "path": "../react-query" }

packages/react-query/src/__tests__/Hydrate.test.tsx

@@ -10,7 +10,7 @@ import {
   useHydrate,
   Hydrate,
 } from '@tanstack/react-query'
-import { createQueryClient, sleep } from '../../../../tests/utils'
+import { createQueryClient, sleep } from './utils'
 import * as coreModule from '@tanstack/query-core'
 
 describe('React hydration', () => {

packages/react-query/src/__tests__/QueryClientProvider.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { render, waitFor } from '@testing-library/react'
 import { renderToString } from 'react-dom/server'
 
-import { sleep, queryKey, createQueryClient } from '../../../../tests/utils'
+import { sleep, queryKey, createQueryClient } from './utils'
 import {
   QueryClient,
   QueryClientProvider,

packages/react-query/src/__tests__/QueryResetErrorBoundary.test.tsx

@@ -1,10 +1,9 @@
-import { waitFor, fireEvent } from '@testing-library/react'
+import { fireEvent, waitFor } from '@testing-library/react'
 import { ErrorBoundary } from 'react-error-boundary'
 import * as React from 'react'
 
-import { sleep, queryKey, createQueryClient } from '../../../../tests/utils'
-import { renderWithClient } from './utils'
-import { useQuery, QueryCache, QueryErrorResetBoundary } from '..'
+import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
+import { QueryCache, QueryErrorResetBoundary, useQuery } from '..'
 
 // TODO: This should be removed with the types for react-error-boundary get updated.
 declare module 'react-error-boundary' {

packages/react-query/src/__tests__/ssr-hydration.test.tsx

@@ -12,12 +12,7 @@ import {
   dehydrate,
   hydrate,
 } from '..'
-import {
-  createQueryClient,
-  mockLogger,
-  setIsServer,
-  sleep,
-} from '../../../../tests/utils'
+import { createQueryClient, mockLogger, setIsServer, sleep } from './utils'
 
 const isReact18 = () => (process.env.REACTJS_VERSION || '18') === '18'
 

packages/react-query/src/__tests__/ssr.test.tsx

@@ -6,7 +6,7 @@ import * as React from 'react'
 // @ts-ignore
 import { renderToString } from 'react-dom/server'
 
-import { sleep, queryKey, createQueryClient } from '../../../../tests/utils'
+import { sleep, queryKey, createQueryClient } from './utils'
 import { useQuery, QueryClientProvider, QueryCache, useInfiniteQuery } from '..'
 
 describe('Server Side Rendering', () => {

packages/react-query/src/__tests__/suspense.test.tsx

@@ -1,17 +1,16 @@
-import { waitFor, fireEvent } from '@testing-library/react'
+import { fireEvent, waitFor } from '@testing-library/react'
 import { ErrorBoundary } from 'react-error-boundary'
 import * as React from 'react'
 
-import { sleep, queryKey, createQueryClient } from '../../../../tests/utils'
-import { renderWithClient } from './utils'
+import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
 import {
-  useQuery,
   QueryCache,
   QueryErrorResetBoundary,
+  useInfiniteQuery,
+  UseInfiniteQueryResult,
+  useQuery,
   useQueryErrorResetBoundary,
   UseQueryResult,
-  UseInfiniteQueryResult,
-  useInfiniteQuery,
 } from '..'
 
 describe("useQuery's in Suspense mode", () => {

packages/react-query/src/__tests__/useInfiniteQuery.test.tsx

@@ -1,20 +1,20 @@
-import { waitFor, fireEvent } from '@testing-library/react'
+import { fireEvent, waitFor } from '@testing-library/react'
 import * as React from 'react'
 
 import {
+  Blink,
+  createQueryClient,
   queryKey,
-  sleep,
+  renderWithClient,
   setActTimeout,
-  createQueryClient,
-} from '../../../../tests/utils'
-
-import { renderWithClient, Blink } from './utils'
+  sleep,
+} from './utils'
 import {
-  useInfiniteQuery,
-  UseInfiniteQueryResult,
+  InfiniteData,
   QueryCache,
   QueryFunctionContext,
-  InfiniteData,
+  useInfiniteQuery,
+  UseInfiniteQueryResult,
 } from '..'
 
 interface Result {