test(svelte-query): wrap (useIs...) tests in QueryClientProvider to test non colocated query

Author: hmnd

packages/svelte-query/package.json

@@ -58,7 +58,7 @@
     "@tanstack/query-test-utils": "workspace:*",
     "@testing-library/svelte": "^5.2.6",
     "eslint-plugin-svelte": "^2.46.0",
-    "svelte": "^5.26.1",
+    "svelte": "^5.36.16",
     "svelte-check": "^4.1.5"
   },
   "peerDependencies": {

packages/svelte-query/tests/ProviderWrapper.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { QueryClient } from '@tanstack/query-core'
+  import { QueryClientProvider } from '../src/index.js'
+  import { Snippet } from 'svelte'
+
+  const {
+    queryClient = new QueryClient(),
+    children,
+  }: { queryClient?: QueryClient; children: Snippet } = $props()
+</script>
+
+<QueryClientProvider client={queryClient}>
+  {@render children()}
+</QueryClientProvider>

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

@@ -220,14 +220,12 @@ describe('createQuery', () => {
     await withEffectRoot(async () => {
       const { promise, resolve } = promiseWithResolvers<string>()
 
-      const query = $derived(
-        createQuery<string, Error>(
-          () => ({
-            queryKey: key,
-            queryFn: () => promise,
-          }),
-          () => queryClient,
-        ),
+      const query = createQuery<string, Error>(
+        () => ({
+          queryKey: key,
+          queryFn: () => promise,
+        }),
+        () => queryClient,
       )
 
       expect(query).toEqual(

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

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

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

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import { useIsFetching } from '../../src/index.js'
+  const isFetching = useIsFetching()
+</script>
+
+<div>isFetching: {isFetching.current}</div>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { createQuery } from '../../src/index.js'
+  import { sleep } from '@tanstack/query-test-utils'
+
+  let ready = $state(false)
+
+  const query = createQuery(() => ({
+    queryKey: ['test'],
+    queryFn: async () => {
+      await sleep(5)
+      return 'test'
+    },
+    enabled: ready,
+  }))
+</script>
+
+<button onclick={() => (ready = true)}>setReady</button>
+
+<div>Data: {query.data ?? 'undefined'}</div>

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

@@ -1,23 +1,11 @@
 <script lang="ts">
-  import { QueryClient } from '@tanstack/query-core'
-  import { createMutation, useIsMutating } from '../../src/index.js'
-  import { sleep } from '@tanstack/query-test-utils'
-
-  const queryClient = new QueryClient()
-  const isMutating = useIsMutating(undefined, queryClient)
-
-  const mutation = createMutation(
-    () => ({
-      mutationKey: ['mutation-1'],
-      mutationFn: async () => {
-        await sleep(5)
-        return 'data'
-      },
-    }),
-    () => queryClient,
-  )
+  import ProviderWrapper from '../ProviderWrapper.svelte'
+  import MutatingStatus from './MutatingStatus.svelte'
+  import Query from './Query.svelte'
 </script>
 
-<button onclick={() => mutation.mutate()}>Trigger</button>
+<ProviderWrapper>
+  <MutatingStatus />
 
-<div>isMutating: {isMutating.current}</div>
+  <Query />
+</ProviderWrapper>

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

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import { useIsMutating } from '../../src/index.js'
+  const isMutating = useIsMutating()
+</script>
+
+<div>isMutating: {isMutating.current}</div>

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { createMutation } from '../../src/index.js'
+  import { sleep } from '@tanstack/query-test-utils'
+
+  const mutation = createMutation(() => ({
+    mutationKey: ['mutation-1'],
+    mutationFn: async () => {
+      await sleep(5)
+      return 'data'
+    },
+  }))
+</script>
+
+<button onclick={() => mutation.mutate()}>Trigger</button>

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

@@ -2,7 +2,7 @@ import { describe, test } from 'vitest'
 import { fireEvent, render } from '@testing-library/svelte'
 import BaseExample from './BaseExample.svelte'
 
-describe('useIsFetching', () => {
+describe('useIsMutating', () => {
   test('should update as queries start and stop fetching', async () => {
     const rendered = render(BaseExample)