test(query-devtools/Explorer): add test for rendering under the 'light' theme by sukvvon · Pull Request #10768 · TanStack/query

sukvvon · 2026-05-24T09:22:10Z

🎯 Changes

Extend Explorer.test.tsx with a test that locks the light-theme branch across the explorer and its inline action buttons. The existing suite only exercises the dark path, so the lightStyles function and the light arms of theme() === 'dark' ? darkStyles(css) : lightStyles(css) in Explorer, CopyButton, ClearArrayButton, DeleteItemButton, and ToggleValueButton were all uncovered.

Added cases (theme, 1):

should render without throwing under the "light" theme — renders the Explorer with theme: 'light' and a value that mounts every inline action button ({ items: ['a'], flag: true } covers ClearArrayButton, DeleteItemButton, and ToggleValueButton), asserting it renders without throwing.

renderExplorer now takes an optional options.theme (defaults to 'dark' to preserve the existing cases unchanged).

✅ 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
- Enhanced test coverage to verify Explorer component renders correctly with both dark and light themes.

…t' theme

nx-cloud · 2026-05-24T09:22:34Z

View your CI Pipeline Execution ↗ for commit cdddc18

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

☁️ Nx Cloud last updated this comment at 2026-05-24 09:26:55 UTC

github-actions · 2026-05-24T09:22:50Z

🚀 Changeset Version Preview

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

coderabbitai · 2026-05-24T09:23:14Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9f9ade8f-c45c-496e-9989-38415a1722aa

📥 Commits

Reviewing files that changed from the base of the PR and between ba6e7be and cdddc18.

📒 Files selected for processing (1)

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

📝 Walkthrough

Walkthrough

The PR extends the renderExplorer test helper to accept an optional theme parameter, making the helper theme-aware. The helper now passes the derived theme (defaulting to 'dark') to ThemeContext.Provider. A new test suite verifies that the Explorer renders without throwing when rendered under the 'light' theme.

Changes

Explorer theme testing support

Layer / File(s)	Summary
Theme-aware test helper and light theme verification `packages/query-devtools/src/__tests__/Explorer.test.tsx`	`renderExplorer` helper accepts optional `theme` parameter and passes it to `ThemeContext.Provider`. New test suite verifies Explorer renders successfully under both `'dark'` (default) and `'light'` themes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

TanStack/query#10714: Both PRs modify the renderExplorer test helper and its ThemeContext.Provider usage to support theme-aware Explorer rendering tests across different themes.

Poem

🐰 A helper hops through themes so bright,
Now testing dark, and testing light,
No errors thrown, the tests all pass,
The Explorer shines in every class! ✨

🚥 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 a test for light theme rendering in Explorer, which is the core purpose of this PR.
Description check	✅ Passed	The description follows the required template with all sections completed: Changes are detailed, checklist items are marked appropriately, and release impact is clearly indicated as dev-only.
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-explorer-light-theme

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

pkg-pr-new · 2026-05-24T09:25:38Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: cdddc18

github-actions · 2026-05-24T09:26:20Z

size-limit report 📦

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

test(query-devtools/Explorer): add test for rendering under the 'ligh…
cdddc18
…t' theme

github-actionsBot added the package: query-devtools label May 24, 2026

sukvvon self-assigned this May 24, 2026

sukvvon merged commit 63b3a72 into mainMay 24, 2026
12 checks passed

sukvvon deleted the test/query-devtools-explorer-light-theme branch May 24, 2026 16:59

Navigation Menu

Uh oh!

Uh oh!

test(query-devtools/Explorer): add test for rendering under the 'light' theme - #10768

test(query-devtools/Explorer): add test for rendering under the 'light' theme#10768
sukvvon merged 1 commit into
mainfrom
test/query-devtools-explorer-light-theme

sukvvon commented May 24, 2026•
edited by coderabbitai Bot
Loading

Uh oh!

nx-cloudBot commented May 24, 2026•
edited
Loading

Uh oh!

github-actionsBot commented May 24, 2026

Uh oh!

coderabbitaiBot commented May 24, 2026•
edited
Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

❌ Failed checks (1 warning)

Uh oh!

pkg-pr-newBot commented May 24, 2026

Uh oh!

github-actionsBot commented May 24, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

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

Uh oh!

Uh oh!

github-actionsBot commented May 24, 2026

🚀 Changeset Version Preview

Uh oh!

coderabbitaiBot commented May 24, 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!

pkg-pr-newBot commented May 24, 2026

Uh oh!

github-actionsBot commented May 24, 2026

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented May 24, 2026•
edited by coderabbitai Bot
Loading

nx-cloudBot commented May 24, 2026•
edited
Loading

coderabbitaiBot commented May 24, 2026•
edited
Loading