Skip to content

test(react-query-devtools): extract shared test setup into 'beforeEach'#11026

Merged
sukvvon merged 1 commit into
mainfrom
test/react-query-devtools-shared-setup
Jul 4, 2026
Merged

test(react-query-devtools): extract shared test setup into 'beforeEach'#11026
sukvvon merged 1 commit into
mainfrom
test/react-query-devtools-shared-setup

Conversation

@sukvvon

@sukvvon sukvvon commented Jul 4, 2026

Copy link
Copy Markdown
Member

🎯 Changes

Removes the boilerplate repeated in every test of ReactQueryDevtools and ReactQueryDevtoolsPanel by hoisting the shared setup into beforeEach:

  • The dynamic await import(...) of the component and const queryClient = new QueryClient() were duplicated in each test. They now live in a single beforeEach, exposed via let bindings.
  • Test callbacks that no longer await anything drop their needless async.
  • The production (return null) test keeps its own import('..') after vi.resetModules() and renames the binding to ProductionDevtools/ProductionDevtoolsPanel to avoid shadowing.

No test behavior changes; all existing assertions are preserved.

✅ 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
    • Expanded coverage for the devtools components, including prop forwarding, default values, lifecycle behavior, and production-mode rendering.
    • Improved assertions for client handling, styling options, theme settings, and mount/unmount behavior.
    • Refactored test setup to reuse shared imports and fixtures, making the test suite cleaner and more consistent.

@nx-cloud

nx-cloud Bot commented Jul 4, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 3209261

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

☁️ Nx Cloud last updated this comment at 2026-07-04 06:21:16 UTC

@coderabbitai

coderabbitai Bot commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

Test files for ReactQueryDevtools and ReactQueryDevtoolsPanel are refactored to use shared beforeEach setup with dynamically imported, typed components and a shared QueryClient, replacing per-test imports. Test coverage is expanded for prop forwarding, defaulting behavior, constructor options, and lifecycle assertions.

Changes

Devtools test suite refactor and coverage expansion

Layer / File(s) Summary
Shared setup and initial prop forwarding
packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx
Introduces a shared, typed beforeEach import/setup for ReactQueryDevtools, and adds tests forwarding client, buttonPosition, position, initialIsOpen, errorTypes, theme, styleNonce, shadowDOMTarget, and hideDisabledQueries to the devtools instance.
Post-mount forwarding and lifecycle
packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx
Adds rerender tests confirming prop changes (buttonPosition, position, initialIsOpen, errorTypes, theme) propagate after mount, plus unmount and production-mode null-return assertions.
Panel shared setup and initial prop forwarding
packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx
Introduces a shared, typed beforeEach setup with QueryClient for ReactQueryDevtoolsPanel, adding tests for client, onClose defaulting, errorTypes defaulting, theme, setClient forwarding, and constructor options (styleNonce, shadowDOMTarget, hideDisabledQueries).
Panel rendering and lifecycle
packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx
Updates container height tests (default and overridden) and unmount/production null-return tests to use the shared setup.

Estimated code review effort: 2 (Simple) | ~12 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Test
  participant ReactQueryDevtools
  participant DevtoolsInstance

  Test->>ReactQueryDevtools: render with props (buttonPosition, position, initialIsOpen, errorTypes, theme)
  ReactQueryDevtools->>DevtoolsInstance: mount
  Test->>ReactQueryDevtools: rerender with changed props
  ReactQueryDevtools->>DevtoolsInstance: setButtonPosition / setPosition / setInitialIsOpen / setErrorTypes / setTheme
  Test->>ReactQueryDevtools: unmount
  ReactQueryDevtools->>DevtoolsInstance: unmount
Loading

Possibly related PRs

  • TanStack/query#10851: Overlapping test refactors and prop-wiring assertions in the same ReactQueryDevtools/ReactQueryDevtoolsPanel test files.
  • TanStack/query#11019: Adds similar "after mount" rerender tests verifying setter forwarding for the same props.
  • TanStack/query#10823: Extends the same devtools prop-wiring/defaulting test contract (initialIsOpen, errorTypes, theme, setClient, unmount).
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly matches the main change: refactoring shared devtools test setup into beforeEach.
Description check ✅ Passed The description follows the required template and includes changes, checklist, and release impact sections.
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.
✨ 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/react-query-devtools-shared-setup

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

@github-actions

github-actions Bot commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

🚀 Changeset Version Preview

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

@pkg-pr-new

pkg-pr-new Bot commented Jul 4, 2026

Copy link
Copy Markdown
More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 3209261

@github-actions

github-actions Bot commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

size-limit report 📦

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx (1)

54-75: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider strengthening the "default onClose" assertion.

The default-onClose test (lines 69-73) only checks expect.any(Function), which would pass even if the wrong function were forwarded. Since setOnClose always receives a wrapped closure (props.onClose ?? (() => {})), you could invoke the captured argument to assert it doesn't throw and returns undefined, giving stronger confidence it's actually a no-op.

🤖 Prompt for 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.

In `@packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx`
around lines 54 - 75, The default onClose test in ReactQueryDevtoolsPanel is too
weak because it only verifies that setOnCloseMock receives any function. Update
the test around ReactQueryDevtoolsPanel and setOnCloseMock to capture the
forwarded callback, invoke it, and assert it does not throw and returns
undefined so you verify the omitted-prop path באמת uses the no-op closure from
props.onClose ?? (() => {}).
🤖 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.

Nitpick comments:
In
`@packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx`:
- Around line 54-75: The default onClose test in ReactQueryDevtoolsPanel is too
weak because it only verifies that setOnCloseMock receives any function. Update
the test around ReactQueryDevtoolsPanel and setOnCloseMock to capture the
forwarded callback, invoke it, and assert it does not throw and returns
undefined so you verify the omitted-prop path באמת uses the no-op closure from
props.onClose ?? (() => {}).

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ad6d8ffd-ccfe-48e9-bb2c-cb727aba318f

📥 Commits

Reviewing files that changed from the base of the PR and between be8f11b and 3209261.

📒 Files selected for processing (2)
  • packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx
  • packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx

@sukvvon sukvvon merged commit 6a5bc45 into main Jul 4, 2026
9 checks passed
@sukvvon sukvvon deleted the test/react-query-devtools-shared-setup branch July 4, 2026 06:28
@sukvvon sukvvon self-assigned this Jul 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant