test(svelte-query): unify queryClient passing to 'setQueryClientContext' and rename test components

packages/svelte-query/tests/QueryClientProvider/ParentComponent.svelte → packages/svelte-query/tests/QueryClientProvider/BaseExample.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { QueryClientProvider } from '../../src/index.js'
-  import ChildComponent from './ChildComponent.svelte'
+  import QueryChild from './QueryChild.svelte'
   import type { QueryClient } from '@tanstack/query-core'
 
   let { queryClient }: { queryClient: QueryClient } = $props()
 </script>
 
 <QueryClientProvider client={queryClient}>
-  <ChildComponent />
+  <QueryChild />
 </QueryClientProvider>

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

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { render } from '@testing-library/svelte'
 import { QueryClient } from '@tanstack/query-core'
-import ParentComponent from './ParentComponent.svelte'
+import BaseExample from './BaseExample.svelte'
 
 describe('QueryClientProvider', () => {
   beforeEach(() => {
@@ -16,7 +16,7 @@ describe('QueryClientProvider', () => {
     const queryClient = new QueryClient()
     const queryCache = queryClient.getQueryCache()
 
-    const rendered = render(ParentComponent, {
+    const rendered = render(BaseExample, {
       props: {
         queryClient: queryClient,
       },

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

@@ -3,21 +3,20 @@
   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'
 
   let { states }: { states: { value: Array<QueryObserverResult> } } = $props()
 
   const queryClient = new QueryClient()
+  setQueryClientContext(queryClient)
 
-  const query = createInfiniteQuery(
-    () => ({
-      queryKey: queryKey(),
-      queryFn: ({ pageParam }) => sleep(10).then(() => pageParam),
-      getNextPageParam: (lastPage) => lastPage + 1,
-      initialPageParam: 0,
-    }),
-    () => queryClient,
-  )
+  const query = createInfiniteQuery(() => ({
+    queryKey: queryKey(),
+    queryFn: ({ pageParam }) => sleep(10).then(() => pageParam),
+    getNextPageParam: (lastPage) => lastPage + 1,
+    initialPageParam: 0,
+  }))
 
   $effect(() => {
     // @ts-expect-error

packages/svelte-query/tests/createInfiniteQuery/ChangeClient.svelte → packages/svelte-query/tests/createInfiniteQuery/ChangeClientExample.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { QueryClient } from '@tanstack/query-core'
   import { createInfiniteQuery } from '../../src/index.js'
+  import { setQueryClientContext } from '../../src/context.js'
   import { sleep } from '@tanstack/query-test-utils'
 
   let { queryClient }: { queryClient: QueryClient } = $props()
@@ -9,15 +10,14 @@
 
   let firstPage = $state(0)
 
-  const query = createInfiniteQuery(
-    () => ({
-      queryKey: queryKey,
-      queryFn: ({ pageParam }) => sleep(10).then(() => pageParam),
-      getNextPageParam: (lastPage) => lastPage + 1,
-      initialPageParam: firstPage,
-    }),
-    () => queryClient,
-  )
+  setQueryClientContext(queryClient)
+
+  const query = createInfiniteQuery(() => ({
+    queryKey: queryKey,
+    queryFn: ({ pageParam }) => sleep(10).then(() => pageParam),
+    getNextPageParam: (lastPage) => lastPage + 1,
+    initialPageParam: firstPage,
+  }))
 </script>
 
 <button

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

@@ -2,26 +2,25 @@
   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 { queryKey, sleep } from '@tanstack/query-test-utils'
 
   let { states }: { states: { value: Array<QueryObserverResult> } } = $props()
 
   const queryClient = new QueryClient()
+  setQueryClientContext(queryClient)
 
-  const query = createInfiniteQuery(
-    () => ({
-      queryKey: queryKey(),
-      queryFn: () => sleep(10).then(() => ({ count: 1 })),
-      select: (data) => ({
-        pages: data.pages.map((x) => `count: ${x.count}`),
-        pageParams: data.pageParams,
-      }),
-      getNextPageParam: () => undefined,
-      initialPageParam: 0,
+  const query = createInfiniteQuery(() => ({
+    queryKey: queryKey(),
+    queryFn: () => sleep(10).then(() => ({ count: 1 })),
+    select: (data) => ({
+      pages: data.pages.map((x) => `count: ${x.count}`),
+      pageParams: data.pageParams,
     }),
-    () => queryClient,
-  )
+    getNextPageParam: () => undefined,
+    initialPageParam: 0,
+  }))
 
   $effect(() => {
     // @ts-expect-error

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

@@ -4,7 +4,7 @@ import { QueryClient } from '@tanstack/query-core'
 import { ref } from '../utils.svelte.js'
 import BaseExample from './BaseExample.svelte'
 import SelectExample from './SelectExample.svelte'
-import ChangeClient from './ChangeClient.svelte'
+import ChangeClientExample from './ChangeClientExample.svelte'
 import type { QueryObserverResult } from '@tanstack/query-core'
 
 describe('createInfiniteQuery', () => {
@@ -133,7 +133,7 @@ describe('createInfiniteQuery', () => {
   it('should be able to set new pages with the query client', async () => {
     const queryClient = new QueryClient()
 
-    const rendered = render(ChangeClient, {
+    const rendered = render(ChangeClientExample, {
       props: {
         queryClient,
       },

packages/svelte-query/tests/createQueries/IsRestoringExample.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
   import { QueryClient } from '@tanstack/query-core'
   import { queryKey } from '@tanstack/query-test-utils'
-  import { setIsRestoringContext } from '../../src/context.js'
+  import {
+    setIsRestoringContext,
+    setQueryClientContext,
+  } from '../../src/context.js'
   import { createQueries } from '../../src/index.js'
 
   let {
@@ -13,18 +16,15 @@
   } = $props()
 
   const queryClient = new QueryClient()
-
+  setQueryClientContext(queryClient)
   setIsRestoringContext({ current: true })
 
-  const result = createQueries(
-    () => ({
-      queries: [
-        { queryKey: queryKey(), queryFn: queryFn1 },
-        { queryKey: queryKey(), queryFn: queryFn2 },
-      ],
-    }),
-    () => queryClient,
-  )
+  const result = createQueries(() => ({
+    queries: [
+      { queryKey: queryKey(), queryFn: queryFn1 },
+      { queryKey: queryKey(), queryFn: queryFn2 },
+    ],
+  }))
 </script>
 
 <div>

packages/svelte-query/tests/createQuery/IsRestoringExample.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
   import { QueryClient } from '@tanstack/query-core'
   import { queryKey } from '@tanstack/query-test-utils'
-  import { setIsRestoringContext } from '../../src/context.js'
+  import {
+    setIsRestoringContext,
+    setQueryClientContext,
+  } from '../../src/context.js'
   import { createQuery } from '../../src/index.js'
 
   let {
@@ -11,16 +14,13 @@
   } = $props()
 
   const queryClient = new QueryClient()
-
+  setQueryClientContext(queryClient)
   setIsRestoringContext({ current: true })
 
-  const query = createQuery(
-    () => ({
-      queryKey: queryKey(),
-      queryFn,
-    }),
-    () => queryClient,
-  )
+  const query = createQuery(() => ({
+    queryKey: queryKey(),
+    queryFn,
+  }))
 </script>
 
 <div>

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

@@ -1,11 +1,24 @@
 <script lang="ts">
-  import ProviderWrapper from '../ProviderWrapper.svelte'
-  import FetchStatus from './FetchStatus.svelte'
-  import Query from './Query.svelte'
+  import { QueryClient } from '@tanstack/query-core'
+  import { queryKey, sleep } from '@tanstack/query-test-utils'
+  import { setQueryClientContext } from '../../src/context.js'
+  import { createQuery, useIsFetching } from '../../src/index.js'
+
+  const queryClient = new QueryClient()
+  setQueryClientContext(queryClient)
+
+  let ready = $state(false)
+
+  const query = createQuery(() => ({
+    queryKey: queryKey(),
+    queryFn: () => sleep(10).then(() => 'test'),
+    enabled: ready,
+  }))
+
+  const isFetching = useIsFetching()
 </script>
 
-<ProviderWrapper>
-  <FetchStatus />
+<button onclick={() => (ready = true)}>setReady</button>
 
-  <Query />
-</ProviderWrapper>
+<div>isFetching: {isFetching.current}</div>
+<div>Data: {query.data ?? 'undefined'}</div>

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

@@ -1,11 +1,20 @@
 <script lang="ts">
-  import ProviderWrapper from '../ProviderWrapper.svelte'
-  import MutatingStatus from './MutatingStatus.svelte'
-  import Query from './Query.svelte'
+  import { QueryClient } from '@tanstack/query-core'
+  import { queryKey, sleep } from '@tanstack/query-test-utils'
+  import { setQueryClientContext } from '../../src/context.js'
+  import { createMutation, useIsMutating } from '../../src/index.js'
+
+  const queryClient = new QueryClient()
+  setQueryClientContext(queryClient)
+
+  const mutation = createMutation(() => ({
+    mutationKey: queryKey(),
+    mutationFn: () => sleep(10).then(() => 'data'),
+  }))
+
+  const isMutating = useIsMutating()
 </script>
 
-<ProviderWrapper>
-  <MutatingStatus />
+<button onclick={() => mutation.mutate()}>Trigger</button>
 
-  <Query />
-</ProviderWrapper>
+<div>isMutating: {isMutating.current}</div>