@tanstack/solid-query 5.14.7 → 5.15.0

package/src/__tests__/suspense.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
+import { fireEvent, render, waitFor } from '@solidjs/testing-library'
 
 import {
   ErrorBoundary,
@@ -63,7 +63,7 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <Suspense fallback="loading">
           <Page />
@@ -71,10 +71,10 @@ describe("useQuery's in Suspense mode", () => {
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('data: 1'))
-    fireEvent.click(screen.getByLabelText('toggle'))
+    await waitFor(() => rendered.getByText('data: 1'))
+    fireEvent.click(rendered.getByLabelText('toggle'))
 
-    await waitFor(() => screen.getByText('data: 2'))
+    await waitFor(() => rendered.getByText('data: 2'))
 
     expect(renders).toBe(4)
     expect(states.length).toBe(4)
@@ -111,7 +111,7 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <Suspense fallback="loading">
           <Page />
@@ -119,7 +119,7 @@ describe("useQuery's in Suspense mode", () => {
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('data: 1'))
+    await waitFor(() => rendered.getByText('data: 1'))
 
     // TODO(lukemurray): in react this is 1 in solid this is 2 because suspense
     // occurs on read.
@@ -129,8 +129,8 @@ describe("useQuery's in Suspense mode", () => {
       status: 'success',
     })
 
-    fireEvent.click(screen.getByText('next'))
-    await waitFor(() => screen.getByText('data: 2'))
+    fireEvent.click(rendered.getByText('next'))
+    await waitFor(() => rendered.getByText('data: 2'))
 
     // TODO(lukemurray): in react this is 2 and in solid it is 4
     expect(states.length).toBe(4)
@@ -155,7 +155,7 @@ describe("useQuery's in Suspense mode", () => {
       return <>rendered</>
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <Suspense fallback="loading">
           <Page />
@@ -163,7 +163,7 @@ describe("useQuery's in Suspense mode", () => {
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('rendered'))
+    await waitFor(() => rendered.getByText('rendered'))
 
     expect(queryFn).toHaveBeenCalledTimes(1)
   })
@@ -197,23 +197,23 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <App />
       </QueryClientProvider>
     ))
 
-    expect(screen.queryByText('rendered')).toBeNull()
+    expect(rendered.queryByText('rendered')).toBeNull()
     expect(queryCache.find({ queryKey: key })).toBeFalsy()
 
-    fireEvent.click(screen.getByLabelText('toggle'))
-    await waitFor(() => screen.getByText('rendered'))
+    fireEvent.click(rendered.getByLabelText('toggle'))
+    await waitFor(() => rendered.getByText('rendered'))
 
     expect(queryCache.find({ queryKey: key })?.getObserversCount()).toBe(1)
 
-    fireEvent.click(screen.getByLabelText('toggle'))
+    fireEvent.click(rendered.getByLabelText('toggle'))
 
-    expect(screen.queryByText('rendered')).toBeNull()
+    expect(rendered.queryByText('rendered')).toBeNull()
     expect(queryCache.find({ queryKey: key })?.getObserversCount()).toBe(0)
   })
 
@@ -246,7 +246,7 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <ErrorBoundary
           fallback={(_err, resetSolid) => (
@@ -270,15 +270,15 @@ describe("useQuery's in Suspense mode", () => {
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('Loading...'))
+    await waitFor(() => rendered.getByText('Loading...'))
 
-    await waitFor(() => screen.getByText('error boundary'))
+    await waitFor(() => rendered.getByText('error boundary'))
 
-    await waitFor(() => screen.getByText('retry'))
+    await waitFor(() => rendered.getByText('retry'))
 
-    fireEvent.click(screen.getByText('retry'))
+    fireEvent.click(rendered.getByText('retry'))
 
-    await waitFor(() => screen.getByText('rendered'))
+    await waitFor(() => rendered.getByText('rendered'))
   })
 
   it('should retry fetch if the reset error boundary has been reset', async () => {
@@ -309,7 +309,7 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <ErrorBoundary
           fallback={(_err, resetSolid) => (
@@ -332,15 +332,15 @@ describe("useQuery's in Suspense mode", () => {
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('Loading...'))
-    await waitFor(() => screen.getByText('error boundary'))
-    await waitFor(() => screen.getByText('retry'))
-    fireEvent.click(screen.getByText('retry'))
-    await waitFor(() => screen.getByText('error boundary'))
-    await waitFor(() => screen.getByText('retry'))
+    await waitFor(() => rendered.getByText('Loading...'))
+    await waitFor(() => rendered.getByText('error boundary'))
+    await waitFor(() => rendered.getByText('retry'))
+    fireEvent.click(rendered.getByText('retry'))
+    await waitFor(() => rendered.getByText('error boundary'))
+    await waitFor(() => rendered.getByText('retry'))
     succeed = true
-    fireEvent.click(screen.getByText('retry'))
-    await waitFor(() => screen.getByText('rendered'))
+    fireEvent.click(rendered.getByText('retry'))
+    await waitFor(() => rendered.getByText('rendered'))
   })
 
   it('should refetch when re-mounting', async () => {
@@ -384,22 +384,22 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('Loading...'))
-    await waitFor(() => screen.getByText('data: 1'))
-    await waitFor(() => screen.getByText('fetching: false'))
-    await waitFor(() => screen.getByText('hide'))
-    fireEvent.click(screen.getByText('hide'))
-    await waitFor(() => screen.getByText('show'))
-    fireEvent.click(screen.getByText('show'))
-    await waitFor(() => screen.getByText('fetching: true'))
-    await waitFor(() => screen.getByText('data: 2'))
-    await waitFor(() => screen.getByText('fetching: false'))
+    await waitFor(() => rendered.getByText('Loading...'))
+    await waitFor(() => rendered.getByText('data: 1'))
+    await waitFor(() => rendered.getByText('fetching: false'))
+    await waitFor(() => rendered.getByText('hide'))
+    fireEvent.click(rendered.getByText('hide'))
+    await waitFor(() => rendered.getByText('show'))
+    fireEvent.click(rendered.getByText('show'))
+    await waitFor(() => rendered.getByText('fetching: true'))
+    await waitFor(() => rendered.getByText('data: 2'))
+    await waitFor(() => rendered.getByText('fetching: false'))
   })
 
   it('should suspend when switching to a new query', async () => {
@@ -437,17 +437,17 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('Loading...'))
-    await waitFor(() => screen.getByText(`data: ${key1}`))
-    fireEvent.click(screen.getByText('switch'))
-    await waitFor(() => screen.getByText('Loading...'))
-    await waitFor(() => screen.getByText(`data: ${key2}`))
+    await waitFor(() => rendered.getByText('Loading...'))
+    await waitFor(() => rendered.getByText(`data: ${key1}`))
+    fireEvent.click(rendered.getByText('switch'))
+    await waitFor(() => rendered.getByText('Loading...'))
+    await waitFor(() => rendered.getByText(`data: ${key2}`))
   })
 
   it('should throw errors to the error boundary by default', async () => {
@@ -493,14 +493,14 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <App />
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('Loading...'))
-    await waitFor(() => screen.getByText('error boundary'))
+    await waitFor(() => rendered.getByText('Loading...'))
+    await waitFor(() => rendered.getByText('error boundary'))
 
     consoleMock.mockRestore()
   })
@@ -544,14 +544,14 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <App />
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('Loading...'))
-    await waitFor(() => screen.getByText('rendered'))
+    await waitFor(() => rendered.getByText('Loading...'))
+    await waitFor(() => rendered.getByText('rendered'))
   })
 
   it('should throw errors to the error boundary when a throwOnError function returns true', async () => {
@@ -597,14 +597,14 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <App />
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('Loading...'))
-    await waitFor(() => screen.getByText('error boundary'))
+    await waitFor(() => rendered.getByText('Loading...'))
+    await waitFor(() => rendered.getByText('error boundary'))
 
     consoleMock.mockRestore()
   })
@@ -650,14 +650,14 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <App />
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('Loading...'))
-    await waitFor(() => screen.getByText('rendered'))
+    await waitFor(() => rendered.getByText('Loading...'))
+    await waitFor(() => rendered.getByText('rendered'))
   })
 
   it('should not call the queryFn when not enabled', async () => {
@@ -686,7 +686,7 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <Suspense fallback="loading">
           <Page />
@@ -696,10 +696,10 @@ describe("useQuery's in Suspense mode", () => {
 
     expect(queryFn).toHaveBeenCalledTimes(0)
     await sleep(5)
-    fireEvent.click(screen.getByRole('button', { name: /fire/i }))
+    fireEvent.click(rendered.getByRole('button', { name: /fire/i }))
 
     await waitFor(() => {
-      expect(screen.getByRole('heading').textContent).toBe('23')
+      expect(rendered.getByRole('heading').textContent).toBe('23')
     })
 
     expect(queryFn).toHaveBeenCalledTimes(1)
@@ -755,23 +755,23 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <App />
       </QueryClientProvider>
     ))
 
     // render suspense fallback (Loading...)
-    await waitFor(() => screen.getByText('Loading...'))
+    await waitFor(() => rendered.getByText('Loading...'))
     // resolve promise -> render Page (rendered)
-    await waitFor(() => screen.getByText('rendered'))
+    await waitFor(() => rendered.getByText('rendered'))
 
     // change query key
     succeed = false
     // reset query -> and throw error
-    fireEvent.click(screen.getByLabelText('fail'))
+    fireEvent.click(rendered.getByLabelText('fail'))
     // render error boundary fallback (error boundary)
-    await waitFor(() => screen.getByText('error boundary'))
+    await waitFor(() => rendered.getByText('error boundary'))
 
     consoleMock.mockRestore()
   })
@@ -819,23 +819,23 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <App />
       </QueryClientProvider>
     ))
 
     // render suspense fallback (Loading...)
-    await waitFor(() => screen.getByText('Loading...'))
+    await waitFor(() => rendered.getByText('Loading...'))
     // resolve promise -> render Page (rendered)
-    await waitFor(() => screen.getByText('rendered'))
+    await waitFor(() => rendered.getByText('rendered'))
 
     // change promise result to error
     succeed = false
     // change query key
-    fireEvent.click(screen.getByLabelText('fail'))
+    fireEvent.click(rendered.getByLabelText('fail'))
     // render error boundary fallback (error boundary)
-    await waitFor(() => screen.getByText('error boundary'))
+    await waitFor(() => rendered.getByText('error boundary'))
 
     consoleMock.mockRestore()
   })
@@ -885,23 +885,23 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <App />
       </QueryClientProvider>
     ))
 
     // render empty data with 'rendered' when enabled is false
-    await waitFor(() => screen.getByText('rendered'))
+    await waitFor(() => rendered.getByText('rendered'))
 
     // change enabled to true
-    fireEvent.click(screen.getByLabelText('fail'))
+    fireEvent.click(rendered.getByLabelText('fail'))
 
     // render pending fallback
-    await waitFor(() => screen.getByText('Loading...'))
+    await waitFor(() => rendered.getByText('Loading...'))
 
     // render error boundary fallback (error boundary)
-    await waitFor(() => screen.getByText('error boundary'))
+    await waitFor(() => rendered.getByText('error boundary'))
 
     consoleMock.mockRestore()
   })
@@ -937,7 +937,7 @@ describe("useQuery's in Suspense mode", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <Suspense fallback="loading">
           <Page />
@@ -953,6 +953,6 @@ describe("useQuery's in Suspense mode", () => {
     )
 
     expect(renders).toBe(2)
-    expect(screen.queryByText('rendered')).not.toBeNull()
+    expect(rendered.queryByText('rendered')).not.toBeNull()
   })
 })

package/src/__tests__/transition.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it } from 'vitest'
-import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
+import { fireEvent, render, waitFor } from '@solidjs/testing-library'
 import { Show, Suspense, createSignal, startTransition } from 'solid-js'
 import { QueryCache, QueryClientProvider, createQuery } from '..'
 import { createQueryClient, queryKey, sleep } from './utils'
@@ -44,17 +44,17 @@ describe("createQuery's in Suspense mode with transitions", () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('Show'))
-    fireEvent.click(screen.getByLabelText('toggle'))
+    await waitFor(() => rendered.getByText('Show'))
+    fireEvent.click(rendered.getByLabelText('toggle'))
 
-    await waitFor(() => screen.getByText('Message'))
+    await waitFor(() => rendered.getByText('Message'))
     // verify that the button also updated. See https://github.com/solidjs/solid/issues/1249
-    await waitFor(() => screen.getByText('Hide'))
+    await waitFor(() => rendered.getByText('Hide'))
   })
 })

package/src/__tests__/useIsFetching.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
+import { fireEvent, render, waitFor } from '@solidjs/testing-library'
 import { Show, createEffect, createRenderEffect, createSignal } from 'solid-js'
 import { QueryCache, QueryClientProvider, createQuery, useIsFetching } from '..'
 import { createQueryClient, queryKey, setActTimeout, sleep } from './utils'
@@ -40,16 +40,16 @@ describe('useIsFetching', () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>
     ))
 
-    await screen.findByText('isFetching: 0')
-    fireEvent.click(screen.getByRole('button', { name: /setReady/i }))
-    await screen.findByText('isFetching: 1')
-    await screen.findByText('isFetching: 0')
+    await rendered.findByText('isFetching: 0')
+    fireEvent.click(rendered.getByRole('button', { name: /setReady/i }))
+    await rendered.findByText('isFetching: 1')
+    await rendered.findByText('isFetching: 0')
   })
 
   it('should not update state while rendering', async () => {
@@ -173,16 +173,16 @@ describe('useIsFetching', () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>
     ))
 
-    await screen.findByText('isFetching: 0')
-    fireEvent.click(screen.getByRole('button', { name: /setStarted/i }))
-    await screen.findByText('isFetching: 1')
-    await screen.findByText('isFetching: 0')
+    await rendered.findByText('isFetching: 0')
+    fireEvent.click(rendered.getByRole('button', { name: /setStarted/i }))
+    await rendered.findByText('isFetching: 1')
+    await rendered.findByText('isFetching: 0')
     // at no point should we have isFetching: 2
     expect(isFetchings).toEqual(expect.not.arrayContaining([2]))
   })
@@ -209,14 +209,14 @@ describe('useIsFetching', () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>
     ))
 
-    await screen.findByText('isFetching: 1')
-    await screen.findByText('isFetching: 0')
+    await rendered.findByText('isFetching: 1')
+    await rendered.findByText('isFetching: 0')
   })
 
   it('should use provided custom queryClient', async () => {
@@ -244,8 +244,8 @@ describe('useIsFetching', () => {
       )
     }
 
-    render(() => <Page></Page>)
+    const rendered = render(() => <Page></Page>)
 
-    await screen.findByText('isFetching: 1')
+    await rendered.findByText('isFetching: 1')
   })
 })

package/src/__tests__/useIsMutating.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { fireEvent, render, screen, waitFor } from '@solidjs/testing-library'
+import { fireEvent, render, waitFor } from '@solidjs/testing-library'
 import { Show, createEffect, createRenderEffect, createSignal } from 'solid-js'
 import * as QueryCore from '@tanstack/query-core'
 import { QueryClientProvider, createMutation, useIsMutating } from '..'
@@ -157,6 +157,7 @@ describe('useIsMutating', () => {
 
   it('should use provided custom queryClient', async () => {
     const queryClient = createQueryClient()
+
     function Page() {
       const isMutating = useIsMutating(undefined, () => queryClient)
       const { mutate } = createMutation(
@@ -178,8 +179,10 @@ describe('useIsMutating', () => {
         </div>
       )
     }
-    render(() => <Page></Page>)
-    await waitFor(() => screen.findByText('mutating: 1'))
+
+    const rendered = render(() => <Page></Page>)
+
+    await waitFor(() => rendered.findByText('mutating: 1'))
   })
 
   it('should not change state if unmounted', async () => {
@@ -229,12 +232,12 @@ describe('useIsMutating', () => {
       )
     }
 
-    render(() => (
+    const rendered = render(() => (
       <QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>
     ))
-    fireEvent.click(screen.getByText('unmount'))
+    fireEvent.click(rendered.getByText('unmount'))
 
     // Should not display the console error
     // "Warning: Can't perform a React state update on an unmounted component"