test(svelte-query): extract 'queryClient' creation from Svelte components to test files (#10447)

* test(svelte-query): extract 'queryClient' creation from Svelte components to test files

* ci: apply automated fixes

* test(svelte-query/createMutation): rename 'client1'/'client2' to 'queryClient1'/'queryClient2' for clarity

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: sukvvon

packages/svelte-query/tests/HydrationBoundary/BaseExample.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { QueryClient } from '@tanstack/query-core'
+  import type { QueryClient } from '@tanstack/query-core'
   import {
     HydrationBoundary,
     createQuery,
@@ -8,14 +8,15 @@
   import type { DehydratedState } from '@tanstack/query-core'
 
   let {
+    queryClient,
     dehydratedState,
     queryFn,
   }: {
+    queryClient: QueryClient
     dehydratedState: DehydratedState
     queryFn: () => Promise<string>
   } = $props()
 
-  const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
   const query = createQuery(() => ({

packages/svelte-query/tests/HydrationBoundary/HydrationBoundary.svelte.test.ts

@@ -5,22 +5,25 @@ import { sleep } from '@tanstack/query-test-utils'
 import BaseExample from './BaseExample.svelte'
 
 describe('HydrationBoundary', () => {
+  let queryClient: QueryClient
   let stringifiedState: string
 
   beforeEach(async () => {
     vi.useFakeTimers()
-    const queryClient = new QueryClient()
-    queryClient.prefetchQuery({
+    queryClient = new QueryClient()
+    const dehydrateClient = new QueryClient()
+    dehydrateClient.prefetchQuery({
       queryKey: ['string'],
       queryFn: () => sleep(10).then(() => 'stringCached'),
     })
     await vi.advanceTimersByTimeAsync(10)
-    const dehydrated = dehydrate(queryClient)
+    const dehydrated = dehydrate(dehydrateClient)
     stringifiedState = JSON.stringify(dehydrated)
-    queryClient.clear()
+    dehydrateClient.clear()
   })
 
   afterEach(() => {
+    queryClient.clear()
     vi.useRealTimers()
   })
 
@@ -29,6 +32,7 @@ describe('HydrationBoundary', () => {
 
     const rendered = render(BaseExample, {
       props: {
+        queryClient,
         dehydratedState,
         queryFn: () => sleep(20).then(() => 'string'),
       },

packages/svelte-query/tests/QueryClientProvider/QueryClientProvider.svelte.test.ts

@@ -4,21 +4,24 @@ import { QueryClient } from '@tanstack/query-core'
 import BaseExample from './BaseExample.svelte'
 
 describe('QueryClientProvider', () => {
+  let queryClient: QueryClient
+
   beforeEach(() => {
     vi.useFakeTimers()
+    queryClient = new QueryClient()
   })
 
   afterEach(() => {
+    queryClient.clear()
     vi.useRealTimers()
   })
 
   test('Sets a specific cache for all queries to use', async () => {
-    const queryClient = new QueryClient()
     const queryCache = queryClient.getQueryCache()
 
     const rendered = render(BaseExample, {
       props: {
-        queryClient: queryClient,
+        queryClient,
       },
     })
 

packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
   import { untrack } from 'svelte'
-  import { QueryClient } from '@tanstack/query-core'
   import { queryKey, sleep } from '@tanstack/query-test-utils'
   import { createInfiniteQuery } from '../../src/index.js'
   import { setQueryClientContext } from '../../src/context.js'
-  import type { QueryObserverResult } from '@tanstack/query-core'
+  import type { QueryClient, QueryObserverResult } from '@tanstack/query-core'
 
-  let { states }: { states: { value: Array<QueryObserverResult> } } = $props()
+  let {
+    queryClient,
+    states,
+  }: {
+    queryClient: QueryClient
+    states: { value: Array<QueryObserverResult> }
+  } = $props()
 
-  const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
   const query = createInfiniteQuery(() => ({

packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
   import { untrack } from 'svelte'
-  import { QueryClient } from '@tanstack/query-core'
   import { createInfiniteQuery } from '../../src/index.js'
   import { setQueryClientContext } from '../../src/context.js'
-  import type { QueryObserverResult } from '@tanstack/query-core'
+  import type { QueryClient, QueryObserverResult } from '@tanstack/query-core'
   import { queryKey, sleep } from '@tanstack/query-test-utils'
 
-  let { states }: { states: { value: Array<QueryObserverResult> } } = $props()
+  let {
+    queryClient,
+    states,
+  }: {
+    queryClient: QueryClient
+    states: { value: Array<QueryObserverResult> }
+  } = $props()
 
-  const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
   const query = createInfiniteQuery(() => ({

packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.svelte.test.ts

@@ -8,11 +8,15 @@ import ChangeClientExample from './ChangeClientExample.svelte'
 import type { QueryObserverResult } from '@tanstack/query-core'
 
 describe('createInfiniteQuery', () => {
+  let queryClient: QueryClient
+
   beforeEach(() => {
     vi.useFakeTimers()
+    queryClient = new QueryClient()
   })
 
   afterEach(() => {
+    queryClient.clear()
     vi.useRealTimers()
   })
 
@@ -21,6 +25,7 @@ describe('createInfiniteQuery', () => {
 
     const rendered = render(BaseExample, {
       props: {
+        queryClient,
         states,
       },
     })
@@ -110,6 +115,7 @@ describe('createInfiniteQuery', () => {
 
     const rendered = render(SelectExample, {
       props: {
+        queryClient,
         states,
       },
     })
@@ -131,8 +137,6 @@ describe('createInfiniteQuery', () => {
   })
 
   it('should be able to set new pages with the query client', async () => {
-    const queryClient = new QueryClient()
-
     const rendered = render(ChangeClientExample, {
       props: {
         queryClient,

packages/svelte-query/tests/createMutation/FailureExample.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
-  import { QueryClient } from '@tanstack/query-core'
+  import type { QueryClient } from '@tanstack/query-core'
   import { createMutation, setQueryClientContext } from '../../src/index.js'
 
   let {
+    queryClient,
     mutationFn,
-  }: { mutationFn: (value: { count: number }) => Promise<{ count: number }> } =
-    $props()
+  }: {
+    queryClient: QueryClient
+    mutationFn: (value: { count: number }) => Promise<{ count: number }>
+  } = $props()
 
   let count = $state(0)
 
-  const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
   const mutation = createMutation(() => ({ mutationFn }))

packages/svelte-query/tests/createMutation/OnSuccessExample.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-  import { QueryClient } from '@tanstack/query-core'
+  import type { QueryClient } from '@tanstack/query-core'
   import { createMutation, setQueryClientContext } from '../../src/index.js'
   import { sleep } from '@tanstack/query-test-utils'
 
   type Props = {
+    queryClient: QueryClient
     onSuccessMock: any
     onSettledMock: any
   }
 
-  const { onSettledMock, onSuccessMock }: Props = $props()
+  const { queryClient, onSettledMock, onSuccessMock }: Props = $props()
 
   let count = $state(0)
 
-  const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
   const mutation = createMutation(() => ({

packages/svelte-query/tests/createMutation/ResetExample.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { QueryClient } from '@tanstack/query-core'
+  import type { QueryClient } from '@tanstack/query-core'
   import { createMutation, setQueryClientContext } from '../../src/index.js'
   import { sleep } from '@tanstack/query-test-utils'
 
-  const queryClient = new QueryClient()
+  let { queryClient }: { queryClient: QueryClient } = $props()
+
   setQueryClientContext(queryClient)
 
   const mutation = createMutation(() => ({

packages/svelte-query/tests/createMutation/createMutation.svelte.test.ts

@@ -10,16 +10,22 @@ import OnSuccessExample from './OnSuccessExample.svelte'
 import FailureExample from './FailureExample.svelte'
 
 describe('createMutation', () => {
+  let queryClient: QueryClient
+
   beforeEach(() => {
     vi.useFakeTimers()
+    queryClient = new QueryClient()
   })
 
   afterEach(() => {
+    queryClient.clear()
     vi.useRealTimers()
   })
 
   test('Able to reset `error`', async () => {
-    const rendered = render(ResetExample)
+    const rendered = render(ResetExample, {
+      props: { queryClient },
+    })
 
     expect(rendered.queryByText('Error: undefined')).toBeInTheDocument()
 
@@ -38,6 +44,7 @@ describe('createMutation', () => {
 
     const rendered = render(OnSuccessExample, {
       props: {
+        queryClient,
         onSuccessMock,
         onSettledMock,
       },
@@ -75,6 +82,7 @@ describe('createMutation', () => {
 
     const rendered = render(FailureExample, {
       props: {
+        queryClient,
         mutationFn,
       },
     })
@@ -106,13 +114,13 @@ describe('createMutation', () => {
       const queryClient1 = new QueryClient()
       const queryClient2 = new QueryClient()
 
-      let queryClient = $state(queryClient1)
+      let activeClient = $state(queryClient1)
 
       const mutation = createMutation(
         () => ({
           mutationFn: (params: string) => sleep(10).then(() => params),
         }),
-        () => queryClient,
+        () => activeClient,
       )
 
       mutation.mutate('first')
@@ -121,7 +129,7 @@ describe('createMutation', () => {
       expect(mutation.status).toBe('success')
       expect(mutation.data).toBe('first')
 
-      queryClient = queryClient2
+      activeClient = queryClient2
       flushSync()
 
       expect(mutation.status).toBe('idle')