Skip to content

chore(svelte-query-devtools): set up vitest environment with '@testing-library/svelte' and a smoke test#10624

Merged
sukvvon merged 1 commit intomainfrom
chore/svelte-query-devtools-set-up-vitest-environment
May 3, 2026
Merged

chore(svelte-query-devtools): set up vitest environment with '@testing-library/svelte' and a smoke test#10624
sukvvon merged 1 commit intomainfrom
chore/svelte-query-devtools-set-up-vitest-environment

Conversation

@sukvvon
Copy link
Copy Markdown
Collaborator

@sukvvon sukvvon commented May 3, 2026

🎯 Changes

Set up the vitest environment for svelte-query-devtools, following the same pattern used by svelte-query and svelte-query-persist-client.

  • Add test:lib / test:lib:dev scripts and @testing-library/svelte devDependency.
  • Add a test block to vite.config.ts with svelteTesting() plugin, jsdom environment, and a tests/test-setup.ts setup file.
  • Include tests directory in tsconfig.json.
  • Add a smoke test for SvelteQueryDevtools to verify the environment works end-to-end.

This unblocks future tests for the Svelte devtools wrapper without scope-creeping into wrapper-invariant cases (those will land in a follow-up PR).

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally (per-package: `pnpm test:lib` passes for `svelte-query-devtools`, and unaffected packages such as `svelte-query` continue to pass).

🚀 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 test suite for the devtools component to verify it renders correctly in a simulated browser environment.
    • Enabled DOM matcher support for richer assertions.
  • Chores

    • Added test scripts for running library tests (standard and watch modes).
    • Configured the test runner, coverage collection, and TypeScript inclusion of test files.

@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: 0068ae74-89e0-46d8-bb9c-9bbe1b669a0d

📥 Commits

Reviewing files that changed from the base of the PR and between b873969 and d2e16da.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (5)
  • packages/svelte-query-devtools/package.json
  • packages/svelte-query-devtools/tests/Devtools.svelte.test.ts
  • packages/svelte-query-devtools/tests/test-setup.ts
  • packages/svelte-query-devtools/tsconfig.json
  • packages/svelte-query-devtools/vite.config.ts
✅ Files skipped from review due to trivial changes (2)
  • packages/svelte-query-devtools/tsconfig.json
  • packages/svelte-query-devtools/tests/test-setup.ts
🚧 Files skipped from review as they are similar to previous changes (3)
  • packages/svelte-query-devtools/tests/Devtools.svelte.test.ts
  • packages/svelte-query-devtools/vite.config.ts
  • packages/svelte-query-devtools/package.json

📝 Walkthrough

Walkthrough

Adds Vitest-based testing for svelte-query-devtools: test scripts and dependency, tsconfig inclusion of tests, Vitest-enabled Vite config with jsdom/setup, a test setup import, and a component render test asserting the devtools container exists.

Changes

Testing Infrastructure for svelte-query-devtools

Layer / File(s) Summary
Scripts & DevDeps
packages/svelte-query-devtools/package.json
Added test:lib and test:lib:dev scripts; added @testing-library/svelte to devDependencies.
TypeScript Includes
packages/svelte-query-devtools/tsconfig.json
Included tests directory in TypeScript include globs.
Vite / Vitest Wiring
packages/svelte-query-devtools/vite.config.ts
Switched defineConfig import to vitest/config, added svelteTesting() plugin alongside svelte(), and added a test block (jsdom env, ./tests dir, setup file, coverage, typecheck).
Test Setup
packages/svelte-query-devtools/tests/test-setup.ts
Imported @testing-library/jest-dom/vitest to enable DOM matchers in Vitest.
Component Test
packages/svelte-query-devtools/tests/Devtools.svelte.test.ts
Added a test that renders SvelteQueryDevtools with a QueryClient and asserts presence of .tsqd-parent-container in the DOM.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

I’m a rabbit with a tiny test,
Rendering devtools—what a quest!
Vitest hops in, dom in tow,
Assertions bloom, coverage grows,
🐰✨ tests pass—let’s bound and jest!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: setting up vitest environment with testing library and a smoke test for svelte-query-devtools.
Description check ✅ Passed The description comprehensively covers all required sections with detailed changes, completed checklist items, and proper release impact classification.
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 chore/svelte-query-devtools-set-up-vitest-environment

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get your free trial and get 200 agent minutes per Slack user (a $50 value).


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

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 b873969

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

☁️ Nx Cloud last updated this comment at 2026-05-03 01:22:51 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.

@sukvvon sukvvon self-assigned this May 3, 2026
@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@10624

@tanstack/eslint-plugin-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: d2e16da

@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.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/svelte-query-devtools/package.json (1)

54-64: ⚠️ Potential issue | 🟠 Major

Add @testing-library/jest-dom to devDependencies.

tests/test-setup.ts imports @testing-library/jest-dom/vitest, but this dependency is not declared in this package's package.json. While the workspace root includes it, nested packages in pnpm monorepos should explicitly declare their own dependencies. Add @testing-library/jest-dom to the devDependencies section to ensure the import resolves correctly and for proper dependency management.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/svelte-query-devtools/package.json` around lines 54 - 64, The
package is missing the `@testing-library/jest-dom` devDependency referenced by
tests/test-setup.ts; update the package.json devDependencies (the
"devDependencies" object shown) by adding "@testing-library/jest-dom" with an
appropriate version (match workspace root or latest compatible) so the import
"@testing-library/jest-dom/vitest" in tests/test-setup.ts resolves correctly
within this package.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@packages/svelte-query-devtools/package.json`:
- Around line 54-64: The package is missing the `@testing-library/jest-dom`
devDependency referenced by tests/test-setup.ts; update the package.json
devDependencies (the "devDependencies" object shown) by adding
"@testing-library/jest-dom" with an appropriate version (match workspace root or
latest compatible) so the import "@testing-library/jest-dom/vitest" in
tests/test-setup.ts resolves correctly within this package.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f96a5fa2-8a13-4a3e-9ce6-29501f8a9979

📥 Commits

Reviewing files that changed from the base of the PR and between 9800c8f and b873969.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (5)
  • packages/svelte-query-devtools/package.json
  • packages/svelte-query-devtools/tests/Devtools.svelte.test.ts
  • packages/svelte-query-devtools/tests/test-setup.ts
  • packages/svelte-query-devtools/tsconfig.json
  • packages/svelte-query-devtools/vite.config.ts

@sukvvon sukvvon force-pushed the chore/svelte-query-devtools-set-up-vitest-environment branch from b873969 to d2e16da Compare May 3, 2026 01:20
@sukvvon sukvvon merged commit 529e590 into main May 3, 2026
8 checks passed
@sukvvon sukvvon deleted the chore/svelte-query-devtools-set-up-vitest-environment branch May 3, 2026 01:25
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