test(react-query-devtools/ReactQueryDevtools): add tests for forwarding option changes after mount by sukvvon · Pull Request #11019 · TanStack/query

sukvvon · 2026-07-03T00:37:16Z

🎯 Changes

Adds regression tests verifying that ReactQueryDevtools forwards option changes to the underlying devtools instance after mount, not just on the initial render.

The existing tests only cover the initial forwarding of options. Each option is wired through its own useEffect with a dependency array (e.g. [position, devtools]), so if a dependency is accidentally dropped, the option would silently stop being re-forwarded on update — a case the initial-render tests cannot catch.

The new tests use rerender to change each prop after mount and assert the corresponding setter is called again:

buttonPosition
position
initialIsOpen
errorTypes
theme

✅ 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 coverage to verify devtools settings update correctly when component props change after initial render.
- Confirmed updated values are forwarded on rerender for button position, panel position, open state, error display, and theme.
- Kept existing mount and unmount behavior checks intact.

nx-cloud · 2026-07-03T00:37:45Z

View your CI Pipeline Execution ↗ for commit 5db2625

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

☁️ Nx Cloud last updated this comment at 2026-07-03 00:47:58 UTC

coderabbitai · 2026-07-03T00:38:11Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ed8cb07d-5385-45b8-87c2-8c767deb17ca

📥 Commits

Reviewing files that changed from the base of the PR and between d6798b5 and 022a6e0.

📒 Files selected for processing (1)

packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx

📝 Walkthrough

Walkthrough

This PR adds five new test cases to ReactQueryDevtools.test.tsx that verify prop updates (buttonPosition, position, initialIsOpen, errorTypes, theme) are forwarded to the underlying devtools instance's setter methods when the component rerenders with changed props.

Changes

Devtools Rerender Prop-Forwarding Tests

Layer / File(s)	Summary
Prop update forwarding tests on rerender `packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx`	Five new tests rerender `ReactQueryDevtools` with updated `buttonPosition`, `position`, `initialIsOpen`, `errorTypes`, and `theme` props, clearing mocks post-mount and asserting `setButtonPosition`, `setPosition`, `setInitialIsOpen`, `setErrorTypes`, and `setTheme` are called with the new values.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

TanStack/query#10823: Both PRs add devtools-prop wiring tests asserting that initialIsOpen, errorTypes, and theme changes are forwarded to underlying devtools instance setter methods across rerenders.
TanStack/query#10827: Both PRs add test coverage ensuring devtools panel prop changes forward to setErrorTypes/setTheme on the underlying devtools instance.
TanStack/query#10851: Both PRs update ReactQueryDevtools.test.tsx to assert initialIsOpen, errorTypes, and theme forwarding to devtools setters, with this PR extending coverage to prop changes on rerender.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding tests for option updates after mount.
Description check	✅ Passed	The description follows the template and includes the required changes, checklist, and release impact sections.
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.

✨ 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-devtools-reactive-options

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

github-actions · 2026-07-03T00:38:20Z

🚀 Changeset Version Preview

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

…ng option changes after mount

pkg-pr-new · 2026-07-03T00:43:28Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 022a6e0

github-actions · 2026-07-03T00:43:45Z

size-limit report 📦

Path	Size
react full	12.13 KB (0%)
react minimal	9.08 KB (0%)

test(react-query-devtools/ReactQueryDevtools): add tests for forwardi…
8fa612f
…ng option changes after mount

sukvvon force-pushed the test/react-query-devtools-reactive-options branch from 5db2625 to 8fa612fCompare July 3, 2026 00:38

sukvvon changed the title ~~test(react-query/devtools): add tests for forwarding option changes after mount~~test(react-query-devtools/ReactQueryDevtools): add tests for forwarding option changes after mountJul 3, 2026

ci: apply automated fixes
022a6e0

sukvvon self-assigned this Jul 3, 2026

sukvvon merged commit cb115ea into mainJul 3, 2026
9 checks passed

sukvvon deleted the test/react-query-devtools-reactive-options branch July 3, 2026 01:40

This was referenced Jul 4, 2026
test(react-query-devtools): extract shared test setup into 'beforeEach' #11026
Merged
test(preact-query-devtools): extract shared test setup into 'beforeEach' #11027
Merged

Navigation Menu

Uh oh!

Uh oh!

test(react-query-devtools/ReactQueryDevtools): add tests for forwarding option changes after mount - #11019

test(react-query-devtools/ReactQueryDevtools): add tests for forwarding option changes after mount#11019
sukvvon merged 2 commits into
mainfrom
test/react-query-devtools-reactive-options

sukvvon commented Jul 3, 2026•
edited by coderabbitai Bot
Loading

Uh oh!

nx-cloudBot commented Jul 3, 2026•
edited
Loading

Uh oh!

coderabbitaiBot commented Jul 3, 2026•
edited
Loading

Walkthrough

Changes

Uh oh!

github-actionsBot commented Jul 3, 2026

Uh oh!

pkg-pr-newBot commented Jul 3, 2026

Uh oh!

github-actionsBot commented Jul 3, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

sukvvon commented Jul 3, 2026• edited by coderabbitai BotLoading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

nx-cloudBot commented Jul 3, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitaiBot commented Jul 3, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

github-actionsBot commented Jul 3, 2026

🚀 Changeset Version Preview

Uh oh!

pkg-pr-newBot commented Jul 3, 2026

Uh oh!

github-actionsBot commented Jul 3, 2026

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented Jul 3, 2026•
edited by coderabbitai Bot
Loading

nx-cloudBot commented Jul 3, 2026•
edited
Loading

coderabbitaiBot commented Jul 3, 2026•
edited
Loading