Skip to content

test(react-query): replace 'async/await sleep' with 'sleep().then()' in test 'queryFn' and 'mutationFn'#10399

Merged
sukvvon merged 2 commits intomainfrom
test/react-query-replace-async-await-sleep-with-then-chaining
Apr 6, 2026
Merged

test(react-query): replace 'async/await sleep' with 'sleep().then()' in test 'queryFn' and 'mutationFn'#10399
sukvvon merged 2 commits intomainfrom
test/react-query-replace-async-await-sleep-with-then-chaining

Conversation

@sukvvon
Copy link
Copy Markdown
Collaborator

@sukvvon sukvvon commented Apr 6, 2026

🎯 Changes

  • Replace async () => { await sleep(N); return value } with () => sleep(N).then(() => value) in test queryFn and mutationFn
  • Applied to useQuery.test.tsx, useQueries.test.tsx, useMutation.test.tsx, usePrefetchQuery.test.tsx, and fine-grained-persister.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

Release Notes

  • Tests
    • Refactored test helper functions across multiple test files to use promise-chain syntax instead of async/await patterns, improving code consistency while maintaining identical test behavior and timing.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 6, 2026

📝 Walkthrough

Walkthrough

This PR refactors test code across five test files in the react-query package, converting query and mutation function implementations from async/await syntax to promise-chained .then() patterns, while preserving all functional behavior and timing semantics.

Changes

Cohort / File(s) Summary
Test Query/Mutation Function Refactoring
packages/react-query/src/__tests__/useQuery.test.tsx, packages/react-query/src/__tests__/useQueries.test.tsx, packages/react-query/src/__tests__/useMutation.test.tsx, packages/react-query/src/__tests__/usePrefetchQuery.test.tsx, packages/react-query/src/__tests__/fine-grained-persister.test.tsx
Converted async () => { await sleep(X); return value; } patterns to () => sleep(X).then(() => value) across all test query and mutation function implementations, maintaining identical resolved values and timing behavior while simplifying control flow.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Poem

🐰 Async to promises, chains so neat,
No more await makes tests complete,
Same timing, same behavior's there,
Just simpler syntax, light as air!

🚥 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
Title check ✅ Passed The title accurately and specifically describes the main change: replacing async/await sleep patterns with promise-chained sleep().then() patterns in test functions.
Description check ✅ Passed The description follows the template structure, includes a clear explanation of changes with specific file references, completes the checklist, and marks the PR as dev-only (no changeset needed).

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

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch test/react-query-replace-async-await-sleep-with-then-chaining

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

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented Apr 6, 2026

View your CI Pipeline Execution ↗ for commit e5dc162

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

☁️ Nx Cloud last updated this comment at 2026-04-06 04:37:40 UTC

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 6, 2026

🚀 Changeset Version Preview

No changeset entries found. Merging this PR will not cause a version bump for any packages.

@sukvvon sukvvon self-assigned this Apr 6, 2026
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Apr 6, 2026

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: e5dc162

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 6, 2026

size-limit report 📦

Path Size
react full 11.98 KB (0%)
react minimal 9.01 KB (0%)

Copy link
Copy Markdown
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 (3)
packages/react-query/src/__tests__/useQueries.test.tsx (1)

1090-1094: Simplify redundant Promise.resolve() wrapping in .then() chains.

.then(() => Promise.resolve('x')) can be simplified to .then(() => 'x') — the Promise chain automatically wraps the return value. Found at lines 1090, 1094, 1130, and 1135.

Suggested simplification
- queryFn: () => sleep(5).then(() => Promise.resolve('query1')),
+ queryFn: () => sleep(5).then(() => 'query1'),

- queryFn: () => sleep(20).then(() => Promise.resolve('query2')),
+ queryFn: () => sleep(20).then(() => 'query2'),

- queryFn: () =>
-   sleep(5).then(() => Promise.resolve('first result ' + count)),
+ queryFn: () => sleep(5).then(() => 'first result ' + count),

- queryFn: () =>
-   sleep(50).then(() => Promise.resolve('second result ' + count)),
+ queryFn: () => sleep(50).then(() => 'second result ' + count),
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/react-query/src/__tests__/useQueries.test.tsx` around lines 1090 -
1094, The test query functions (queryFn in the useQueries tests) unnecessarily
wrap return values in Promise.resolve within .then chains; update the queryFn
implementations (e.g., the functions defined for queryKey key1/key2 and the
other instances at lines shown in the diff) to return the plain value from the
.then callbacks (replace .then(() => Promise.resolve('x')) with .then(() =>
'x')) so the promise chain still resolves correctly but with simpler, cleaner
code.
packages/react-query/src/__tests__/useQuery.test.tsx (1)

4890-4892: Simplify Promise.resolve/reject wrappers inside .then() callbacks to improve clarity.

These Promise wrappers are unnecessary; use direct throw for errors and direct return values for success cases.

Instances to refactor (6 total)
  • Line 4891: Promise.reject(new Error(...))throw new Error(...)
  • Line 5013: Promise.reject<unknown>(new Error(...))throw new Error(...)
  • Line 6418: Promise.resolve('data')'data'
  • Line 6495: Promise.reject(error)throw error
  • Line 6594: Promise.resolve('server')'server'
  • Line 6650: Promise.reject(new Error(...))throw new Error(...)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/react-query/src/__tests__/useQuery.test.tsx` around lines 4890 -
4892, In the test file useQuery.test.tsx, simplify the unnecessary
Promise.resolve/Promise.reject inside .then() callbacks by replacing
Promise.reject(new Error(...)) or Promise.reject(error) with throwing the error
(e.g., throw new Error(...) or throw error), and replacing
Promise.resolve('value') with returning the plain value ('value'); specifically
update the queryFn.mockImplementation(...) callbacks and the other .then(...)
handlers referenced (instances around the mockImplementation at
queryFn.mockImplementation and the other six occurrences) so the .then() bodies
directly throw or return values instead of wrapping them in
Promise.resolve/Promise.reject.
packages/react-query/src/__tests__/useMutation.test.tsx (1)

160-162: Redundant Promise.resolve wrapper inside .then() callback.

Returning a value from a .then() callback automatically wraps it in a resolved promise. The explicit Promise.resolve(value) is unnecessary and inconsistent with the other refactored lines (371, 1032) that use .then(() => value) directly.

Suggested simplification
-    mutateFn.mockImplementation((value) =>
-      sleep(10).then(() => Promise.resolve(value)),
-    )
+    mutateFn.mockImplementation((value) => sleep(10).then(() => value))
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/react-query/src/__tests__/useMutation.test.tsx` around lines 160 -
162, The mock implementation for mutateFn is wrapping the returned value in
Promise.resolve unnecessarily; update the mutateFn.mockImplementation callback
to return the value directly (e.g., replace the `.then(() =>
Promise.resolve(value))` with `.then(() => value)`) so it matches other
refactored lines and avoids redundant Promise wrapping in the mock.
🤖 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__/useMutation.test.tsx`:
- Around line 160-162: The mock implementation for mutateFn is wrapping the
returned value in Promise.resolve unnecessarily; update the
mutateFn.mockImplementation callback to return the value directly (e.g., replace
the `.then(() => Promise.resolve(value))` with `.then(() => value)`) so it
matches other refactored lines and avoids redundant Promise wrapping in the
mock.

In `@packages/react-query/src/__tests__/useQueries.test.tsx`:
- Around line 1090-1094: The test query functions (queryFn in the useQueries
tests) unnecessarily wrap return values in Promise.resolve within .then chains;
update the queryFn implementations (e.g., the functions defined for queryKey
key1/key2 and the other instances at lines shown in the diff) to return the
plain value from the .then callbacks (replace .then(() => Promise.resolve('x'))
with .then(() => 'x')) so the promise chain still resolves correctly but with
simpler, cleaner code.

In `@packages/react-query/src/__tests__/useQuery.test.tsx`:
- Around line 4890-4892: In the test file useQuery.test.tsx, simplify the
unnecessary Promise.resolve/Promise.reject inside .then() callbacks by replacing
Promise.reject(new Error(...)) or Promise.reject(error) with throwing the error
(e.g., throw new Error(...) or throw error), and replacing
Promise.resolve('value') with returning the plain value ('value'); specifically
update the queryFn.mockImplementation(...) callbacks and the other .then(...)
handlers referenced (instances around the mockImplementation at
queryFn.mockImplementation and the other six occurrences) so the .then() bodies
directly throw or return values instead of wrapping them in
Promise.resolve/Promise.reject.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 85f44e05-d58a-4848-8f13-a12d4f2b15e1

📥 Commits

Reviewing files that changed from the base of the PR and between ef2a4e3 and e5dc162.

📒 Files selected for processing (5)
  • packages/react-query/src/__tests__/fine-grained-persister.test.tsx
  • packages/react-query/src/__tests__/useMutation.test.tsx
  • packages/react-query/src/__tests__/usePrefetchQuery.test.tsx
  • packages/react-query/src/__tests__/useQueries.test.tsx
  • packages/react-query/src/__tests__/useQuery.test.tsx

@sukvvon sukvvon merged commit 7d7a21c into main Apr 6, 2026
8 checks passed
@sukvvon sukvvon deleted the test/react-query-replace-async-await-sleep-with-then-chaining branch April 6, 2026 04:52
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