test(query-devtools/{DevtoolsComponent,DevtoolsPanelComponent}): add tests for rendering with all props by sukvvon · Pull Request #10752 · TanStack/query

sukvvon · 2026-05-22T04:53:27Z

🎯 Changes

Extend the smoke tests for DevtoolsComponent and DevtoolsPanelComponent to cover the explicit-theme branch (preference !== 'system') by adding an "all props" variant that exercises every optional prop in addition to the required ones. The existing required-only case is renamed to make the contrast explicit, and the new case asserts the component still renders without throwing when every supported prop is provided.

Added cases (1 per file):

DevtoolsComponent.test.tsx — should render without throwing when all props are provided
DevtoolsPanelComponent.test.tsx — should render the panel without throwing when all props are provided

✅ 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
- Improved test coverage for devtools UI to verify components render without errors when only required inputs are provided.
- Added tests confirming safe rendering when all optional configuration options (positioning, open state, error handling, query toggles, theme, close handler) are supplied.

coderabbitai · 2026-05-22T04:53:42Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8de98c14-474a-45e9-ae23-93bff4723814

📥 Commits

Reviewing files that changed from the base of the PR and between 769debe and 835511a.

📒 Files selected for processing (2)

packages/query-devtools/src/__tests__/DevtoolsComponent.test.tsx
packages/query-devtools/src/__tests__/DevtoolsPanelComponent.test.tsx

✅ Files skipped from review due to trivial changes (1)

packages/query-devtools/src/tests/DevtoolsComponent.test.tsx

📝 Walkthrough

Walkthrough

Adds focused tests to DevtoolsComponent and DevtoolsPanelComponent verifying they render without throwing when given only required props and when given the full set of optional props.

Changes

Devtools Component Test Coverage

Layer / File(s)	Summary
DevtoolsComponent test expansion `packages/query-devtools/src/__tests__/DevtoolsComponent.test.tsx`	Added a test case verifying rendering without throwing when only required props are provided. Expanded the second test to verify rendering with all optional props including button/panel positioning, `initialIsOpen`, `errorTypes`, `hideDisabledQueries`, and `theme`.
DevtoolsPanelComponent test expansion `packages/query-devtools/src/__tests__/DevtoolsPanelComponent.test.tsx`	Replaced the generic rendering test with a focused case for required-props-only. Added a new test case verifying rendering with all optional props including `errorTypes`, `hideDisabledQueries`, `theme`, and `onClose`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

package: query-devtools

Poem

🐰 Small tests hop in, tidy and bright,
required or full, they both pass the light,
No throws to be found, just green on the way,
A rabbit's small cheer for a safer day! 🥕

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding tests that cover rendering with all props for both DevtoolsComponent and DevtoolsPanelComponent.
Description check	✅ Passed	The description follows the required template, includes motivation (covering explicit-theme branch), lists added test cases, and marks the change as dev-only with checklist items completed.
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-component-smoke-all-props

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

nx-cloud · 2026-05-22T04:53:51Z

View your CI Pipeline Execution ↗ for commit 769debe

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

☁️ Nx Cloud last updated this comment at 2026-05-22 04:59:14 UTC

…tests for rendering with all props

github-actions · 2026-05-22T04:54:16Z

🚀 Changeset Version Preview

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

pkg-pr-new · 2026-05-22T04:57:53Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 835511a

github-actions · 2026-05-22T04:58:28Z

size-limit report 📦

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

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

test(query-devtools/{DevtoolsComponent,DevtoolsPanelComponent}): add …

835511a

…tests for rendering with all props

sukvvon force-pushed the test/query-devtools-component-smoke-all-props branch from 769debe to 835511a Compare May 22, 2026 04:54

sukvvon changed the title ~~test(query-devtools): expand 'DevtoolsComponent' and 'DevtoolsPanelComponent' smoke tests with all-props variant~~ test(query-devtools/{DevtoolsComponent,DevtoolsPanelComponent}): add tests for rendering with all props May 22, 2026

sukvvon self-assigned this May 22, 2026

sukvvon merged commit c00ea27 into main May 22, 2026
11 checks passed

sukvvon deleted the test/query-devtools-component-smoke-all-props branch May 22, 2026 05:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(query-devtools/{DevtoolsComponent,DevtoolsPanelComponent}): add tests for rendering with all props#10752

test(query-devtools/{DevtoolsComponent,DevtoolsPanelComponent}): add tests for rendering with all props#10752
sukvvon merged 1 commit into
mainfrom
test/query-devtools-component-smoke-all-props

sukvvon commented May 22, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 22, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested labels

Poem

Uh oh!

nx-cloud Bot commented May 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 22, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented May 22, 2026

Uh oh!

github-actions Bot commented May 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sukvvon commented May 22, 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 22, 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 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Changeset Version Preview

Uh oh!

pkg-pr-new Bot commented May 22, 2026

Uh oh!

github-actions Bot commented May 22, 2026

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented May 22, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 22, 2026 •

edited

Loading

nx-cloud Bot commented May 22, 2026 •

edited

Loading

github-actions Bot commented May 22, 2026 •

edited

Loading