query test(svelte-query-persist-client/PersistQueryClientProvider): switch to fake timers, replace 'waitFor' with 'advanceTimersByTimeAsync', and use 'sleep().then()' pattern

🎯 Changes

✅ Checklist

[x] I have followed the steps in the Contributing guide.
[x] I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

[ ] This change affects published code, and I have generated a changeset.
[x] This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

New Features
- Added a public onFetch prop to a test component to notify when data is fetched.
- Default data display updated from "undefined" to "null" in a test view.
Tests
- Introduced short artificial delays in query flows to better simulate real async timing.
- Shifted several tests from wait-based assertions to explicit timer-driven advancement for more predictable state progression.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Nov 23 '25 16:11 sukvvon

⚠️ No Changeset found

Latest commit: 89b5f0cbcc99da80f3d7df0e84f4316e6f27b317

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Nov 23 '25 16:11 changeset-bot[bot]

Walkthrough

Tests in packages/svelte-query-persist-client introduce 10ms artificial delays in many query functions (via sleep(10)), add an onFetch prop to FreshData and forward it from its Provider, and convert the main test suite to use fake timers with explicit timer advances instead of waitFor-based assertions.

Changes

Cohort / File(s)	Summary
Query timing changes `packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte`, `packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte`, `packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte`, `packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte`, `packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte`, `packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte`	Added `sleep` import and changed query functions to introduce a 10ms artificial delay (e.g., `await sleep(10)` or `sleep(10).then(() => 'fetched')`) replacing immediate resolved promises or shorter sleeps.
FreshData component & provider `packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte`, `packages/svelte-query-persist-client/tests/FreshData/Provider.svelte`	Added exported `onFetch: () => void` prop to FreshData, FreshData calls `onFetch()` after delayed fetch; Provider forwards `onFetch` to FreshData. Default displayed data handling adjusted (e.g., `undefined` -> `null`).
Test suite: fake timers & timer-driven assertions `packages/svelte-query-persist-client/tests/PersistQueryClientProvider.svelte.test.ts`	Switched tests to use fake timers (setup/teardown), replaced waitFor-based checks with explicit `advanceTimersByTimeAsync` steps and sequential DOM assertions; adjusted persister mocks and restore/hydrate delays to align with timer advancement.

Sequence Diagram(s)

sequenceDiagram
  %%{init: {"themeVariables":{"actorBorder":"#2b6cb0","actorBackground":"#ebf8ff","noteBackground":"#f7fafc"}}}%%
  participant Test as Test Runner
  participant Persister as Persister Mock
  participant QueryClient as Query Client
  participant Component as Svelte Component

  rect rgba(43,108,176,0.06)
    Note over Test,Component: New flow (fake timers + sleep)
    Test->>Test: useFakeTimers()
    Test->>Component: render
    Component->>QueryClient: prefetch/query (sleep(10).then(...))
    Persister->>Test: restoreClient resolves after configured delay
    Test->>Test: advanceTimersByTimeAsync(10)
    QueryClient-->>Component: data resolved (after timer)
    Component->>Test: DOM updates to hydrated -> fetched
  end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Review PersistQueryClientProvider.svelte.test.ts fake timer setup/teardown and ensure all async expectations have corresponding advanceTimersByTimeAsync calls.
Verify FreshData onFetch prop typing/export and that Provider forwards it correctly.
Check that converting async functions to promise chains / adding sleep delays preserves cancellation/error semantics where relevant.

Possibly related PRs

TanStack/query#9859 — Similar test-level changes switching tests to fake timers and replacing immediate resolves with sleep(...)-driven delays.

Suggested reviewers

TkDodo
manudeli

Poem

🐰 I nibble at timers, soft and bright,
Sleep(10) hums through day and night,
Tests tiptoe with patient paws,
Fetches bloom without a cause,
A tiny pause — a rabbit's delight.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main changes: switching to fake timers, replacing 'waitFor' with 'advanceTimersByTimeAsync', and using 'sleep().then()' pattern in test files.
Description check	✅ Passed	The description follows the template structure with all required sections filled out, including the changes section (though minimal), completed checklist items, and release impact designation as dev-only.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

[ ] Create PR with unit tests
[ ] Post copyable unit tests in a comment

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 163797c544248733223c08635850ae608ba9668f and c38c8e75d69bfc145a37bec0bf8cfad6da032782.

📒 Files selected for processing (1)

packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte (2 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: sukvvon
Repo: TanStack/query PR: 9892
File: packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx:331-335
Timestamp: 2025-11-22T09:06:05.219Z
Learning: In TanStack/query test files, when a queryFn contains side effects (e.g., setting flags for test verification), prefer async/await syntax for clarity; when there are no side effects, prefer the .then() pattern for conciseness.

📚 Learning: 2025-11-22T09:06:05.219Z

Learnt from: sukvvon
Repo: TanStack/query PR: 9892
File: packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx:331-335
Timestamp: 2025-11-22T09:06:05.219Z
Learning: In TanStack/query test files, when a queryFn contains side effects (e.g., setting flags for test verification), prefer async/await syntax for clarity; when there are no side effects, prefer the .then() pattern for conciseness.

Applied to files:

packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: Preview
GitHub Check: Test

🔇 Additional comments (1)

packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte (1)

3-3: LGTM! Async/await pattern is appropriate for side effects.

The queryFn correctly uses async/await syntax because it contains a side effect (onFetch()). The 10ms sleep delay and onFetch callback enable proper test synchronization with fake timers.

Based on learnings, async/await is preferred when queryFn contains side effects for clarity.

Also applies to: 8-8, 11-11, 16-20

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Nov 23 '25 16:11 coderabbitai[bot]

View your CI Pipeline Execution ↗ for commit 89b5f0cbcc99da80f3d7df0e84f4316e6f27b317

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	58s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	1s	View ↗

☁️ Nx Cloud last updated this comment at 2025-12-19 01:56:47 UTC

Nov 23 '25 16:11 nx-cloud[bot]

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9900

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@9900

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9900

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@9900

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@9900

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@9900

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9900

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@9900

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@9900

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@9900

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@9900

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@9900

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@9900

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@9900

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@9900

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@9900

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@9900

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@9900

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@9900

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@9900

commit: 89b5f0c

Nov 23 '25 16:11 pkg-pr-new[bot]