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

sukvvon · sukvvon · commit b87396965e32 · 2026-05-03T09:44:45.000+09:00
diff --git a/packages/svelte-query-devtools/package.json b/packages/svelte-query-devtools/package.json
@@ -24,6 +24,8 @@
     "compile": "tsc --build",
     "test:types": "svelte-check --tsconfig ./tsconfig.json",
     "test:eslint": "eslint --concurrency=auto ./src",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm run test:lib --watch",
     "test:build": "publint --strict && attw --pack",
     "build": "svelte-package --input ./src --output ./dist"
   },
@@ -53,6 +55,7 @@
     "@sveltejs/package": "^2.4.0",
     "@sveltejs/vite-plugin-svelte": "^5.1.1",
     "@tanstack/svelte-query": "workspace:*",
+    "@testing-library/svelte": "^5.2.8",
     "@typescript-eslint/parser": "^8.48.0",
     "eslint-plugin-svelte": "^3.11.0",
     "svelte": "^5.39.3",
diff --git a/packages/svelte-query-devtools/tests/Devtools.svelte.test.ts b/packages/svelte-query-devtools/tests/Devtools.svelte.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '@testing-library/svelte'
+import { QueryClient } from '@tanstack/svelte-query'
+import SvelteQueryDevtools from '../src/Devtools.svelte'
+
+describe('SvelteQueryDevtools', () => {
+  it('should render the parent container without throwing in non-development environments', () => {
+    const queryClient = new QueryClient()
+
+    const { container } = render(SvelteQueryDevtools, {
+      props: { client: queryClient },
+    })
+
+    expect(
+      container.querySelector('.tsqd-parent-container'),
+    ).toBeInTheDocument()
+  })
+})
diff --git a/packages/svelte-query-devtools/tests/test-setup.ts b/packages/svelte-query-devtools/tests/test-setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'
diff --git a/packages/svelte-query-devtools/tsconfig.json b/packages/svelte-query-devtools/tsconfig.json
@@ -4,6 +4,6 @@
     "outDir": "./dist-ts",
     "rootDir": "."
   },
-  "include": ["src", "*.config.*", "package.json"],
+  "include": ["src", "tests", "*.config.*", "package.json"],
   "references": [{ "path": "../query-devtools" }, { "path": "../svelte-query" }]
 }
diff --git a/packages/svelte-query-devtools/vite.config.ts b/packages/svelte-query-devtools/vite.config.ts
@@ -1,8 +1,11 @@
 import { svelte } from '@sveltejs/vite-plugin-svelte'
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vitest/config'
+import { svelteTesting } from '@testing-library/svelte/vite'
+
+import packageJson from './package.json'
 
 export default defineConfig({
-  plugins: [svelte()],
+  plugins: [svelte(), svelteTesting()],
   // fix from https://github.com/vitest-dev/vitest/issues/6992#issuecomment-2509408660
   resolve: {
     conditions: ['@tanstack/custom-condition'],
@@ -14,4 +17,17 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    name: packageJson.name,
+    dir: './tests',
+    watch: false,
+    environment: 'jsdom',
+    setupFiles: ['./tests/test-setup.ts'],
+    coverage: {
+      enabled: true,
+      provider: 'istanbul',
+      include: ['src/**/*'],
+    },
+    typecheck: { enabled: true },
+  },
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+import '@testing-library/jest-dom/vitest'`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,6 @@`
`4`	`4`	`"outDir": "./dist-ts",`
`5`	`5`	`"rootDir": "."`
`6`	`6`	`},`
`7`		`- "include": ["src", ".config.", "package.json"],`
	`7`	`+ "include": ["src", "tests", ".config.", "package.json"],`
`8`	`8`	`"references": [{ "path": "../query-devtools" }, { "path": "../svelte-query" }]`
`9`	`9`	`}`