diff --git a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx
index 97de126fc5..cdbd85021d 100644
--- a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx
+++ b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx
@@ -1,7 +1,7 @@
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'
+import { TanstackQueryDevtools } from '@tanstack/query-devtools'
const mountMock = vi.fn()
const unmountMock = vi.fn()
@@ -82,6 +82,116 @@ describe('PreactQueryDevtools', () => {
expect(setPositionMock).toHaveBeenCalledWith('left')
})
+ it('should forward "initialIsOpen" to the devtools instance', async () => {
+ const { PreactQueryDevtools } = await import('../PreactQueryDevtools')
+ const queryClient = new QueryClient()
+
+ render()
+
+ expect(setInitialIsOpenMock).toHaveBeenCalledWith(true)
+ })
+
+ it('should default "initialIsOpen" to "false" when the prop is omitted', async () => {
+ const { PreactQueryDevtools } = await import('../PreactQueryDevtools')
+ const queryClient = new QueryClient()
+
+ render()
+
+ expect(setInitialIsOpenMock).toHaveBeenCalledWith(false)
+ })
+
+ it('should forward "errorTypes" to the devtools instance', async () => {
+ const { PreactQueryDevtools } = await import('../PreactQueryDevtools')
+ const queryClient = new QueryClient()
+ const errorTypes = [
+ { name: 'Network', initializer: () => new Error('Network') },
+ ]
+
+ render()
+
+ expect(setErrorTypesMock).toHaveBeenCalledWith(errorTypes)
+ })
+
+ it('should default "errorTypes" to an empty array when the prop is omitted', async () => {
+ const { PreactQueryDevtools } = await import('../PreactQueryDevtools')
+ const queryClient = new QueryClient()
+
+ render()
+
+ expect(setErrorTypesMock).toHaveBeenCalledWith([])
+ })
+
+ it('should forward "theme" to the devtools instance', async () => {
+ const { PreactQueryDevtools } = await import('../PreactQueryDevtools')
+ const queryClient = new QueryClient()
+
+ render()
+
+ expect(setThemeMock).toHaveBeenCalledWith('dark')
+ })
+
+ it('should forward the resolved "QueryClient" via "setClient"', async () => {
+ const { PreactQueryDevtools } = await import('../PreactQueryDevtools')
+ const queryClient = new QueryClient()
+
+ render()
+
+ expect(setClientMock).toHaveBeenCalledWith(queryClient)
+ })
+
+ it('should forward "styleNonce" to the devtools constructor', async () => {
+ const { PreactQueryDevtools } = await import('../PreactQueryDevtools')
+ const queryClient = new QueryClient()
+
+ render()
+
+ expect(TanstackQueryDevtools).toHaveBeenCalledWith(
+ expect.objectContaining({ styleNonce: 'abc' }),
+ )
+ })
+
+ it('should forward "shadowDOMTarget" to the devtools constructor', async () => {
+ const { PreactQueryDevtools } = await import('../PreactQueryDevtools')
+ const queryClient = new QueryClient()
+ const shadowDOMTarget = document
+ .createElement('div')
+ .attachShadow({ mode: 'open' })
+
+ render(
+ ,
+ )
+
+ expect(TanstackQueryDevtools).toHaveBeenCalledWith(
+ expect.objectContaining({ shadowDOMTarget }),
+ )
+ })
+
+ it('should forward "hideDisabledQueries" to the devtools constructor', async () => {
+ const { PreactQueryDevtools } = await import('../PreactQueryDevtools')
+ const queryClient = new QueryClient()
+
+ render(
+ ,
+ )
+
+ expect(TanstackQueryDevtools).toHaveBeenCalledWith(
+ expect.objectContaining({ hideDisabledQueries: true }),
+ )
+ })
+
+ it('should call "unmount" on the devtools instance when the component unmounts', async () => {
+ const { PreactQueryDevtools } = await import('../PreactQueryDevtools')
+ const queryClient = new QueryClient()
+
+ const { unmount } = render()
+ unmount()
+
+ expect(unmountMock).toHaveBeenCalled()
+ })
+
it('should return null in non-development environments', async () => {
vi.stubEnv('NODE_ENV', 'production')
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 cc03560a36..1d54b36bb6 100644
--- a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx
+++ b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx
@@ -1,7 +1,7 @@
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'
+import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
const mountMock = vi.fn()
const unmountMock = vi.fn()
@@ -63,6 +63,170 @@ describe('PreactQueryDevtoolsPanel', () => {
expect(mountMock).toHaveBeenCalled()
})
+ it('should forward "onClose" to the devtools instance', async () => {
+ const { PreactQueryDevtoolsPanel } =
+ await import('../PreactQueryDevtoolsPanel')
+ const queryClient = new QueryClient()
+ const onClose = vi.fn()
+
+ render()
+
+ expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function))
+ })
+
+ it('should default "onClose" to a no-op function when the prop is omitted', async () => {
+ const { PreactQueryDevtoolsPanel } =
+ await import('../PreactQueryDevtoolsPanel')
+ const queryClient = new QueryClient()
+
+ render()
+
+ expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function))
+ })
+
+ it('should forward "errorTypes" to the devtools instance', async () => {
+ const { PreactQueryDevtoolsPanel } =
+ await import('../PreactQueryDevtoolsPanel')
+ const queryClient = new QueryClient()
+ const errorTypes = [
+ { name: 'Network', initializer: () => new Error('Network') },
+ ]
+
+ render(
+ ,
+ )
+
+ expect(setErrorTypesMock).toHaveBeenCalledWith(errorTypes)
+ })
+
+ it('should default "errorTypes" to an empty array when the prop is omitted', async () => {
+ const { PreactQueryDevtoolsPanel } =
+ await import('../PreactQueryDevtoolsPanel')
+ const queryClient = new QueryClient()
+
+ render()
+
+ expect(setErrorTypesMock).toHaveBeenCalledWith([])
+ })
+
+ it('should forward "theme" to the devtools instance', async () => {
+ const { PreactQueryDevtoolsPanel } =
+ await import('../PreactQueryDevtoolsPanel')
+ const queryClient = new QueryClient()
+
+ render()
+
+ expect(setThemeMock).toHaveBeenCalledWith('dark')
+ })
+
+ it('should forward the resolved "QueryClient" via "setClient"', async () => {
+ const { PreactQueryDevtoolsPanel } =
+ await import('../PreactQueryDevtoolsPanel')
+ const queryClient = new QueryClient()
+
+ render()
+
+ expect(setClientMock).toHaveBeenCalledWith(queryClient)
+ })
+
+ it('should forward "styleNonce" to the devtools constructor', async () => {
+ const { PreactQueryDevtoolsPanel } =
+ await import('../PreactQueryDevtoolsPanel')
+ const queryClient = new QueryClient()
+
+ render()
+
+ expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith(
+ expect.objectContaining({ styleNonce: 'abc' }),
+ )
+ })
+
+ it('should forward "shadowDOMTarget" to the devtools constructor', async () => {
+ const { PreactQueryDevtoolsPanel } =
+ await import('../PreactQueryDevtoolsPanel')
+ const queryClient = new QueryClient()
+ const shadowDOMTarget = document
+ .createElement('div')
+ .attachShadow({ mode: 'open' })
+
+ render(
+ ,
+ )
+
+ expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith(
+ expect.objectContaining({ shadowDOMTarget }),
+ )
+ })
+
+ it('should forward "hideDisabledQueries" to the devtools constructor', async () => {
+ const { PreactQueryDevtoolsPanel } =
+ await import('../PreactQueryDevtoolsPanel')
+ const queryClient = new QueryClient()
+
+ render(
+ ,
+ )
+
+ expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith(
+ expect.objectContaining({ hideDisabledQueries: true }),
+ )
+ })
+
+ it('should preserve the default container height when "style" omits "height"', async () => {
+ const { PreactQueryDevtoolsPanel } =
+ await import('../PreactQueryDevtoolsPanel')
+ const queryClient = new QueryClient()
+
+ const { container } = render(
+ ,
+ )
+
+ expect(container.querySelector('.tsqd-parent-container')).toHaveStyle({
+ height: '500px',
+ width: '300px',
+ })
+ })
+
+ it('should let "style" override the default container height on the rendered element', async () => {
+ const { PreactQueryDevtoolsPanel } =
+ await import('../PreactQueryDevtoolsPanel')
+ const queryClient = new QueryClient()
+
+ const { container } = render(
+ ,
+ )
+
+ expect(container.querySelector('.tsqd-parent-container')).toHaveStyle({
+ height: '300px',
+ width: '300px',
+ })
+ })
+
+ it('should call "unmount" on the devtools instance when the component unmounts', async () => {
+ const { PreactQueryDevtoolsPanel } =
+ await import('../PreactQueryDevtoolsPanel')
+ const queryClient = new QueryClient()
+
+ const { unmount } = render(
+ ,
+ )
+ unmount()
+
+ expect(unmountMock).toHaveBeenCalled()
+ })
+
it('should return null in non-development environments', async () => {
vi.stubEnv('NODE_ENV', 'production')
vi.resetModules()