Skip to content

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

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

test(preact-query-devtools): add tests for missing 'QueryClient', context provider, 'client' prop, and production fallback#10626
sukvvon merged 3 commits intomainfrom
test/preact-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 preact-query-devtools covering wrapper invariants and the production fallback in index.ts.

  • Enable test:lib / test:lib:dev scripts (package's vitest environment was already in place from prior work).
  • Add PreactQueryDevtools.test.tsx with 4 cases:
    • throws when no QueryClient is set.
    • mounts when QueryClient is provided via <QueryClientProvider>.
    • mounts when QueryClient is provided via the client prop.
    • returns null in non-development environments (production fallback in index.ts).
  • Add PreactQueryDevtoolsPanel.test.tsx with the same 4 cases for PreactQueryDevtoolsPanel.

The tests mock @tanstack/query-devtools to keep the wrapper isolated from the Solid-based core, since @preact/preset-vite cannot transform the core's .tsx files.

✅ 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

    • Added comprehensive Vitest + Testing Library tests for devtools components covering rendering behavior with and without a query client, lifecycle interactions, and environment-specific (development vs non-development) behavior to improve reliability.
  • Chores

    • Added npm scripts for testing: test:lib and test:lib:dev (watch mode) to simplify running the library test suite.

…text 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: be89bcea-0ad2-4a1a-b370-cfba80dcf17a

📥 Commits

Reviewing files that changed from the base of the PR and between 02c68b2 and 1c5596d.

📒 Files selected for processing (2)
  • packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx
  • packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/preact-query-devtools/src/tests/PreactQueryDevtoolsPanel.test.tsx

📝 Walkthrough

Walkthrough

Adds Vitest test scripts and two test suites for the preact-query-devtools package that mock @tanstack/query-devtools internals and verify devtools components' behavior with and without a QueryClient and across NODE_ENV values.

Changes

Preact Query Devtools Test Coverage

Layer / File(s) Summary
Test Infrastructure
packages/preact-query-devtools/package.json
Adds test:lib (vitest) and test:lib:dev (pnpm run test:lib --watch) scripts.
Test Mocks / Setup
packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx, packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx
Introduces Vitest mocks for @tanstack/query-devtools and TanstackQueryDevtoolsPanel, exposing spy functions for instance methods (mount, unmount, setClient, setOnClose, setErrorTypes, setTheme).
Component Tests
packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx
Adds tests verifying that PreactQueryDevtools throws without a QueryClient, mounts when provided via QueryClientProvider or client prop, and returns null when NODE_ENV !== 'development'.
Panel Component Tests
packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx
Adds tests verifying that PreactQueryDevtoolsPanel throws without a QueryClient, mounts when provided via QueryClientProvider or client prop, and returns null when NODE_ENV !== 'development'.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped into mocks with a twitch of my nose,
Spun vitest yarns where the devtools grow,
Mounts and spies dance in moonlight so steady,
Tests hum softly — a rabbit-made ready.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The PR title is clear, specific, and directly summarizes the main change: adding tests for PreactQueryDevtools covering wrapper invariants and production fallback.
Description check ✅ Passed The PR description follows the template with complete sections, details the specific test cases and rationale, addresses the checklist items, and specifies release impact.
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/preact-query-devtools-add-tests-for-client-and-production-fallback

Review rate limit: 4/5 reviews remaining, refill in 12 minutes.

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

@sukvvon sukvvon self-assigned this May 3, 2026
@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented May 3, 2026

View your CI Pipeline Execution ↗ for commit 1c5596d

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

☁️ Nx Cloud last updated this comment at 2026-05-03 04:48:05 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@10626

@tanstack/eslint-plugin-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 1c5596d

@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/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx`:
- Around line 37-57: Tests for PreactQueryDevtools currently only assert render
doesn't throw, which misses silent no-op mounts; update both test cases that
render <PreactQueryDevtools /> (the "provided via context" and "provided via
props" cases) to also assert that the module mount helper (mountMock) was
invoked after render. Locate the tests importing PreactQueryDevtools and
QueryClient and, after calling render(...) in both specs, add an expectation
that mountMock was called (e.g., expect(mountMock).toHaveBeenCalled()) to ensure
the component actually mounted when given a client via QueryClientProvider and
when passed via the client prop.

In
`@packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx`:
- Around line 36-58: The tests currently only assert that rendering
PreactQueryDevtoolsPanel does not throw; update both tests (the ones importing
PreactQueryDevtoolsPanel and creating a QueryClient) to also assert that the
mocked mount function was invoked: after rendering inside the
QueryClientProvider test and after rendering with the client prop, add
expectations that mountMock was called (e.g.,
expect(mountMock).toHaveBeenCalled() or toHaveBeenCalledTimes(1)); reference the
PreactQueryDevtoolsPanel import and the mountMock mock to locate where to add
these assertions.
🪄 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: bd4bcaf4-7ca0-4e63-a35c-79e321ef776f

📥 Commits

Reviewing files that changed from the base of the PR and between 3f0948b and 02c68b2.

📒 Files selected for processing (3)
  • packages/preact-query-devtools/package.json
  • packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx
  • packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx

@sukvvon sukvvon merged commit d5d69cb into main May 3, 2026
8 checks passed
@sukvvon sukvvon deleted the test/preact-query-devtools-add-tests-for-client-and-production-fallback branch May 3, 2026 04:50
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