From 3f0948b51b81209540ef0c48d2c6e0cae2b8d8d8 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Sun, 3 May 2026 10:58:53 +0900 Subject: [PATCH 1/4] test(svelte-query-devtools): add tests for missing 'QueryClient', context provider, and 'client' prop (#10625) --- .../tests/Devtools.svelte.test.ts | 21 +++++++++++++++++++ .../tests/Wrapper.svelte | 15 +++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 packages/svelte-query-devtools/tests/Wrapper.svelte diff --git a/packages/svelte-query-devtools/tests/Devtools.svelte.test.ts b/packages/svelte-query-devtools/tests/Devtools.svelte.test.ts index 6808633dad..dc773f5430 100644 --- a/packages/svelte-query-devtools/tests/Devtools.svelte.test.ts +++ b/packages/svelte-query-devtools/tests/Devtools.svelte.test.ts @@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest' import { render } from '@testing-library/svelte' import { QueryClient } from '@tanstack/svelte-query' import SvelteQueryDevtools from '../src/Devtools.svelte' +import Wrapper from './Wrapper.svelte' describe('SvelteQueryDevtools', () => { it('should render the parent container without throwing in non-development environments', () => { @@ -15,4 +16,24 @@ describe('SvelteQueryDevtools', () => { container.querySelector('.tsqd-parent-container'), ).toBeInTheDocument() }) + + it('should throw an error if no query client has been set', () => { + expect(() => render(SvelteQueryDevtools)).toThrow( + 'No QueryClient was found in Svelte context. Did you forget to wrap your component with QueryClientProvider?', + ) + }) + + it('should not throw an error if query client is provided via context', () => { + const queryClient = new QueryClient() + + expect(() => render(Wrapper, { props: { queryClient } })).not.toThrow() + }) + + it('should not throw an error if query client is provided via props', () => { + const queryClient = new QueryClient() + + expect(() => + render(SvelteQueryDevtools, { props: { client: queryClient } }), + ).not.toThrow() + }) }) diff --git a/packages/svelte-query-devtools/tests/Wrapper.svelte b/packages/svelte-query-devtools/tests/Wrapper.svelte new file mode 100644 index 0000000000..35c5cf1517 --- /dev/null +++ b/packages/svelte-query-devtools/tests/Wrapper.svelte @@ -0,0 +1,15 @@ + + + + + From d5d69cbfcea0f6e189ea85c4d49dc65751929d72 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Sun, 3 May 2026 13:50:27 +0900 Subject: [PATCH 2/4] test(preact-query-devtools): add tests for missing 'QueryClient', context provider, 'client' prop, and production fallback (#10626) * test(preact-query-devtools): add tests for missing 'QueryClient', context provider, 'client' prop, and production fallback * ci: apply automated fixes * test(preact-query-devtools): assert 'mount' call in client provisioning tests --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- packages/preact-query-devtools/package.json | 2 + .../__tests__/PreactQueryDevtools.test.tsx | 71 ++++++++++++++++++ .../PreactQueryDevtoolsPanel.test.tsx | 72 +++++++++++++++++++ 3 files changed, 145 insertions(+) create mode 100644 packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx create mode 100644 packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx diff --git a/packages/preact-query-devtools/package.json b/packages/preact-query-devtools/package.json index cbcbe3f949..f9a03c29de 100644 --- a/packages/preact-query-devtools/package.json +++ b/packages/preact-query-devtools/package.json @@ -27,6 +27,8 @@ "test:types:ts59": "node ../../node_modules/typescript59/lib/tsc.js --build tsconfig.legacy.json", "test:types:tscurrent": "tsc --build", "test:types:ts60": "node ../../node_modules/typescript60/lib/tsc.js --build tsconfig.legacy.json", + "test:lib": "vitest", + "test:lib:dev": "pnpm run test:lib --watch", "test:build": "publint --strict && attw --pack", "build": "tsup --tsconfig tsconfig.prod.json", "build:dev": "tsup --watch" diff --git a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx new file mode 100644 index 0000000000..ad60e9c3d0 --- /dev/null +++ b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx @@ -0,0 +1,71 @@ +import { beforeEach, describe, expect, it, vi } from 'vitest' +import { render } from '@testing-library/preact' +import { QueryClient, QueryClientProvider } from '@tanstack/preact-query' +import type { TanstackQueryDevtools } from '@tanstack/query-devtools' + +const mountMock = vi.fn() +const unmountMock = vi.fn() +const setClientMock = vi.fn() +const setButtonPositionMock = vi.fn() +const setPositionMock = vi.fn() +const setInitialIsOpenMock = vi.fn() +const setErrorTypesMock = vi.fn() +const setThemeMock = vi.fn() + +vi.mock('@tanstack/query-devtools', () => ({ + TanstackQueryDevtools: vi.fn(function (this: TanstackQueryDevtools) { + this.mount = mountMock + this.unmount = unmountMock + this.setClient = setClientMock + this.setButtonPosition = setButtonPositionMock + this.setPosition = setPositionMock + this.setInitialIsOpen = setInitialIsOpenMock + this.setErrorTypes = setErrorTypesMock + this.setTheme = setThemeMock + }), +})) + +describe('PreactQueryDevtools', () => { + beforeEach(() => { + vi.clearAllMocks() + }) + + it('should throw an error if no query client has been set', async () => { + const { PreactQueryDevtools } = await import('../PreactQueryDevtools') + + expect(() => render()).toThrow( + 'No QueryClient set, use QueryClientProvider to set one', + ) + }) + + it('should not throw an error if query client is provided via context', async () => { + const { PreactQueryDevtools } = await import('../PreactQueryDevtools') + const queryClient = new QueryClient() + + expect(() => + render( + + + , + ), + ).not.toThrow() + expect(mountMock).toHaveBeenCalled() + }) + + it('should not throw an error if query client is provided via props', async () => { + const { PreactQueryDevtools } = await import('../PreactQueryDevtools') + const queryClient = new QueryClient() + + expect(() => + render(), + ).not.toThrow() + expect(mountMock).toHaveBeenCalled() + }) + + it('should return null in non-development environments', async () => { + const { PreactQueryDevtools } = await import('..') + + expect(process.env.NODE_ENV).not.toBe('development') + expect(PreactQueryDevtools({})).toBeNull() + }) +}) diff --git a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx new file mode 100644 index 0000000000..66930e5bd5 --- /dev/null +++ b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx @@ -0,0 +1,72 @@ +import { beforeEach, describe, expect, it, vi } from 'vitest' +import { render } from '@testing-library/preact' +import { QueryClient, QueryClientProvider } from '@tanstack/preact-query' +import type { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools' + +const mountMock = vi.fn() +const unmountMock = vi.fn() +const setClientMock = vi.fn() +const setOnCloseMock = vi.fn() +const setErrorTypesMock = vi.fn() +const setThemeMock = vi.fn() + +vi.mock('@tanstack/query-devtools', () => ({ + TanstackQueryDevtoolsPanel: vi.fn(function ( + this: TanstackQueryDevtoolsPanel, + ) { + this.mount = mountMock + this.unmount = unmountMock + this.setClient = setClientMock + this.setOnClose = setOnCloseMock + this.setErrorTypes = setErrorTypesMock + this.setTheme = setThemeMock + }), +})) + +describe('PreactQueryDevtoolsPanel', () => { + beforeEach(() => { + vi.clearAllMocks() + }) + + it('should throw an error if no query client has been set', async () => { + const { PreactQueryDevtoolsPanel } = + await import('../PreactQueryDevtoolsPanel') + + expect(() => render()).toThrow( + 'No QueryClient set, use QueryClientProvider to set one', + ) + }) + + it('should not throw an error if query client is provided via context', async () => { + const { PreactQueryDevtoolsPanel } = + await import('../PreactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + expect(() => + render( + + + , + ), + ).not.toThrow() + expect(mountMock).toHaveBeenCalled() + }) + + it('should not throw an error if query client is provided via props', async () => { + const { PreactQueryDevtoolsPanel } = + await import('../PreactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + expect(() => + render(), + ).not.toThrow() + expect(mountMock).toHaveBeenCalled() + }) + + it('should return null in non-development environments', async () => { + const { PreactQueryDevtoolsPanel } = await import('..') + + expect(process.env.NODE_ENV).not.toBe('development') + expect(PreactQueryDevtoolsPanel({})).toBeNull() + }) +}) From 03eba38ae9f9367022316d802d827a8460edcab7 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Sun, 3 May 2026 14:19:43 +0900 Subject: [PATCH 3/4] test(react-query-devtools): add tests for missing 'QueryClient', context provider, 'client' prop, and production fallback (#10627) * test(react-query-devtools): add tests for missing 'QueryClient', context provider, 'client' prop, and production fallback * ci: apply automated fixes * test(react-query-devtools): make production fallback test deterministic with 'vi.stubEnv' and 'vi.resetModules' --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- .../src/__tests__/ReactQueryDevtools.test.tsx | 77 ++++++++++++++++++ .../ReactQueryDevtoolsPanel.test.tsx | 78 +++++++++++++++++++ .../src/__tests__/devtools.test.tsx | 7 -- .../src/__tests__/not-development.test.tsx | 9 --- 4 files changed, 155 insertions(+), 16 deletions(-) create mode 100644 packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx create mode 100644 packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx delete mode 100644 packages/react-query-devtools/src/__tests__/devtools.test.tsx delete mode 100644 packages/react-query-devtools/src/__tests__/not-development.test.tsx diff --git a/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx b/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx new file mode 100644 index 0000000000..0d48c3d173 --- /dev/null +++ b/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx @@ -0,0 +1,77 @@ +import { beforeEach, describe, expect, it, vi } from 'vitest' +import { render } from '@testing-library/react' +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import type { TanstackQueryDevtools } from '@tanstack/query-devtools' + +const mountMock = vi.fn() +const unmountMock = vi.fn() +const setClientMock = vi.fn() +const setButtonPositionMock = vi.fn() +const setPositionMock = vi.fn() +const setInitialIsOpenMock = vi.fn() +const setErrorTypesMock = vi.fn() +const setThemeMock = vi.fn() + +vi.mock('@tanstack/query-devtools', () => ({ + TanstackQueryDevtools: vi.fn(function (this: TanstackQueryDevtools) { + this.mount = mountMock + this.unmount = unmountMock + this.setClient = setClientMock + this.setButtonPosition = setButtonPositionMock + this.setPosition = setPositionMock + this.setInitialIsOpen = setInitialIsOpenMock + this.setErrorTypes = setErrorTypesMock + this.setTheme = setThemeMock + }), +})) + +describe('ReactQueryDevtools', () => { + beforeEach(() => { + vi.clearAllMocks() + }) + + it('should throw an error if no query client has been set', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + + expect(() => render()).toThrow( + 'No QueryClient set, use QueryClientProvider to set one', + ) + }) + + it('should not throw an error if query client is provided via context', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + const queryClient = new QueryClient() + + expect(() => + render( + + + , + ), + ).not.toThrow() + expect(mountMock).toHaveBeenCalled() + }) + + it('should not throw an error if query client is provided via props', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + const queryClient = new QueryClient() + + expect(() => + render(), + ).not.toThrow() + expect(mountMock).toHaveBeenCalled() + }) + + it('should return null in non-development environments', async () => { + vi.stubEnv('NODE_ENV', 'production') + vi.resetModules() + + try { + const { ReactQueryDevtools } = await import('..') + expect(ReactQueryDevtools({})).toBeNull() + } finally { + vi.unstubAllEnvs() + vi.resetModules() + } + }) +}) diff --git a/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx b/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx new file mode 100644 index 0000000000..4beb7d99c0 --- /dev/null +++ b/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx @@ -0,0 +1,78 @@ +import { beforeEach, describe, expect, it, vi } from 'vitest' +import { render } from '@testing-library/react' +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import type { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools' + +const mountMock = vi.fn() +const unmountMock = vi.fn() +const setClientMock = vi.fn() +const setOnCloseMock = vi.fn() +const setErrorTypesMock = vi.fn() +const setThemeMock = vi.fn() + +vi.mock('@tanstack/query-devtools', () => ({ + TanstackQueryDevtoolsPanel: vi.fn(function ( + this: TanstackQueryDevtoolsPanel, + ) { + this.mount = mountMock + this.unmount = unmountMock + this.setClient = setClientMock + this.setOnClose = setOnCloseMock + this.setErrorTypes = setErrorTypesMock + this.setTheme = setThemeMock + }), +})) + +describe('ReactQueryDevtoolsPanel', () => { + beforeEach(() => { + vi.clearAllMocks() + }) + + it('should throw an error if no query client has been set', async () => { + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + + expect(() => render()).toThrow( + 'No QueryClient set, use QueryClientProvider to set one', + ) + }) + + it('should not throw an error if query client is provided via context', async () => { + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + expect(() => + render( + + + , + ), + ).not.toThrow() + expect(mountMock).toHaveBeenCalled() + }) + + it('should not throw an error if query client is provided via props', async () => { + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + expect(() => + render(), + ).not.toThrow() + expect(mountMock).toHaveBeenCalled() + }) + + it('should return null in non-development environments', async () => { + vi.stubEnv('NODE_ENV', 'production') + vi.resetModules() + + try { + const { ReactQueryDevtoolsPanel } = await import('..') + expect(ReactQueryDevtoolsPanel({})).toBeNull() + } finally { + vi.unstubAllEnvs() + vi.resetModules() + } + }) +}) diff --git a/packages/react-query-devtools/src/__tests__/devtools.test.tsx b/packages/react-query-devtools/src/__tests__/devtools.test.tsx deleted file mode 100644 index 0e44d74db6..0000000000 --- a/packages/react-query-devtools/src/__tests__/devtools.test.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { describe, expect, it } from 'vitest' - -describe('ReactQueryDevtools', () => { - it('should be able to open and close devtools', () => { - expect(1).toBe(1) - }) -}) diff --git a/packages/react-query-devtools/src/__tests__/not-development.test.tsx b/packages/react-query-devtools/src/__tests__/not-development.test.tsx deleted file mode 100644 index 6353147ed4..0000000000 --- a/packages/react-query-devtools/src/__tests__/not-development.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { describe, expect, it } from 'vitest' -import { ReactQueryDevtools } from '..' - -describe('ReactQueryDevtools not in process.env.NODE_ENV=development', () => { - it('should return null', () => { - expect(process.env.NODE_ENV).not.toBe('development') - expect(ReactQueryDevtools({})).toBeNull() - }) -}) From 9b879f14211390dd5a66db69ef920b0631311b7e Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Sun, 3 May 2026 14:20:03 +0900 Subject: [PATCH 4/4] test(preact-query-devtools): make production fallback test deterministic with 'vi.stubEnv' and 'vi.resetModules' (#10628) --- .../src/__tests__/PreactQueryDevtools.test.tsx | 12 +++++++++--- .../src/__tests__/PreactQueryDevtoolsPanel.test.tsx | 12 +++++++++--- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx index ad60e9c3d0..25fd5c4169 100644 --- a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx +++ b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx @@ -63,9 +63,15 @@ describe('PreactQueryDevtools', () => { }) it('should return null in non-development environments', async () => { - const { PreactQueryDevtools } = await import('..') + vi.stubEnv('NODE_ENV', 'production') + vi.resetModules() - expect(process.env.NODE_ENV).not.toBe('development') - expect(PreactQueryDevtools({})).toBeNull() + try { + const { PreactQueryDevtools } = await import('..') + expect(PreactQueryDevtools({})).toBeNull() + } finally { + vi.unstubAllEnvs() + vi.resetModules() + } }) }) diff --git a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx index 66930e5bd5..cc03560a36 100644 --- a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx +++ b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx @@ -64,9 +64,15 @@ describe('PreactQueryDevtoolsPanel', () => { }) it('should return null in non-development environments', async () => { - const { PreactQueryDevtoolsPanel } = await import('..') + vi.stubEnv('NODE_ENV', 'production') + vi.resetModules() - expect(process.env.NODE_ENV).not.toBe('development') - expect(PreactQueryDevtoolsPanel({})).toBeNull() + try { + const { PreactQueryDevtoolsPanel } = await import('..') + expect(PreactQueryDevtoolsPanel({})).toBeNull() + } finally { + vi.unstubAllEnvs() + vi.resetModules() + } }) })