test: prevent queries from interfering with each other (TanStack#821)

Author: boschni

src/core/tests/queryCache.test.tsx

@@ -1,12 +1,11 @@
-import { setConsole, queryCache, queryCaches } from '../'
+import { setConsole, queryCache } from '../'
 import { deepEqual, shallowEqual } from '../utils'
+import { queryKey } from '../../react/tests/utils'
 
 describe('core/utils', () => {
-  afterEach(() => {
-    queryCaches.forEach(cache => cache.clear({ notify: false }))
-  })
-
   it('setConsole should override Console object', async () => {
+    const key = queryKey()
+
     const mockConsole = {
       error: jest.fn(),
       log: jest.fn(),
@@ -16,7 +15,7 @@ describe('core/utils', () => {
     setConsole(mockConsole)
 
     await queryCache.prefetchQuery(
-      'key',
+      key,
       async () => {
         throw new Error('Test')
       },

src/core/tests/utils.test.tsx

@@ -6,19 +6,16 @@ import {
   queryCache,
   useQuery,
   useQueryCache,
-  queryCaches,
 } from '../index'
-import { sleep } from './utils'
+import { sleep, queryKey } from './utils'
 import { QueryCache } from '../../core/queryCache'
 
 describe('ReactQueryCacheProvider', () => {
-  afterEach(() => {
-    queryCaches.forEach(cache => cache.clear({ notify: false }))
-  })
-
   test('when not used, falls back to global cache', async () => {
+    const key = queryKey()
+
     function Page() {
-      const { data } = useQuery('test', async () => {
+      const { data } = useQuery(key, async () => {
         await sleep(10)
         return 'test'
       })
@@ -34,14 +31,16 @@ describe('ReactQueryCacheProvider', () => {
 
     await waitFor(() => rendered.getByText('test'))
 
-    expect(queryCache.getQuery('test')).toBeDefined()
+    expect(queryCache.getQuery(key)).toBeDefined()
   })
 
   test('sets a specific cache for all queries to use', async () => {
+    const key = queryKey()
+
     const cache = makeQueryCache()
 
     function Page() {
-      const { data } = useQuery('test', async () => {
+      const { data } = useQuery(key, async () => {
         await sleep(10)
         return 'test'
       })
@@ -61,14 +60,15 @@ describe('ReactQueryCacheProvider', () => {
 
     await waitFor(() => rendered.getByText('test'))
 
-    expect(queryCache.getQuery('test')).not.toBeDefined()
-    expect(cache.getQuery('test')).toBeDefined()
-    cache.clear({ notify: false })
+    expect(queryCache.getQuery(key)).not.toBeDefined()
+    expect(cache.getQuery(key)).toBeDefined()
   })
 
   test('implicitly creates a new cache for all queries to use', async () => {
+    const key = queryKey()
+
     function Page() {
-      const { data } = useQuery('test', async () => {
+      const { data } = useQuery(key, async () => {
         await sleep(10)
         return 'test'
       })
@@ -88,15 +88,18 @@ describe('ReactQueryCacheProvider', () => {
 
     await waitFor(() => rendered.getByText('test'))
 
-    expect(queryCache.getQuery('test')).not.toBeDefined()
+    expect(queryCache.getQuery(key)).not.toBeDefined()
   })
 
   test('allows multiple caches to be partitioned', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+
     const cache1 = makeQueryCache()
     const cache2 = makeQueryCache()
 
     function Page1() {
-      const { data } = useQuery('test1', async () => {
+      const { data } = useQuery(key1, async () => {
         await sleep(10)
         return 'test1'
       })
@@ -108,7 +111,7 @@ describe('ReactQueryCacheProvider', () => {
       )
     }
     function Page2() {
-      const { data } = useQuery('test2', async () => {
+      const { data } = useQuery(key2, async () => {
         await sleep(10)
         return 'test2'
       })
@@ -134,16 +137,18 @@ describe('ReactQueryCacheProvider', () => {
     await waitFor(() => rendered.getByText('test1'))
     await waitFor(() => rendered.getByText('test2'))
 
-    expect(cache1.getQuery('test1')).toBeDefined()
-    expect(cache1.getQuery('test2')).not.toBeDefined()
-    expect(cache2.getQuery('test1')).not.toBeDefined()
-    expect(cache2.getQuery('test2')).toBeDefined()
+    expect(cache1.getQuery(key1)).toBeDefined()
+    expect(cache1.getQuery(key2)).not.toBeDefined()
+    expect(cache2.getQuery(key1)).not.toBeDefined()
+    expect(cache2.getQuery(key2)).toBeDefined()
 
     cache1.clear({ notify: false })
     cache2.clear({ notify: false })
   })
 
   test('when cache changes, previous cache is cleaned', () => {
+    const key = queryKey()
+
     const caches: QueryCache[] = []
     const customCache = makeQueryCache()
 
@@ -153,7 +158,7 @@ describe('ReactQueryCacheProvider', () => {
         caches.push(queryCache)
       }, [queryCache])
 
-      const { data } = useQuery('test', async () => {
+      const { data } = useQuery(key, async () => {
         await sleep(10)
         return 'test'
       })
@@ -185,7 +190,9 @@ describe('ReactQueryCacheProvider', () => {
     customCache.clear({ notify: false })
   })
 
-  test('uses defaultConfig for queries when they don\'t provide their own config', async () => {
+  test("uses defaultConfig for queries when they don't provide their own config", async () => {
+    const key = queryKey()
+
     const cache = makeQueryCache({
       defaultConfig: {
         queries: {
@@ -195,7 +202,7 @@ describe('ReactQueryCacheProvider', () => {
     })
 
     function Page() {
-      const { data } = useQuery('test', async () => {
+      const { data } = useQuery(key, async () => {
         await sleep(10)
         return 'test'
       })
@@ -215,8 +222,8 @@ describe('ReactQueryCacheProvider', () => {
 
     await waitFor(() => rendered.getByText('test'))
 
-    expect(cache.getQuery('test')).toBeDefined()
-    expect(cache.getQuery('test')?.config.staleTime).toBe(Infinity)
+    expect(cache.getQuery(key)).toBeDefined()
+    expect(cache.getQuery(key)?.config.staleTime).toBe(Infinity)
     cache.clear({ notify: false })
   })
 })

src/core/tests/utils.tsx

@@ -1,21 +1,14 @@
 import React, { useState } from 'react'
 import { act, fireEvent, render, waitFor } from '@testing-library/react'
-import {
-  ReactQueryConfigProvider,
-  useQuery,
-  queryCache,
-  queryCaches,
-} from '../index'
+import { ReactQueryConfigProvider, useQuery, queryCache } from '../index'
 
-import { sleep } from './utils'
+import { sleep, queryKey } from './utils'
 
 describe('ReactQueryConfigProvider', () => {
-  afterEach(() => {
-    queryCaches.forEach(cache => cache.clear({ notify: false }))
-  })
-
   // // See https://github.com/tannerlinsley/react-query/issues/105
   it('should allow overriding the config', async () => {
+    const key = queryKey()
+
     const onSuccess = jest.fn()
 
     const config = {
@@ -25,7 +18,7 @@ describe('ReactQueryConfigProvider', () => {
     }
 
     function Page() {
-      const { status } = useQuery('test', async () => {
+      const { status } = useQuery(key, async () => {
         await sleep(10)
         return 'data'
       })
@@ -49,6 +42,8 @@ describe('ReactQueryConfigProvider', () => {
   })
 
   it('should allow overriding the default config from the outermost provider', async () => {
+    const key = queryKey()
+
     const outerConfig = {
       queries: {
         queryFn: jest.fn(async () => {
@@ -81,17 +76,19 @@ describe('ReactQueryConfigProvider', () => {
 
     await waitFor(() => rendered.getByText('Placeholder'))
 
-    await queryCache.prefetchQuery('test')
+    await queryCache.prefetchQuery(key)
 
-    expect(outerConfig.queries.queryFn).toHaveBeenCalledWith('test')
+    expect(outerConfig.queries.queryFn).toHaveBeenCalledWith(key)
     expect(innerConfig.queries.queryFn).not.toHaveBeenCalled()
 
-    const data = queryCache.getQueryData('test')
+    const data = queryCache.getQueryData(key)
 
     expect(data).toEqual('outer')
   })
 
   it('should reset to defaults when unmounted', async () => {
+    const key = queryKey()
+
     const onSuccess = jest.fn()
 
     const config = {
@@ -125,7 +122,7 @@ describe('ReactQueryConfigProvider', () => {
     }
 
     function Page() {
-      const { data } = useQuery('test', queryFn)
+      const { data } = useQuery(key, queryFn)
 
       return (
         <div>
@@ -139,7 +136,7 @@ describe('ReactQueryConfigProvider', () => {
     await waitFor(() => rendered.getByText('Data: none'))
 
     act(() => {
-      queryCache.prefetchQuery('test', queryFn)
+      queryCache.prefetchQuery(key, queryFn)
     })
 
     await waitFor(() => rendered.getByText('Data: data'))
@@ -149,15 +146,15 @@ describe('ReactQueryConfigProvider', () => {
     fireEvent.click(rendered.getByText('unmount'))
 
     act(() => {
-      // wipe query cache/stored config
-      queryCache.clear({ notify: false })
       onSuccess.mockClear()
     })
 
     await waitFor(() => rendered.getByText('Data: data'))
   })
 
   it('should reset to previous config when nested provider is unmounted', async () => {
+    const key = queryKey()
+
     let counterRef = 0
     const parentOnSuccess = jest.fn()
 
@@ -184,7 +181,7 @@ describe('ReactQueryConfigProvider', () => {
     }
 
     function Component() {
-      const { data, refetch } = useQuery('test', queryFn)
+      const { data, refetch } = useQuery(key, queryFn)
 
       return (
         <div>