Skip to content

test(react-query-devtools): add tests for missing 'QueryClient', context provider, 'client' prop, and production fallback#10627

Merged
sukvvon merged 3 commits intomainfrom
test/react-query-devtools-add-tests-for-client-and-production-fallback
May 3, 2026
Merged

test(react-query-devtools): add tests for missing 'QueryClient', context provider, 'client' prop, and production fallback#10627
sukvvon merged 3 commits intomainfrom
test/react-query-devtools-add-tests-for-client-and-production-fallback

Conversation

@sukvvon
Copy link
Copy Markdown
Collaborator

@sukvvon sukvvon commented May 3, 2026

🎯 Changes

Add tests for react-query-devtools covering wrapper invariants and the production fallback in index.ts, replacing the existing placeholder.

  • Replace placeholder devtools.test.tsx with ReactQueryDevtools.test.tsx containing 4 cases:
    • throws when no QueryClient is set.
    • mounts when QueryClient is provided via <QueryClientProvider> (asserts mount was called).
    • mounts when QueryClient is provided via the client prop (asserts mount was called).
    • returns null in non-development environments (production fallback in index.ts).
  • Add ReactQueryDevtoolsPanel.test.tsx with the same 4 cases for ReactQueryDevtoolsPanel.
  • Remove the standalone not-development.test.tsx; the production fallback case is now colocated with each component's tests.
  • File names match the component names (ReactQueryDevtools.test.tsx / ReactQueryDevtoolsPanel.test.tsx), aligning with the broader repo convention.

This mirrors the pattern recently introduced in preact-query-devtools (#10626) and brings the react-query-devtools test suite to parity.

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with `pnpm run test:lib` (8/8 passed).

🚀 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
    • Reorganized and expanded Vitest coverage for ReactQueryDevtools and ReactQueryDevtoolsPanel: added suites that mock devtools integration, verify error handling when no QueryClient is provided, confirm mounting with QueryClientProvider or direct client prop, and assert production builds evaluate to null. Removed older/obsolete tests that duplicated these checks.

…ext provider, 'client' prop, and production fallback
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 3, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3786256f-8501-40f5-8bf6-27cbe25cb418

📥 Commits

Reviewing files that changed from the base of the PR and between 27d38bf and 9828545.

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

📝 Walkthrough

Walkthrough

Consolidates and replaces legacy devtools tests by adding two focused Vitest suites—ReactQueryDevtools.test.tsx and ReactQueryDevtoolsPanel.test.tsx—which mock @tanstack/query-devtools, verify client provisioning/mount behavior, and assert production-mode exports evaluate to null; removes two older test files.

Changes

Test Suite Consolidation & Reorganization

Layer / File(s) Summary
Mock Infrastructure
packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx, packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx
Introduce vi.fn spies and mock implementations replacing TanstackQueryDevtools / TanstackQueryDevtoolsPanel, wiring instance methods (mount, unmount, setClient, setOnClose, setErrorTypes, setTheme, etc.) to track calls.
Error-path Tests
packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx, packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx
Add tests asserting rendering the components without a configured QueryClient throws: "No QueryClient set, use QueryClientProvider to set one".
Happy-path Tests
packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx, packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx
Add tests that rendering inside QueryClientProvider or with an explicit client prop does not throw and triggers mount on the mocked devtools instance.
Environment-specific Tests
packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx, packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx
Add tests that stub process.env.NODE_ENV = 'production', reset modules, import package entry, and assert the component export evaluates to null in non-development environments.
Cleanup (removals)
packages/react-query-devtools/src/__tests__/devtools.test.tsx, packages/react-query-devtools/src/__tests__/not-development.test.tsx
Remove legacy tests previously asserting open/close behavior and non-development fallback; coverage migrated into the new dedicated test suites.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Poem

🐰
Hop, hop, the tests unite,
Mocks in place, assertions tight,
Old files cleared, new suites sing,
Devtools checked in every ring,
🥕 Ready, steady — testing's bright!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately and concisely summarizes the main change: adding comprehensive tests for react-query-devtools covering missing QueryClient handling, context provider usage, client prop, and production fallback.
Description check ✅ Passed The description follows the template structure with detailed explanation of changes, completed checklist items, and proper release impact categorization as dev-only.
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/react-query-devtools-add-tests-for-client-and-production-fallback

Review rate limit: 3/5 reviews remaining, refill in 12 minutes and 8 seconds.

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

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented May 3, 2026

View your CI Pipeline Execution ↗ for commit 5fd8204

Command Status Duration Result
nx run-many --target=build --exclude=examples/*... ✅ Succeeded <1s View ↗

☁️ Nx Cloud last updated this comment at 2026-05-03 05:17:04 UTC

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 3, 2026

🚀 Changeset Version Preview

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

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 3, 2026

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 9828545

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 3, 2026

size-limit report 📦

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

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: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx`:
- Around line 65-70: The test relies on the runner NODE_ENV and is brittle; make
it deterministic by setting process.env.NODE_ENV to a non-development value
(e.g., 'production') and calling jest.resetModules() before dynamically
importing the module so the env-gated export in ReactQueryDevtools is
re-evaluated; save the original NODE_ENV, set it to 'production', call
jest.resetModules(), import('..') to get { ReactQueryDevtools }, assert it
returns null, then restore the original NODE_ENV and call jest.resetModules()
again to clean up.

In
`@packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx`:
- Around line 66-71: The test for ReactQueryDevtoolsPanel relies on the ambient
NODE_ENV; update the test so it explicitly stubs process.env.NODE_ENV =
'production', calls jest.resetModules() (or equivalent) and then imports the
module (const { ReactQueryDevtoolsPanel } = await import('..')) to force the
fallback branch, and finally restore the original NODE_ENV; target the test that
references ReactQueryDevtoolsPanel and ensure module reset happens before the
import so the non-development path is deterministic.
🪄 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: bf1f792b-03f1-42cd-9a76-3bb9b2a8816f

📥 Commits

Reviewing files that changed from the base of the PR and between d5d69cb and 27d38bf.

📒 Files selected for processing (4)
  • packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx
  • packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx
  • packages/react-query-devtools/src/__tests__/devtools.test.tsx
  • packages/react-query-devtools/src/__tests__/not-development.test.tsx
💤 Files with no reviewable changes (2)
  • packages/react-query-devtools/src/tests/devtools.test.tsx
  • packages/react-query-devtools/src/tests/not-development.test.tsx

@sukvvon sukvvon self-assigned this May 3, 2026
@sukvvon sukvvon merged commit 03eba38 into main May 3, 2026
11 of 12 checks passed
@sukvvon sukvvon deleted the test/react-query-devtools-add-tests-for-client-and-production-fallback branch May 3, 2026 05:19
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