add tests in src/react/tests/QueryClientProvider.test.tsx

TanStack · Oct 19, 2021 · a8e2b0a · a8e2b0a
1 parent 2d58d3c
commit a8e2b0a
Showing 1 changed file with 59 additions and 0 deletions.
diff --git a/src/react/tests/QueryClientProvider.test.tsx b/src/react/tests/QueryClientProvider.test.tsx
@@ -127,4 +127,63 @@ describe('QueryClientProvider', () => {
     expect(queryCache.find(key)).toBeDefined()
     expect(queryCache.find(key)?.options.cacheTime).toBe(Infinity)
   })
+
+  describe('with custom context', () => {
+    it('uses the correct context', async () => {
+      const key = queryKey()
+
+      const contextOuter = React.createContext<QueryClient | undefined>(
+        undefined
+      )
+      const contextInner = React.createContext<QueryClient | undefined>(
+        undefined
+      )
+
+      const queryCacheOuter = new QueryCache()
+      const queryClientOuter = new QueryClient({ queryCache: queryCacheOuter })
+
+      const queryCacheInner = new QueryCache()
+      const queryClientInner = new QueryClient({ queryCache: queryCacheInner })
+
+      const queryCacheInnerInner = new QueryCache()
+      const queryClientInnerInner = new QueryClient({
+        queryCache: queryCacheInnerInner,
+      })
+
+      function Page() {
+        const { data: testOuter } = useQuery(key, async () => 'testOuter', {
+          context: contextOuter,
+        })
+        const { data: testInner } = useQuery(key, async () => 'testInner', {
+          context: contextInner,
+        })
+        const { data: testInnerInner } = useQuery(
+          key,
+          async () => 'testInnerInner'
+        )
+
+        return (
+          <div>
+            <h1>
+              {testOuter} {testInner} {testInnerInner}
+            </h1>
+          </div>
+        )
+      }
+
+      const rendered = render(
+        <QueryClientProvider client={queryClientOuter} context={contextOuter}>
+          <QueryClientProvider client={queryClientInner} context={contextInner}>
+            <QueryClientProvider client={queryClientInnerInner}>
+              <Page />
+            </QueryClientProvider>
+          </QueryClientProvider>
+        </QueryClientProvider>
+      )
+
+      await waitFor(() =>
+        rendered.getByText('testOuter testInner testInnerInner')
+      )
+    })
+  })
 })