Skip to content

test(query-devtools/DevtoolsComponent): add smoke test for rendering without throwing#10679

Merged
sukvvon merged 1 commit into
mainfrom
test/query-devtools-devtools-component-smoke
May 9, 2026
Merged

test(query-devtools/DevtoolsComponent): add smoke test for rendering without throwing#10679
sukvvon merged 1 commit into
mainfrom
test/query-devtools-devtools-component-smoke

Conversation

@sukvvon
Copy link
Copy Markdown
Collaborator

@sukvvon sukvvon commented May 9, 2026

🎯 Changes

Add a smoke test for DevtoolsComponent, the lightweight wrapper that wires QueryDevtoolsContext, PiPProvider, and ThemeContext around the Solid Devtools body.

  • Verifies the component mounts without throwing.
  • Stubs matchMedia and ResizeObserver to satisfy jsdom.
  • Mocks solid-transition-group to bypass a transitive @solid-primitives/transition-group exports field that Vite cannot resolve.
  • Mocks an in-memory localStorage so createLocalStorage from @solid-primitives/storage does not leak across tests.

✅ 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 a Vitest + Solid test suite for the Devtools component. Includes environment stubs for localStorage, matchMedia, and ResizeObserver, a simplified transition pass-through, lifecycle setup/teardown that creates and clears a test client, and a smoke test verifying the component renders without errors with initialized client and connectivity props.

Review Change Stack

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 9, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Adds a Vitest + Solid test for DevtoolsComponent that mocks solid-transition-group, stubs browser globals (localStorage, matchMedia, ResizeObserver), initializes a QueryClient per test, and includes a smoke test that mounts the component without throwing.

Changes

DevtoolsComponent Test Suite

Layer / File(s) Summary
Imports & Mocking
packages/query-devtools/src/__tests__/DevtoolsComponent.test.tsx
Vitest and Solid testing utilities are imported; solid-transition-group is mocked to render children directly.
Test Infrastructure Setup
packages/query-devtools/src/__tests__/DevtoolsComponent.test.tsx
beforeEach stubs window.localStorage, matchMedia, and ResizeObserver and creates a QueryClient; afterEach unstubs globals, clears the in-memory storage, and calls queryClient.clear().
Rendering Smoke Test
packages/query-devtools/src/__tests__/DevtoolsComponent.test.tsx
A test renders DevtoolsComponent with the prepared QueryClient, queryFlavor="TanStack Query", version="5", and onlineManager and asserts it does not throw.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A tiny test hops to play,
Globals mocked to light the way,
QueryClient sprung anew,
Devtools mounts — the check is true! 🎉

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main change: adding a smoke test for DevtoolsComponent that verifies rendering without throwing.
Description check ✅ Passed The description follows the template structure with all required sections completed: detailed changes explanation, all checklist items checked, and appropriate release impact designation.
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 unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch test/query-devtools-devtools-component-smoke

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

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented May 9, 2026

View your CI Pipeline Execution ↗ for commit 22e1de5

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

☁️ Nx Cloud last updated this comment at 2026-05-09 19:18:59 UTC

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 9, 2026

🚀 Changeset Version Preview

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

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/query-devtools/src/__tests__/DevtoolsComponent.test.tsx`:
- Around line 14-29: Save the original window.localStorage descriptor before you
override it in the beforeEach, then add an afterEach that restores it (so the
mock doesn't leak between suites). Specifically, capture the original descriptor
(or value) of window.localStorage at the top of the test file or inside the
beforeEach setup, and in afterEach restore via Object.defineProperty(window,
'localStorage', originalDescriptor) or assign the saved value back; reference
the existing beforeEach override and ensure the cleanup runs after each test to
fully revert the mocked localStorage.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: bba7155b-0256-4431-8625-f8eae3dace98

📥 Commits

Reviewing files that changed from the base of the PR and between 4731c07 and 22e1de5.

📒 Files selected for processing (1)
  • packages/query-devtools/src/__tests__/DevtoolsComponent.test.tsx

Comment thread packages/query-devtools/src/__tests__/DevtoolsComponent.test.tsx
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 9, 2026

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 3c7572f

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 9, 2026

size-limit report 📦

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

@sukvvon sukvvon self-assigned this May 9, 2026
@sukvvon sukvvon force-pushed the test/query-devtools-devtools-component-smoke branch 2 times, most recently from bc099da to 853d206 Compare May 9, 2026 19:03
@sukvvon sukvvon changed the title test(query-devtools/DevtoolsComponent): add smoke test test(query-devtools/DevtoolsComponent): add smoke test for rendering without throwing May 9, 2026
@sukvvon sukvvon force-pushed the test/query-devtools-devtools-component-smoke branch from 853d206 to 25d56cf Compare May 9, 2026 19:06
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/query-devtools/src/__tests__/DevtoolsComponent.test.tsx`:
- Line 16: The mocked getItem implementation in DevtoolsComponent.test.tsx
currently returns storage[key] || null which converts falsy stored values (like
empty string or "0") into null; update the mock getItem so it returns the actual
stored value when the key exists and only returns null when the key is absent
(e.g., check presence with Object.prototype.hasOwnProperty.call(storage, key) or
key in storage and return storage[key] otherwise null) to match the Storage API
contract.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b78b156f-8b6e-4b05-bc97-61f96c906356

📥 Commits

Reviewing files that changed from the base of the PR and between bc099da and 853d206.

📒 Files selected for processing (1)
  • packages/query-devtools/src/__tests__/DevtoolsComponent.test.tsx

Comment thread packages/query-devtools/src/__tests__/DevtoolsComponent.test.tsx Outdated
@sukvvon sukvvon force-pushed the test/query-devtools-devtools-component-smoke branch from 25d56cf to b5c4305 Compare May 9, 2026 19:08
@sukvvon sukvvon force-pushed the test/query-devtools-devtools-component-smoke branch from b5c4305 to 3c7572f Compare May 9, 2026 19:14
@sukvvon sukvvon merged commit b79d7b4 into main May 9, 2026
8 checks passed
@sukvvon sukvvon deleted the test/query-devtools-devtools-component-smoke branch May 9, 2026 19:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant