test(solid-query-devtools/devtoolsPanel): use 'toHaveStyle' matcher in the 'style' merge cases by sukvvon · Pull Request #10846 · TanStack/query

sukvvon · 2026-05-31T15:46:38Z

🎯 Changes

Replace the manual as HTMLElement casts and .style.height/.style.width checks in the two style merge test cases with the toHaveStyle matcher from @testing-library/jest-dom.

This is now possible thanks to #10845, which added test-setup.ts to the tsconfig include so jest-dom matcher type augmentations are picked up.

Before:

const panel = container.querySelector(
  '.tsqd-parent-container',
) as HTMLElement

expect(panel.style.height).toBe('500px')
expect(panel.style.width).toBe('300px')

After:

expect(container.querySelector('.tsqd-parent-container')).toHaveStyle({
  height: '500px',
  width: '300px',
})

Benefits:

No as HTMLElement cast — the matcher accepts Element | null directly
Single expect reads the assertion as one logical step
Null-safe — toHaveStyle reports a clear failure when the element is missing

✅ 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
- Updated devtools panel styling test assertions for improved accuracy and reliability.

…n the 'style' merge cases

coderabbitai · 2026-05-31T15:46:50Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 00d6e790-a662-485b-8a16-2157e9435683

📥 Commits

Reviewing files that changed from the base of the PR and between dccede4 and 9c93f75.

📒 Files selected for processing (1)

packages/solid-query-devtools/src/__tests__/devtoolsPanel.test.tsx

📝 Walkthrough

Walkthrough

Test assertions in the devtools panel test file were refactored to validate .tsqd-parent-container styling using the toHaveStyle matcher instead of directly accessing and asserting on panel.style properties, removing the intermediate variable references.

Changes

Container styling test assertions

Layer / File(s)	Summary
Container styling assertions refactor `packages/solid-query-devtools/src/__tests__/devtoolsPanel.test.tsx`	Default and overridden `.tsqd-parent-container` height/width test assertions were changed from `panel.style.*` property checks to `toHaveStyle({ height, width })` matcher calls, removing intermediate `panel` variable references.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

TanStack/query#10828: Both PRs update packages/solid-query-devtools/src/__tests__/devtoolsPanel.test.tsx to validate .tsqd-parent-container sizing behavior driven by the style prop (including default-vs-override height/width via toHaveStyle).
TanStack/query#10845: The main PR updates devtoolsPanel tests to use toHaveStyle assertions, which depends on jest-dom matcher typings enabled by the retrieved PR's tsconfig inclusion of test-setup.ts.

Suggested labels

package: query-devtools

Poem

A rabbit hops through test assertions so fine,
Swapping styles for matchers—oh, what a design!
toHaveStyle now checks with elegant grace,
Container heights measured in the right place. 🐰

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: replacing manual style checks with the toHaveStyle matcher in specific test cases.
Description check	✅ Passed	The description comprehensively covers the changes, includes before/after code examples, explains the benefits, and completes all required checklist items.
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/solid-query-devtools-devtoolspanel-use-tohavestyle-matcher

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

nx-cloud · 2026-05-31T15:47:05Z

View your CI Pipeline Execution ↗ for commit 9c93f75

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

☁️ Nx Cloud last updated this comment at 2026-05-31 15:50:16 UTC

github-actions · 2026-05-31T15:47:14Z

🚀 Changeset Version Preview

2 package(s) bumped directly, 23 bumped as dependents.

🟩 Patch bumps

Package	Version	Reason
`@tanstack/lit-query`	0.2.6 → 0.2.7	Changeset
`@tanstack/query-devtools`	5.100.14 → 5.100.15	Changeset
`@tanstack/angular-query-experimental`	5.100.14 → 5.100.15	Dependent
`@tanstack/angular-query-persist-client`	5.100.14 → 5.100.15	Dependent
`@tanstack/eslint-plugin-query`	5.100.14 → 5.100.15	Dependent
`@tanstack/preact-query`	5.100.14 → 5.100.15	Dependent
`@tanstack/preact-query-devtools`	5.100.14 → 5.100.15	Dependent
`@tanstack/preact-query-persist-client`	5.100.14 → 5.100.15	Dependent
`@tanstack/query-async-storage-persister`	5.100.14 → 5.100.15	Dependent
`@tanstack/query-broadcast-client-experimental`	5.100.14 → 5.100.15	Dependent
`@tanstack/query-core`	5.100.14 → 5.100.15	Dependent
`@tanstack/query-persist-client-core`	5.100.14 → 5.100.15	Dependent
`@tanstack/query-sync-storage-persister`	5.100.14 → 5.100.15	Dependent
`@tanstack/react-query`	5.100.14 → 5.100.15	Dependent
`@tanstack/react-query-devtools`	5.100.14 → 5.100.15	Dependent
`@tanstack/react-query-next-experimental`	5.100.14 → 5.100.15	Dependent
`@tanstack/react-query-persist-client`	5.100.14 → 5.100.15	Dependent
`@tanstack/solid-query`	5.100.14 → 5.100.15	Dependent
`@tanstack/solid-query-devtools`	5.100.14 → 5.100.15	Dependent
`@tanstack/solid-query-persist-client`	5.100.14 → 5.100.15	Dependent
`@tanstack/svelte-query`	6.1.33 → 6.1.34	Dependent
`@tanstack/svelte-query-devtools`	6.1.33 → 6.1.34	Dependent
`@tanstack/svelte-query-persist-client`	6.1.33 → 6.1.34	Dependent
`@tanstack/vue-query`	5.100.14 → 5.100.15	Dependent
`@tanstack/vue-query-devtools`	6.1.33 → 6.1.34	Dependent

pkg-pr-new · 2026-05-31T15:50:00Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 9c93f75

github-actions · 2026-05-31T15:50:17Z

size-limit report 📦

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

test(solid-query-devtools/devtoolsPanel): use 'toHaveStyle' matcher i…

9c93f75

…n the 'style' merge cases

sukvvon self-assigned this May 31, 2026

sukvvon merged commit 2c4d9b1 into main May 31, 2026
9 checks passed

sukvvon deleted the test/solid-query-devtools-devtoolspanel-use-tohavestyle-matcher branch May 31, 2026 15:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(solid-query-devtools/devtoolsPanel): use 'toHaveStyle' matcher in the 'style' merge cases#10846

test(solid-query-devtools/devtoolsPanel): use 'toHaveStyle' matcher in the 'style' merge cases#10846
sukvvon merged 1 commit into
mainfrom
test/solid-query-devtools-devtoolspanel-use-tohavestyle-matcher

sukvvon commented May 31, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 31, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

Uh oh!

nx-cloud Bot commented May 31, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 31, 2026

Uh oh!

pkg-pr-new Bot commented May 31, 2026

Uh oh!

github-actions Bot commented May 31, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sukvvon commented May 31, 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 31, 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

Suggested labels

Poem

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented May 31, 2026

🚀 Changeset Version Preview

🟩 Patch bumps

Uh oh!

pkg-pr-new Bot commented May 31, 2026

Uh oh!

github-actions Bot commented May 31, 2026

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented May 31, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 31, 2026 •

edited

Loading

nx-cloud Bot commented May 31, 2026 •

edited

Loading