Skip to content

test(react-query/useSuspenseInfiniteQuery): add test for basic suspend and resolve states#10213

Open
sukvvon wants to merge 2 commits intoTanStack:mainfrom
sukvvon:test/react-query-useSuspenseInfiniteQuery-add-basic-suspend-resolve-test
Open

test(react-query/useSuspenseInfiniteQuery): add test for basic suspend and resolve states#10213
sukvvon wants to merge 2 commits intoTanStack:mainfrom
sukvvon:test/react-query-useSuspenseInfiniteQuery-add-basic-suspend-resolve-test

Conversation

@sukvvon
Copy link
Contributor

@sukvvon sukvvon commented Mar 2, 2026

🎯 Changes

Add a basic suspend → resolve test for useSuspenseInfiniteQuery that verifies:

  • Suspense fallback is shown while the query is pending
  • Data (pages, pageParams) and status: 'success' are correct after resolve
  • Re-suspends and resolves correctly when the query key changes

This follows the same pattern as the existing test in useSuspenseQuery.test.tsx.

✅ Checklist

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

🚀 Release Impact

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

Summary by CodeRabbit

  • Tests
    • Added comprehensive test coverage for infinite query functionality, verifying correct behavior across the complete query lifecycle including initial loading states, successful data rendering, pagination for additional pages, dynamic parameter changes, and validation of returned data structures and pagination markers.

@changeset-bot
Copy link

changeset-bot bot commented Mar 2, 2026

⚠️ No Changeset found

Latest commit: b3938b9

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

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 2, 2026

📝 Walkthrough

Walkthrough

Test setup and lifecycle hooks for fake timers were added, along with expanded imports. A new comprehensive test case verifies state transitions for useSuspenseInfiniteQuery, including initial loading, data rendering, and subsequent page fetching with parameter changes.

Changes

Cohort / File(s) Summary
Test Suite Enhancement
packages/react-query/src/__tests__/useSuspenseInfiniteQuery.test.tsx
Added beforeEach/afterEach lifecycle hooks for fake timer management, expanded imports (act, fireEvent, sleep, InfiniteData, UseSuspenseInfiniteQueryResult), and introduced a new test case that validates state transitions including initial loading, successful data rendering, and subsequent page fetching after parameter changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

  • TkDodo

Poem

🐰 Test cases bloom like carrots in spring,
With fake timers and state-tracking flings,
Each page loads true, each query takes flight,
Infinite scrolls now verified right! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: adding a test for useSuspenseInfiniteQuery that covers suspend and resolve states, which matches the changeset's core purpose.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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

@nx-cloud
Copy link

nx-cloud bot commented Mar 2, 2026

View your CI Pipeline Execution ↗ for commit b3938b9

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

☁️ Nx Cloud last updated this comment at 2026-03-02 16:14:50 UTC

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 2, 2026

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10213

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10213

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 717f1d8

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
packages/react-query/src/__tests__/useSuspenseInfiniteQuery.test.tsx (1)

15-21: Consider scoping fake timers to only the test that needs them.

Applying vi.useFakeTimers() in beforeEach affects all tests in this describe block, including the existing skipToken tests that don't require fake timers. While this likely won't break them, scoping the timer setup to only the new test improves isolation and makes the test's dependencies explicit.

♻️ Suggested refactor: move timer setup into the specific test
 describe('useSuspenseInfiniteQuery', () => {
-  beforeEach(() => {
-    vi.useFakeTimers()
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
   const queryCache = new QueryCache()
   const queryClient = new QueryClient({ queryCache })

   it('should return the correct states for a successful infinite query', async () => {
+    vi.useFakeTimers()
     const key = queryKey()
     // ... rest of test ...
+    vi.useRealTimers()
   })
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/react-query/src/__tests__/useSuspenseInfiniteQuery.test.tsx` around
lines 15 - 21, The beforeEach/afterEach hooks that call vi.useFakeTimers() and
vi.useRealTimers() should be removed from the shared setup and instead applied
only inside the specific test that needs fake timers: locate the
beforeEach/afterEach in useSuspenseInfiniteQuery.test.tsx and delete them, then
add vi.useFakeTimers() at the start of the single test that relies on timers and
call vi.useRealTimers() (or restore) at that test's end or in a finally block to
ensure cleanup; this scopes fake timers to the test that needs them and avoids
affecting other tests such as the skipToken cases.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/react-query/src/__tests__/useSuspenseInfiniteQuery.test.tsx`:
- Around line 15-21: The beforeEach/afterEach hooks that call vi.useFakeTimers()
and vi.useRealTimers() should be removed from the shared setup and instead
applied only inside the specific test that needs fake timers: locate the
beforeEach/afterEach in useSuspenseInfiniteQuery.test.tsx and delete them, then
add vi.useFakeTimers() at the start of the single test that relies on timers and
call vi.useRealTimers() (or restore) at that test's end or in a finally block to
ensure cleanup; this scopes fake timers to the test that needs them and avoids
affecting other tests such as the skipToken cases.

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8a59b2d and b3938b9.

📒 Files selected for processing (1)
  • packages/react-query/src/__tests__/useSuspenseInfiniteQuery.test.tsx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant