diff --git a/packages/svelte-query/tests/HydrationBoundary/BaseExample.svelte b/packages/svelte-query/tests/HydrationBoundary/BaseExample.svelte new file mode 100644 index 00000000000..59930aab542 --- /dev/null +++ b/packages/svelte-query/tests/HydrationBoundary/BaseExample.svelte @@ -0,0 +1,33 @@ + + + +
data: {query.data ?? 'undefined'}
+
diff --git a/packages/svelte-query/tests/HydrationBoundary/HydrationBoundary.svelte.test.ts b/packages/svelte-query/tests/HydrationBoundary/HydrationBoundary.svelte.test.ts new file mode 100644 index 00000000000..4e6c857e4e6 --- /dev/null +++ b/packages/svelte-query/tests/HydrationBoundary/HydrationBoundary.svelte.test.ts @@ -0,0 +1,41 @@ +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { render } from '@testing-library/svelte' +import { QueryClient, dehydrate } from '@tanstack/query-core' +import { sleep } from '@tanstack/query-test-utils' +import BaseExample from './BaseExample.svelte' + +describe('HydrationBoundary', () => { + let stringifiedState: string + + beforeEach(async () => { + vi.useFakeTimers() + const queryClient = new QueryClient() + queryClient.prefetchQuery({ + queryKey: ['string'], + queryFn: () => sleep(10).then(() => 'stringCached'), + }) + await vi.advanceTimersByTimeAsync(10) + const dehydrated = dehydrate(queryClient) + stringifiedState = JSON.stringify(dehydrated) + queryClient.clear() + }) + + afterEach(() => { + vi.useRealTimers() + }) + + it('should hydrate queries to the cache on context', async () => { + const dehydratedState = JSON.parse(stringifiedState) + + const rendered = render(BaseExample, { + props: { + dehydratedState, + queryFn: () => sleep(20).then(() => 'string'), + }, + }) + + expect(rendered.getByText('data: stringCached')).toBeInTheDocument() + await vi.advanceTimersByTimeAsync(21) + expect(rendered.getByText('data: string')).toBeInTheDocument() + }) +})