Testing Svelte component: How to quickly provide a QueryClient.

[antran22]

Given a Svelte component that uses svelte-query.

<!-- Component.svelte -->
<script lang="ts">
  const query = createQuery(() => ({
    queryKey: ["foo"],
    queryFn: () => api.getFoo(),
  }));
</script>

<div data-testid="foo">Foo is: {query.data}</div>

I would like to do Component testing with Vitest

import { describe, expect, it } from "vitest";
import { page } from "vitest/browser";
import { render } from "vitest-browser-svelte";

describe("Component.svelte", () => {
  it("should render", async () => {
    render(Component);

    const text = page.getByTestId("foo");
    await expect.element(heading).toBeInTheDocument();
  });
});

However an error is expected:

Error: No QueryClient was found in Svelte context. Did you forget to wrap your component with QueryClientProvider?

In React-land, we can wrap the component-under-test with QueryClientProvider

describe("Component.tsx", () => {
  it("should render", async () => {
    const client = new QueryClient();
    render(<QueryClientProvider client={client}><Component/></QueryClientProvider>);

    const text = page.getByTestId("foo");
    await expect.element(heading).toBeInTheDocument();
  });
});

But this cannot be done with Svelte, as there would be no concept of JSX.

Available literature online for this issue is practically non-existent or not up to date. For example, some suggests using svelte-htm or svelte-jsx to do this, but the libraries are long-abandoned and is not expected to work with Svelte 5.

Suggested approach

The library should export the context key:

query/packages/svelte-query/src/context.ts

Lines 1 to 6 in bf7f47e

	import { getContext, setContext } from 'svelte'
	import type { QueryClient } from '@tanstack/query-core'
	import type { Box } from './containers.svelte'
	const _contextKey = Symbol('QueryClient')

This way, we can inject the queryClient as a render context.

import { queryClientContextKey } from "@tanstack/svelte-query"; // hypothetically


describe("Component.svelte", () => {
  it("should render", async () => {
    const client = new QueryClient();
    render(Component, {
      context: new Map([
        [queryClientContextKey, client]
      ]),
    });

    const text = page.getByTestId("foo");
    await expect.element(heading).toBeInTheDocument();
  });
});

[antran22]

Update: A rather clean approach to this problem, without needing any change from the library:

We need a utility component:

<!-- query-wrapper.svelte -->

<script lang="ts">
  import { QueryClient, setQueryClientContext } from "@tanstack/svelte-query";

  const { children } = $props();
  const queryClient = new QueryClient();
  setQueryClientContext(queryClient);
</script>

{@render children?.()}

Then we render this in the test script

import QueryWrapper from "$lib/test-helpers/query-wrapper.svelte"

describe("Component.svelte", () => {
  it("should render", async () => {
    render(QueryWrapper, {
      props: {
        children: Component
      }
    });

    const text = page.getByTestId("foo");
    await expect.element(heading).toBeInTheDocument();
  });
});

This would work, though I suppose exposing the context key like how I suggested above is a bit cleaner.