test(query-devtools/Devtools): add test for rendering an idle mutation row by sukvvon · Pull Request #10764 · TanStack/query

sukvvon · 2026-05-23T07:22:20Z

🎯 Changes

Extend Devtools.test.tsx with a test that locks the mutations view's idle path — when a useMutation hook is mounted but has not been triggered yet, the mutation cache holds an idle entry whose row should still render (covering the color() === 'gray' branch of getObserverCountColorStyles).

Added cases (view toggle, 1):

should render an idle mutation that has been built but not executed — switches to the mutations view, builds a mutation in the cache without calling execute, and asserts the mutation row appears.

✅ 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 test coverage for the mutations view in devtools to ensure proper behavior across different mutation states.

…n row

coderabbitai · 2026-05-23T07:22:31Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d826b023-ab52-4808-91c1-d005313f662d

📥 Commits

Reviewing files that changed from the base of the PR and between d5c6df7 and 12cb965.

📒 Files selected for processing (1)

packages/query-devtools/src/__tests__/Devtools.test.tsx

📝 Walkthrough

Walkthrough

This PR adds a test case to the devtools test suite that verifies idle mutations—mutations created in the cache but not yet executed—are correctly rendered in the mutations view after timer advancement.

Changes

Devtools Mutations View Test

Layer / File(s)	Summary
Idle mutation rendering test `packages/query-devtools/src/__tests__/Devtools.test.tsx`	New test case navigates to the mutations view, builds an idle mutation with a resolved mutation function, advances fake timers, and asserts the UI displays a "Mutation submitted at" entry for the mutation.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

package: query-devtools

Poem

🐰 A test hops into the view so bright,
Where idle mutations rest in sight,
Timer ticks forward with a bound,
And rendered proof is finally found,
Devtools dance with mutations new! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and specifically describes the main change—adding a test case for rendering an idle mutation row in the devtools component.
Description check	✅ Passed	The description is complete, well-structured, and covers all required template sections including changes, checklist, and release impact details.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ 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/query-devtools-devtools-idle-mutation

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

nx-cloud · 2026-05-23T07:22:47Z

View your CI Pipeline Execution ↗ for commit 12cb965

Command	Status	Duration	Result
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	28s	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-23 08:02:09 UTC

github-actions · 2026-05-23T07:23:03Z

🚀 Changeset Version Preview

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

pkg-pr-new · 2026-05-23T07:56:05Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

npm i https://pkg.pr.new/@tanstack/lit-query@10764

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 12cb965

github-actions · 2026-05-23T08:02:10Z

size-limit report 📦

Path	Size
react full	12.1 KB (0%)
react minimal	9.07 KB (0%)

test(query-devtools/Devtools): add test for rendering an idle mutatio…

12cb965

…n row

github-actions Bot added the package: query-devtools label May 23, 2026

sukvvon self-assigned this May 23, 2026

sukvvon merged commit 3f10705 into main May 23, 2026
16 of 18 checks passed

sukvvon deleted the test/query-devtools-devtools-idle-mutation branch May 23, 2026 12:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(query-devtools/Devtools): add test for rendering an idle mutation row#10764

test(query-devtools/Devtools): add test for rendering an idle mutation row#10764
sukvvon merged 1 commit into
mainfrom
test/query-devtools-devtools-idle-mutation

sukvvon commented May 23, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 23, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested labels

Poem

Uh oh!

nx-cloud Bot commented May 23, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 23, 2026

Uh oh!

pkg-pr-new Bot commented May 23, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sukvvon commented May 23, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested labels

Poem

Uh oh!

nx-cloud Bot commented May 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 23, 2026

🚀 Changeset Version Preview

Uh oh!

pkg-pr-new Bot commented May 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 23, 2026

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented May 23, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 23, 2026 •

edited

Loading

nx-cloud Bot commented May 23, 2026 •

edited

Loading

pkg-pr-new Bot commented May 23, 2026 •

edited

Loading