From e10e9f917f7bf1f3f025b0d949a23c7ad49515f4 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Mon, 1 Jun 2026 10:23:24 +0900 Subject: [PATCH 1/2] test(react-query-devtools/ReactQueryDevtools{,Panel}): add tests for the full prop wiring matrix --- .../src/__tests__/ReactQueryDevtools.test.tsx | 112 +++++++++++- .../ReactQueryDevtoolsPanel.test.tsx | 169 +++++++++++++++++- 2 files changed, 279 insertions(+), 2 deletions(-) diff --git a/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx b/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx index 76ad5c4f51d..a869ef1fd04 100644 --- a/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx +++ b/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx @@ -1,7 +1,7 @@ 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' +import { TanstackQueryDevtools } from '@tanstack/query-devtools' const mountMock = vi.fn() const unmountMock = vi.fn() @@ -82,6 +82,116 @@ describe('ReactQueryDevtools', () => { expect(setPositionMock).toHaveBeenCalledWith('left') }) + it('should forward "initialIsOpen" to the devtools instance', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(setInitialIsOpenMock).toHaveBeenCalledWith(true) + }) + + it('should default "initialIsOpen" to "false" when the prop is omitted', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(setInitialIsOpenMock).toHaveBeenCalledWith(false) + }) + + it('should forward "errorTypes" to the devtools instance', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + 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 { ReactQueryDevtools } = await import('../ReactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(setErrorTypesMock).toHaveBeenCalledWith([]) + }) + + it('should forward "theme" to the devtools instance', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(setThemeMock).toHaveBeenCalledWith('dark') + }) + + it('should forward the resolved "QueryClient" via "setClient"', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(setClientMock).toHaveBeenCalledWith(queryClient) + }) + + it('should forward "styleNonce" to the devtools constructor', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(TanstackQueryDevtools).toHaveBeenCalledWith( + expect.objectContaining({ styleNonce: 'abc' }), + ) + }) + + it('should forward "shadowDOMTarget" to the devtools constructor', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + 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 { ReactQueryDevtools } = await import('../ReactQueryDevtools') + 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 { ReactQueryDevtools } = await import('../ReactQueryDevtools') + 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/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx b/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx index 4beb7d99c02..aae1e433a2f 100644 --- a/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx +++ b/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx @@ -1,7 +1,7 @@ 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' +import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools' const mountMock = vi.fn() const unmountMock = vi.fn() @@ -63,6 +63,173 @@ describe('ReactQueryDevtoolsPanel', () => { expect(mountMock).toHaveBeenCalled() }) + it('should forward "onClose" to the devtools instance', async () => { + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + 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 { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + render() + + expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function)) + }) + + it('should forward "errorTypes" to the devtools instance', async () => { + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + 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 { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + render() + + expect(setErrorTypesMock).toHaveBeenCalledWith([]) + }) + + it('should forward "theme" to the devtools instance', async () => { + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + render() + + expect(setThemeMock).toHaveBeenCalledWith('dark') + }) + + it('should forward the resolved "QueryClient" via "setClient"', async () => { + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + render() + + expect(setClientMock).toHaveBeenCalledWith(queryClient) + }) + + it('should forward "styleNonce" to the devtools constructor', async () => { + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + render() + + expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith( + expect.objectContaining({ styleNonce: 'abc' }), + ) + }) + + it('should forward "shadowDOMTarget" to the devtools constructor', async () => { + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + 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 { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + 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 { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + 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 { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + 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 { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + 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() From 0aa423f86c888db9de605eb429aea41e5eed4830 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 1 Jun 2026 01:25:02 +0000 Subject: [PATCH 2/2] ci: apply automated fixes --- .../src/__tests__/ReactQueryDevtoolsPanel.test.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx b/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx index aae1e433a2f..779498826d4 100644 --- a/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx +++ b/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx @@ -69,9 +69,7 @@ describe('ReactQueryDevtoolsPanel', () => { const queryClient = new QueryClient() const onClose = vi.fn() - render( - , - ) + render() expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function)) }) @@ -95,10 +93,7 @@ describe('ReactQueryDevtoolsPanel', () => { ] render( - , + , ) expect(setErrorTypesMock).toHaveBeenCalledWith(errorTypes)