test(query-devtools/Devtools): add tests for initial state from 'initialIsOpen' and 'localStore.open' by sukvvon · Pull Request #10682 · TanStack/query

sukvvon · 2026-05-10T14:51:49Z

🎯 Changes

Add the first integration tests for the Devtools body component, covering the initial open/closed state derived from initialIsOpen and localStore.open.

Verifies the open devtools button renders by default.
Verifies the panel is hidden by default.
Verifies the panel renders when initialIsOpen is true.
Verifies the panel renders when localStore.open is 'true'.
Verifies localStore.open === 'false' overrides initialIsOpen (priority).

The test file introduces the integration testbed shared by upcoming PRs in this series:

solid-transition-group mock to bypass a transitive @solid-primitives/transition-group exports field that Vite cannot resolve.
goober mock with a no-op factory to avoid heavy css template compilation on each mount.
localStorage, matchMedia, ResizeObserver stubs and a PointerEvent polyfill for jsdom.
renderDevtools helper that wires QueryDevtoolsContext, PiPProvider, and ThemeContext and renders the Devtools body directly.

✅ 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 suite for the Devtools component, verifying initialization and rendering behavior across multiple configuration scenarios.

…ialIsOpen' and 'localStore.open'

coderabbitai · 2026-05-10T14:52:03Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 75c5f486-b13a-4ccf-a2b8-bd370d9ec4e6

📥 Commits

Reviewing files that changed from the base of the PR and between 90fbff8 and 2dd9f5e.

📒 Files selected for processing (1)

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

📝 Walkthrough

Walkthrough

This PR adds a comprehensive Vitest + Solid Testing Library test suite for the Devtools component. The suite stubs browser APIs and third-party module dependencies, establishes shared test setup and teardown, provides a renderDevtools helper that wires all required context providers, and validates initial rendering behavior across five test cases covering button visibility, panel visibility defaults, and localStorage interaction.

Changes

Devtools Component Tests

Layer / File(s)	Summary
Module Stubs `packages/query-devtools/src/__tests__/Devtools.test.tsx`	Vitest imports mocks `solid-transition-group` as a passthrough and `goober` as a no-op CSS template processor to avoid build and mount-time side effects.
Test Setup & Teardown `packages/query-devtools/src/__tests__/Devtools.test.tsx`	Global polyfills for `PointerEvent`, `localStorage`, `matchMedia`, and `ResizeObserver` are installed. beforeEach creates a `QueryClient` and captures document font size; afterEach clears storage, resets globals, and restores managers.
Render Helper `packages/query-devtools/src/__tests__/Devtools.test.tsx`	`renderDevtools(overrides, initialStorage)` seeds `localStorage`, creates a `localStore` via `createLocalStorage`, and renders `Devtools` wrapped in `QueryDevtoolsContext.Provider`, `PiPProvider`, and `ThemeContext`.
Initial State Tests `packages/query-devtools/src/__tests__/Devtools.test.tsx`	Five tests verify default button visibility, default panel hidden state, panel shown when `initialIsOpen` is true, panel shown when `localStore.open` is true, and localStore state correctly overriding `initialIsOpen`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

TanStack/query#10680: Both PRs add Vitest test suites for related query-devtools components and reuse the same test stubs/mocks (localStorage, matchMedia, ResizeObserver, solid-transition-group, goober) and setup patterns.

Poem

🐰 A test suite hops into view,
With mocks and stubs, the devtools ring true,
Buttons and panels, state flowing right,
localStorage remembered, initial state bright,
Quality checked by a fuzzy review! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 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 (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding tests for the Devtools component's initial state behavior based on 'initialIsOpen' and 'localStore.open' props.
Description check	✅ Passed	The description comprehensively covers the changes with all required template sections completed, including detailed test coverage explanations and a fully checked checklist.
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-initial-state

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

Generate code and open pull requests
Plan features and break down work
Investigate incidents and troubleshoot customer tickets together
Automate recurring tasks and respond to alerts with triggers
Summarize progress and report instantly

Built for teams:

Shared memory across your entire org—no repeating context
Per-thread sandboxes to safely plan and execute work
Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

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

nx-cloud · 2026-05-10T14:52:19Z

View your CI Pipeline Execution ↗ for commit aec50b7

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

☁️ Nx Cloud last updated this comment at 2026-05-10 14:57:06 UTC

github-actions · 2026-05-10T14:52:36Z

🚀 Changeset Version Preview

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

pkg-pr-new · 2026-05-10T14:55:23Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 2dd9f5e

github-actions · 2026-05-10T14:55:34Z

size-limit report 📦

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

test(query-devtools/Devtools): add tests for initial state from 'init…

aec50b7

…ialIsOpen' and 'localStore.open'

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

sukvvon self-assigned this May 10, 2026

ci: apply automated fixes

2dd9f5e

sukvvon merged commit f46b22a into main May 10, 2026
8 checks passed

sukvvon deleted the test/query-devtools-devtools-initial-state branch May 10, 2026 14:58

coderabbitai Bot mentioned this pull request May 10, 2026

test(query-devtools/Devtools): add tests for open and close interactions and 'localStorage' persistence #10683

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(query-devtools/Devtools): add tests for initial state from 'initialIsOpen' and 'localStore.open'#10682

test(query-devtools/Devtools): add tests for initial state from 'initialIsOpen' and 'localStore.open'#10682
sukvvon merged 2 commits into
mainfrom
test/query-devtools-devtools-initial-state

sukvvon commented May 10, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 10, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloud Bot commented May 10, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 10, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented May 10, 2026

Uh oh!

github-actions Bot commented May 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

❌ Failed checks (1 warning)

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented May 10, 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 10, 2026

Uh oh!

github-actions Bot commented May 10, 2026

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented May 10, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 10, 2026 •

edited

Loading

nx-cloud Bot commented May 10, 2026 •

edited

Loading

github-actions Bot commented May 10, 2026 •

edited

Loading