diff --git a/packages/svelte-query-devtools/tests/Devtools.svelte.test.ts b/packages/svelte-query-devtools/tests/Devtools.svelte.test.ts
index 6808633dad..dc773f5430 100644
--- a/packages/svelte-query-devtools/tests/Devtools.svelte.test.ts
+++ b/packages/svelte-query-devtools/tests/Devtools.svelte.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
import { render } from '@testing-library/svelte'
import { QueryClient } from '@tanstack/svelte-query'
import SvelteQueryDevtools from '../src/Devtools.svelte'
+import Wrapper from './Wrapper.svelte'
describe('SvelteQueryDevtools', () => {
it('should render the parent container without throwing in non-development environments', () => {
@@ -15,4 +16,24 @@ describe('SvelteQueryDevtools', () => {
container.querySelector('.tsqd-parent-container'),
).toBeInTheDocument()
})
+
+ it('should throw an error if no query client has been set', () => {
+ expect(() => render(SvelteQueryDevtools)).toThrow(
+ 'No QueryClient was found in Svelte context. Did you forget to wrap your component with QueryClientProvider?',
+ )
+ })
+
+ it('should not throw an error if query client is provided via context', () => {
+ const queryClient = new QueryClient()
+
+ expect(() => render(Wrapper, { props: { queryClient } })).not.toThrow()
+ })
+
+ it('should not throw an error if query client is provided via props', () => {
+ const queryClient = new QueryClient()
+
+ expect(() =>
+ render(SvelteQueryDevtools, { props: { client: queryClient } }),
+ ).not.toThrow()
+ })
})
diff --git a/packages/svelte-query-devtools/tests/Wrapper.svelte b/packages/svelte-query-devtools/tests/Wrapper.svelte
new file mode 100644
index 0000000000..35c5cf1517
--- /dev/null
+++ b/packages/svelte-query-devtools/tests/Wrapper.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+