fix: move usage of React Context out of core package (#3578)

TkDodo · web-flow · commit 6379654910ef · 2022-05-07T19:26:45.000+02:00
* refactor: move test utils out of reactjs

so that we can import them in core

* refactor: move react specific utils back to reactjs

* refactor: adapt test imports

* refactor: move two tests to the reactjs package

because they render a component

* chore: setup eslint import zones

so that we can't import anything into `core` that lives in other packages, like reactjs

* fix: move usage of React Context out of core package

by keeping HydrateOptions separate from React, and only add ContextOptions where necessary
diff --git a/.eslintrc b/.eslintrc
@@ -34,6 +34,19 @@
     "import/no-cycle": "error",
     "import/no-unresolved": ["error", { "ignore": ["react-query"] }],
     "import/no-unused-modules": ["off", { "unusedExports": true }],
+    "import/no-restricted-paths": [
+      "error",
+      {
+        "zones": [
+          { "target": "src/core", "from": "src/broadcastQueryClient-experimental" },
+          { "target": "src/core", "from": "src/createAsyncStoragePersister" },
+          { "target": "src/core", "from": "src/createWebStoragePersister" },
+          { "target": "src/core", "from": "src/devtools" },
+          { "target": "src/core", "from": "src/persistQueryClient" },
+          { "target": "src/core", "from": "src/reactjs" }
+        ]
+      }
+    ],
     "no-redeclare": "off"
   }
 }
diff --git a/src/core/hydration.ts b/src/core/hydration.ts
@@ -1,4 +1,3 @@
-import type { ContextOptions } from '../reactjs/types'
 import type { QueryClient } from './queryClient'
 import type { Query, QueryState } from './query'
 import type {
@@ -18,7 +17,7 @@ export interface DehydrateOptions {
   shouldDehydrateQuery?: ShouldDehydrateQueryFunction
 }
 
-export interface HydrateOptions extends ContextOptions {
+export interface HydrateOptions {
   defaultOptions?: {
     queries?: QueryOptions
     mutations?: MutationOptions
diff --git a/src/core/tests/focusManager.test.tsx b/src/core/tests/focusManager.test.tsx
@@ -1,6 +1,6 @@
 import { sleep } from '../utils'
 import { FocusManager } from '../focusManager'
-import { setIsServer } from '../../reactjs/tests/utils'
+import { setIsServer } from '../../tests/utils'
 
 describe('focusManager', () => {
   let focusManager: FocusManager
diff --git a/src/core/tests/hydration.test.tsx b/src/core/tests/hydration.test.tsx
@@ -3,7 +3,7 @@ import {
   executeMutation,
   mockNavigatorOnLine,
   sleep,
-} from '../../reactjs/tests/utils'
+} from '../../tests/utils'
 import { QueryCache } from '../queryCache'
 import { dehydrate, hydrate } from '../hydration'
 
diff --git a/src/core/tests/infiniteQueryBehavior.test.tsx b/src/core/tests/infiniteQueryBehavior.test.tsx
@@ -1,10 +1,10 @@
 import { waitFor } from '@testing-library/react'
-import { createQueryClient, queryKey } from '../../reactjs/tests/utils'
 import {
   QueryClient,
   InfiniteQueryObserver,
   InfiniteQueryObserverResult,
 } from '../..'
+import { createQueryClient, queryKey } from '../../tests/utils'
 
 describe('InfiniteQueryBehavior', () => {
   let queryClient: QueryClient
diff --git a/src/core/tests/infiniteQueryObserver.test.tsx b/src/core/tests/infiniteQueryObserver.test.tsx
@@ -1,4 +1,4 @@
-import { sleep, queryKey, createQueryClient } from '../../reactjs/tests/utils'
+import { createQueryClient, queryKey, sleep } from '../../tests/utils'
 import { QueryClient, InfiniteQueryObserver } from '../..'
 
 describe('InfiniteQueryObserver', () => {
diff --git a/src/core/tests/mutationCache.test.tsx b/src/core/tests/mutationCache.test.tsx
@@ -4,7 +4,7 @@ import {
   sleep,
   executeMutation,
   createQueryClient,
-} from '../../reactjs/tests/utils'
+} from '../../tests/utils'
 import { MutationCache, MutationObserver } from '../..'
 
 describe('mutationCache', () => {
diff --git a/src/core/tests/mutationObserver.test.tsx b/src/core/tests/mutationObserver.test.tsx
@@ -1,5 +1,5 @@
 import { waitFor } from '@testing-library/react'
-import { createQueryClient, sleep } from '../../reactjs/tests/utils'
+import { createQueryClient, sleep } from '../../tests/utils'
 import { QueryClient, MutationObserver } from '../..'
 
 describe('mutationObserver', () => {
diff --git a/src/core/tests/mutations.test.tsx b/src/core/tests/mutations.test.tsx
@@ -4,7 +4,7 @@ import {
   executeMutation,
   queryKey,
   sleep,
-} from '../../reactjs/tests/utils'
+} from '../../tests/utils'
 import { MutationState } from '../mutation'
 import { MutationObserver } from '../mutationObserver'
 
diff --git a/src/core/tests/notifyManager.test.tsx b/src/core/tests/notifyManager.test.tsx
@@ -1,5 +1,5 @@
 import { createNotifyManager } from '../notifyManager'
-import { sleep } from '../../devtools/tests/utils'
+import { sleep } from '../../tests/utils'
 
 describe('notifyManager', () => {
   it('should use default notifyFn', async () => {
diff --git a/src/core/tests/onlineManager.test.tsx b/src/core/tests/onlineManager.test.tsx
@@ -1,6 +1,5 @@
 import { OnlineManager } from '../onlineManager'
-import { sleep } from '../utils'
-import { setIsServer } from '../../reactjs/tests/utils'
+import { setIsServer, sleep } from '../../tests/utils'
 
 describe('onlineManager', () => {
   let onlineManager: OnlineManager
diff --git a/src/core/tests/queriesObserver.test.tsx b/src/core/tests/queriesObserver.test.tsx
@@ -4,7 +4,7 @@ import {
   queryKey,
   createQueryClient,
   mockLogger,
-} from '../../reactjs/tests/utils'
+} from '../../tests/utils'
 import {
   QueryClient,
   QueriesObserver,
diff --git a/src/core/tests/query.test.tsx b/src/core/tests/query.test.tsx
@@ -4,7 +4,7 @@ import {
   mockVisibilityState,
   mockLogger,
   createQueryClient,
-} from '../../reactjs/tests/utils'
+} from '../../tests/utils'
 import {
   QueryCache,
   QueryClient,
diff --git a/src/core/tests/queryCache.test.tsx b/src/core/tests/queryCache.test.tsx
@@ -1,4 +1,4 @@
-import { sleep, queryKey, createQueryClient } from '../../reactjs/tests/utils'
+import { sleep, queryKey, createQueryClient } from '../../tests/utils'
 import { QueryCache, QueryClient } from '../..'
 import { Query } from '.././query'
 
diff --git a/src/core/tests/queryClient.test.tsx b/src/core/tests/queryClient.test.tsx
@@ -1,16 +1,13 @@
-import { fireEvent, waitFor } from '@testing-library/react'
+import { waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import React from 'react'
 
 import {
   sleep,
   queryKey,
-  renderWithClient,
   mockLogger,
   createQueryClient,
-} from '../../reactjs/tests/utils'
+} from '../../tests/utils'
 import {
-  useQuery,
   InfiniteQueryObserver,
   QueryCache,
   QueryClient,
@@ -359,62 +356,6 @@ describe('queryClient', () => {
 
       expect(queryCache.find(key)!.state.data).toBe(newData)
     })
-
-    test('should not call onSuccess callback of active observers', async () => {
-      const key = queryKey()
-      const onSuccess = jest.fn()
-
-      function Page() {
-        const state = useQuery(key, () => 'data', { onSuccess })
-        return (
-          <div>
-            <div>data: {state.data}</div>
-            <button onClick={() => queryClient.setQueryData(key, 'newData')}>
-              setQueryData
-            </button>
-          </div>
-        )
-      }
-
-      const rendered = renderWithClient(queryClient, <Page />)
-
-      await waitFor(() => rendered.getByText('data: data'))
-      fireEvent.click(rendered.getByRole('button', { name: /setQueryData/i }))
-      await waitFor(() => rendered.getByText('data: newData'))
-
-      expect(onSuccess).toHaveBeenCalledTimes(1)
-      expect(onSuccess).toHaveBeenCalledWith('data')
-    })
-
-    test('should respect updatedAt', async () => {
-      const key = queryKey()
-
-      function Page() {
-        const state = useQuery(key, () => 'data')
-        return (
-          <div>
-            <div>data: {state.data}</div>
-            <div>dataUpdatedAt: {state.dataUpdatedAt}</div>
-            <button
-              onClick={() =>
-                queryClient.setQueryData(key, 'newData', { updatedAt: 100 })
-              }
-            >
-              setQueryData
-            </button>
-          </div>
-        )
-      }
-
-      const rendered = renderWithClient(queryClient, <Page />)
-
-      await waitFor(() => rendered.getByText('data: data'))
-      fireEvent.click(rendered.getByRole('button', { name: /setQueryData/i }))
-      await waitFor(() => rendered.getByText('data: newData'))
-      await waitFor(() => {
-        expect(rendered.getByText('dataUpdatedAt: 100')).toBeInTheDocument()
-      })
-    })
   })
 
   describe('setQueriesData', () => {
diff --git a/src/core/tests/queryObserver.test.tsx b/src/core/tests/queryObserver.test.tsx
@@ -4,7 +4,7 @@ import {
   expectType,
   mockLogger,
   createQueryClient,
-} from '../../reactjs/tests/utils'
+} from '../../tests/utils'
 import {
   QueryClient,
   QueryObserver,
diff --git a/src/core/tests/utils.test.tsx b/src/core/tests/utils.test.tsx
@@ -8,7 +8,7 @@ import {
   sleep,
 } from '../utils'
 import { Mutation } from '../mutation'
-import { createQueryClient } from '../../reactjs/tests/utils'
+import { createQueryClient } from '../../tests/utils'
 
 describe('core/utils', () => {
   describe('isPlainObject', () => {
diff --git a/src/createAsyncStoragePersister/tests/asyncThrottle.test.ts b/src/createAsyncStoragePersister/tests/asyncThrottle.test.ts
@@ -1,5 +1,5 @@
 import { asyncThrottle } from '../asyncThrottle'
-import { sleep as delay } from '../../reactjs/tests/utils'
+import { sleep as delay } from '../../tests/utils'
 
 describe('asyncThrottle', () => {
   test('basic', async () => {
diff --git a/src/createWebStoragePersister/tests/storageIsFull.test.ts b/src/createWebStoragePersister/tests/storageIsFull.test.ts
@@ -1,6 +1,6 @@
 import { dehydrate, MutationCache, QueryCache, QueryClient } from '../../core'
 import { createWebStoragePersister } from '../index'
-import { sleep } from '../../reactjs/tests/utils'
+import { sleep } from '../../tests/utils'
 
 function getMockStorage(limitSize?: number) {
   const dataSet = new Map<string, string>()
diff --git a/src/persistQueryClient/tests/PersistQueryClientProvider.test.tsx b/src/persistQueryClient/tests/PersistQueryClientProvider.test.tsx
@@ -2,11 +2,7 @@ import React from 'react'
 import { render, waitFor } from '@testing-library/react'
 
 import { QueryClient, useQuery, UseQueryResult, useQueries } from '../..'
-import {
-  createQueryClient,
-  mockLogger,
-  queryKey,
-} from '../../reactjs/tests/utils'
+import { createQueryClient, mockLogger, queryKey } from '../../tests/utils'
 import { sleep } from '../../core/utils'
 import { PersistedClient, Persister, persistQueryClientSave } from '../persist'
 import { PersistQueryClientProvider } from '../PersistQueryClientProvider'
diff --git a/src/persistQueryClient/tests/persist.test.tsx b/src/persistQueryClient/tests/persist.test.tsx
@@ -1,4 +1,4 @@
-import { createQueryClient } from '../../reactjs/tests/utils'
+import { createQueryClient } from '../../tests/utils'
 import { sleep } from '../../core/utils'
 import {
   PersistedClient,
diff --git a/src/reactjs/Hydrate.tsx b/src/reactjs/Hydrate.tsx
@@ -2,8 +2,12 @@ import React from 'react'
 
 import { hydrate, HydrateOptions } from '../core'
 import { useQueryClient } from './QueryClientProvider'
+import { ContextOptions } from './types'
 
-export function useHydrate(state: unknown, options: HydrateOptions = {}) {
+export function useHydrate(
+  state: unknown,
+  options: HydrateOptions & ContextOptions = {}
+) {
   const queryClient = useQueryClient({ context: options.context })
 
   const optionsRef = React.useRef(options)
diff --git a/src/reactjs/tests/Hydrate.test.tsx b/src/reactjs/tests/Hydrate.test.tsx
@@ -10,7 +10,7 @@ import {
   useHydrate,
   Hydrate,
 } from '../..'
-import { createQueryClient, sleep } from './utils'
+import { createQueryClient, sleep } from '../../tests/utils'
 import * as coreModule from '../../core/index'
 
 describe('React hydration', () => {
diff --git a/src/reactjs/tests/QueryClientProvider.test.tsx b/src/reactjs/tests/QueryClientProvider.test.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { render, waitFor } from '@testing-library/react'
 import { renderToString } from 'react-dom/server'
 
-import { sleep, queryKey, createQueryClient } from './utils'
+import { sleep, queryKey, createQueryClient } from '../../tests/utils'
 import {
   QueryClient,
   QueryClientProvider,
diff --git a/src/reactjs/tests/QueryResetErrorBoundary.test.tsx b/src/reactjs/tests/QueryResetErrorBoundary.test.tsx
@@ -2,7 +2,8 @@ import { waitFor, fireEvent } from '@testing-library/react'
 import { ErrorBoundary } from 'react-error-boundary'
 import React from 'react'
 
-import { sleep, queryKey, renderWithClient, createQueryClient } from './utils'
+import { sleep, queryKey, createQueryClient } from '../../tests/utils'
+import { renderWithClient } from './utils'
 import { useQuery, QueryCache, QueryErrorResetBoundary } from '../..'
 
 describe('QueryErrorResetBoundary', () => {
diff --git a/src/reactjs/tests/ssr-hydration.test.tsx b/src/reactjs/tests/ssr-hydration.test.tsx
@@ -12,7 +12,12 @@ import {
   dehydrate,
   hydrate,
 } from '../..'
-import { createQueryClient, mockLogger, setIsServer, sleep } from './utils'
+import {
+  createQueryClient,
+  mockLogger,
+  setIsServer,
+  sleep,
+} from '../../tests/utils'
 
 const isReact18 = () => (process.env.REACTJS_VERSION || '18') === '18'
 
diff --git a/src/reactjs/tests/ssr.test.tsx b/src/reactjs/tests/ssr.test.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 // @ts-ignore
 import { renderToString } from 'react-dom/server'
 
-import { sleep, queryKey, createQueryClient } from './utils'
+import { sleep, queryKey, createQueryClient } from '../../tests/utils'
 import {
   useQuery,
   QueryClientProvider,
diff --git a/src/reactjs/tests/suspense.test.tsx b/src/reactjs/tests/suspense.test.tsx
@@ -2,7 +2,8 @@ import { waitFor, fireEvent } from '@testing-library/react'
 import { ErrorBoundary } from 'react-error-boundary'
 import React from 'react'
 
-import { sleep, queryKey, renderWithClient, createQueryClient } from './utils'
+import { sleep, queryKey, createQueryClient } from '../../tests/utils'
+import { renderWithClient } from './utils'
 import {
   useQuery,
   QueryCache,
diff --git a/src/reactjs/tests/useInfiniteQuery.test.tsx b/src/reactjs/tests/useInfiniteQuery.test.tsx
@@ -4,11 +4,11 @@ import React from 'react'
 import {
   queryKey,
   sleep,
-  renderWithClient,
   setActTimeout,
-  Blink,
   createQueryClient,
-} from './utils'
+} from '../../tests/utils'
+
+import { renderWithClient, Blink } from './utils'
 import {
   useInfiniteQuery,
   UseInfiniteQueryResult,
diff --git a/src/reactjs/tests/useIsFetching.test.tsx b/src/reactjs/tests/useIsFetching.test.tsx
@@ -5,10 +5,10 @@ import { ErrorBoundary } from 'react-error-boundary'
 import {
   createQueryClient,
   queryKey,
-  renderWithClient,
   setActTimeout,
   sleep,
-} from './utils'
+} from '../../tests/utils'
+import { renderWithClient } from './utils'
 import { QueryClient, useQuery, useIsFetching, QueryCache } from '../..'
 
 describe('useIsFetching', () => {
diff --git a/src/reactjs/tests/useIsMutating.test.tsx b/src/reactjs/tests/useIsMutating.test.tsx
@@ -2,12 +2,9 @@ import { waitFor, fireEvent } from '@testing-library/react'
 import React from 'react'
 import { useIsMutating } from '../useIsMutating'
 import { useMutation } from '../useMutation'
-import {
-  createQueryClient,
-  renderWithClient,
-  setActTimeout,
-  sleep,
-} from './utils'
+import { createQueryClient, setActTimeout, sleep } from '../../tests/utils'
+
+import { renderWithClient } from './utils'
 import { ErrorBoundary } from 'react-error-boundary'
 import { QueryClient } from '../../core'
 import * as MutationCacheModule from '../../core/mutationCache'
diff --git a/src/reactjs/tests/useMutation.test.tsx b/src/reactjs/tests/useMutation.test.tsx
@@ -9,10 +9,10 @@ import {
   createQueryClient,
   mockNavigatorOnLine,
   queryKey,
-  renderWithClient,
   setActTimeout,
   sleep,
-} from './utils'
+} from '../../tests/utils'
+import { renderWithClient } from './utils'
 
 describe('useMutation', () => {
   const queryCache = new QueryCache()
diff --git a/src/reactjs/tests/useQueries.test.tsx b/src/reactjs/tests/useQueries.test.tsx
diff --git a/src/reactjs/tests/useQuery.test.tsx b/src/reactjs/tests/useQuery.test.tsx
diff --git a/src/reactjs/tests/utils.tsx b/src/reactjs/tests/utils.tsx
diff --git a/src/tests/utils.ts b/src/tests/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { sleep, queryKey, createQueryClient } from '../../reactjs/tests/utils'`
	`1`	`+import { createQueryClient, queryKey, sleep } from '../../tests/utils'`
`2`	`2`	`import { QueryClient, InfiniteQueryObserver } from '../..'`
`3`	`3`
`4`	`4`	`describe('InfiniteQueryObserver', () => {`