From c4a17f2e7cf0bbf9cbf4589128175e410e2f7e58 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Sat, 4 Jul 2026 15:13:34 +0900 Subject: [PATCH 1/2] test(preact-query-devtools): extract shared test setup into 'beforeEach' --- .../__tests__/PreactQueryDevtools.test.tsx | 109 +++++------------- .../PreactQueryDevtoolsPanel.test.tsx | 101 +++++----------- 2 files changed, 56 insertions(+), 154 deletions(-) diff --git a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx index 3dea38a137a..75e69860edd 100644 --- a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx +++ b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx @@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest' import { render } from '@testing-library/preact' import { QueryClient, QueryClientProvider } from '@tanstack/preact-query' import { TanstackQueryDevtools } from '@tanstack/query-devtools' +import type { PreactQueryDevtools as PreactQueryDevtoolsComponent } from '../PreactQueryDevtools' const mountMock = vi.fn() const unmountMock = vi.fn() @@ -26,22 +27,22 @@ vi.mock('@tanstack/query-devtools', () => ({ })) describe('PreactQueryDevtools', () => { - beforeEach(() => { + let PreactQueryDevtools: typeof PreactQueryDevtoolsComponent + let queryClient: QueryClient + + beforeEach(async () => { vi.clearAllMocks() + ;({ PreactQueryDevtools } = await import('../PreactQueryDevtools')) + queryClient = new QueryClient() }) - it('should throw an error if no query client has been set', async () => { - const { PreactQueryDevtools } = await import('../PreactQueryDevtools') - + it('should throw an error if no query client has been set', () => { 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() - + it('should not throw an error if query client is provided via context', () => { expect(() => render( @@ -52,20 +53,14 @@ describe('PreactQueryDevtools', () => { 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() - + it('should not throw an error if query client is provided via props', () => { expect(() => render(), ).not.toThrow() expect(mountMock).toHaveBeenCalled() }) - it('should forward "buttonPosition" to the devtools instance', async () => { - const { PreactQueryDevtools } = await import('../PreactQueryDevtools') - const queryClient = new QueryClient() - + it('should forward "buttonPosition" to the devtools instance', () => { render( , ) @@ -73,36 +68,25 @@ describe('PreactQueryDevtools', () => { expect(setButtonPositionMock).toHaveBeenCalledWith('top-left') }) - it('should forward "position" to the devtools instance', async () => { - const { PreactQueryDevtools } = await import('../PreactQueryDevtools') - const queryClient = new QueryClient() - + it('should forward "position" to the devtools instance', () => { render() expect(setPositionMock).toHaveBeenCalledWith('left') }) - it('should forward "initialIsOpen" to the devtools instance', async () => { - const { PreactQueryDevtools } = await import('../PreactQueryDevtools') - const queryClient = new QueryClient() - + it('should forward "initialIsOpen" to the devtools instance', () => { 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() - + it('should default "initialIsOpen" to "false" when the prop is omitted', () => { render() expect(setInitialIsOpenMock).toHaveBeenCalledWith(false) }) - it('should forward "errorTypes" to the devtools instance', async () => { - const { PreactQueryDevtools } = await import('../PreactQueryDevtools') - const queryClient = new QueryClient() + it('should forward "errorTypes" to the devtools instance', () => { const errorTypes = [ { name: 'Network', initializer: () => new Error('Network') }, ] @@ -112,37 +96,25 @@ describe('PreactQueryDevtools', () => { 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() - + it('should default "errorTypes" to an empty array when the prop is omitted', () => { render() expect(setErrorTypesMock).toHaveBeenCalledWith([]) }) - it('should forward "theme" to the devtools instance', async () => { - const { PreactQueryDevtools } = await import('../PreactQueryDevtools') - const queryClient = new QueryClient() - + it('should forward "theme" to the devtools instance', () => { render() expect(setThemeMock).toHaveBeenCalledWith('dark') }) - it('should forward the resolved "QueryClient" via "setClient"', async () => { - const { PreactQueryDevtools } = await import('../PreactQueryDevtools') - const queryClient = new QueryClient() - + it('should forward the resolved "QueryClient" via "setClient"', () => { render() expect(setClientMock).toHaveBeenCalledWith(queryClient) }) - it('should forward "styleNonce" to the devtools constructor', async () => { - const { PreactQueryDevtools } = await import('../PreactQueryDevtools') - const queryClient = new QueryClient() - + it('should forward "styleNonce" to the devtools constructor', () => { render() expect(TanstackQueryDevtools).toHaveBeenCalledWith( @@ -150,9 +122,7 @@ describe('PreactQueryDevtools', () => { ) }) - it('should forward "shadowDOMTarget" to the devtools constructor', async () => { - const { PreactQueryDevtools } = await import('../PreactQueryDevtools') - const queryClient = new QueryClient() + it('should forward "shadowDOMTarget" to the devtools constructor', () => { const shadowDOMTarget = document .createElement('div') .attachShadow({ mode: 'open' }) @@ -169,10 +139,7 @@ describe('PreactQueryDevtools', () => { ) }) - it('should forward "hideDisabledQueries" to the devtools constructor', async () => { - const { PreactQueryDevtools } = await import('../PreactQueryDevtools') - const queryClient = new QueryClient() - + it('should forward "hideDisabledQueries" to the devtools constructor', () => { render( , ) @@ -182,10 +149,7 @@ describe('PreactQueryDevtools', () => { ) }) - it('should forward a "buttonPosition" change to the devtools instance after mount', async () => { - const { PreactQueryDevtools } = await import('../PreactQueryDevtools') - const queryClient = new QueryClient() - + it('should forward a "buttonPosition" change to the devtools instance after mount', () => { const { rerender } = render( { expect(setButtonPositionMock).toHaveBeenCalledWith('top-left') }) - it('should forward a "position" change to the devtools instance after mount', async () => { - const { PreactQueryDevtools } = await import('../PreactQueryDevtools') - const queryClient = new QueryClient() - + it('should forward a "position" change to the devtools instance after mount', () => { const { rerender } = render( , ) @@ -215,10 +176,7 @@ describe('PreactQueryDevtools', () => { expect(setPositionMock).toHaveBeenCalledWith('top') }) - it('should forward an "initialIsOpen" change to the devtools instance after mount', async () => { - const { PreactQueryDevtools } = await import('../PreactQueryDevtools') - const queryClient = new QueryClient() - + it('should forward an "initialIsOpen" change to the devtools instance after mount', () => { const { rerender } = render( , ) @@ -229,10 +187,7 @@ describe('PreactQueryDevtools', () => { expect(setInitialIsOpenMock).toHaveBeenCalledWith(true) }) - it('should forward an "errorTypes" change to the devtools instance after mount', async () => { - const { PreactQueryDevtools } = await import('../PreactQueryDevtools') - const queryClient = new QueryClient() - + it('should forward an "errorTypes" change to the devtools instance after mount', () => { const { rerender } = render( , ) @@ -248,10 +203,7 @@ describe('PreactQueryDevtools', () => { expect(setErrorTypesMock).toHaveBeenCalledWith(errorTypes) }) - it('should forward a "theme" change to the devtools instance after mount', async () => { - const { PreactQueryDevtools } = await import('../PreactQueryDevtools') - const queryClient = new QueryClient() - + it('should forward a "theme" change to the devtools instance after mount', () => { const { rerender } = render( , ) @@ -262,10 +214,7 @@ describe('PreactQueryDevtools', () => { expect(setThemeMock).toHaveBeenCalledWith('dark') }) - it('should call "unmount" on the devtools instance when the component unmounts', async () => { - const { PreactQueryDevtools } = await import('../PreactQueryDevtools') - const queryClient = new QueryClient() - + it('should call "unmount" on the devtools instance when the component unmounts', () => { const { unmount } = render() unmount() @@ -277,8 +226,8 @@ describe('PreactQueryDevtools', () => { vi.resetModules() try { - const { PreactQueryDevtools } = await import('..') - expect(PreactQueryDevtools({})).toBeNull() + const { PreactQueryDevtools: ProductionDevtools } = await import('..') + expect(ProductionDevtools({})).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 1d54b36bb60..c7a90d76fb7 100644 --- a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx +++ b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx @@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest' import { render } from '@testing-library/preact' import { QueryClient, QueryClientProvider } from '@tanstack/preact-query' import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools' +import type { PreactQueryDevtoolsPanel as PreactQueryDevtoolsPanelComponent } from '../PreactQueryDevtoolsPanel' const mountMock = vi.fn() const unmountMock = vi.fn() @@ -24,24 +25,24 @@ vi.mock('@tanstack/query-devtools', () => ({ })) describe('PreactQueryDevtoolsPanel', () => { - beforeEach(() => { + let PreactQueryDevtoolsPanel: typeof PreactQueryDevtoolsPanelComponent + let queryClient: QueryClient + + beforeEach(async () => { vi.clearAllMocks() + ;({ PreactQueryDevtoolsPanel } = await import( + '../PreactQueryDevtoolsPanel' + )) + queryClient = new QueryClient() }) - it('should throw an error if no query client has been set', async () => { - const { PreactQueryDevtoolsPanel } = - await import('../PreactQueryDevtoolsPanel') - + it('should throw an error if no query client has been set', () => { 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() - + it('should not throw an error if query client is provided via context', () => { expect(() => render( @@ -52,21 +53,14 @@ describe('PreactQueryDevtoolsPanel', () => { 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() - + it('should not throw an error if query client is provided via props', () => { expect(() => render(), ).not.toThrow() expect(mountMock).toHaveBeenCalled() }) - it('should forward "onClose" to the devtools instance', async () => { - const { PreactQueryDevtoolsPanel } = - await import('../PreactQueryDevtoolsPanel') - const queryClient = new QueryClient() + it('should forward "onClose" to the devtools instance', () => { const onClose = vi.fn() render() @@ -74,20 +68,13 @@ describe('PreactQueryDevtoolsPanel', () => { 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() - + it('should default "onClose" to a no-op function when the prop is omitted', () => { 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() + it('should forward "errorTypes" to the devtools instance', () => { const errorTypes = [ { name: 'Network', initializer: () => new Error('Network') }, ] @@ -99,41 +86,25 @@ describe('PreactQueryDevtoolsPanel', () => { 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() - + it('should default "errorTypes" to an empty array when the prop is omitted', () => { render() expect(setErrorTypesMock).toHaveBeenCalledWith([]) }) - it('should forward "theme" to the devtools instance', async () => { - const { PreactQueryDevtoolsPanel } = - await import('../PreactQueryDevtoolsPanel') - const queryClient = new QueryClient() - + it('should forward "theme" to the devtools instance', () => { render() expect(setThemeMock).toHaveBeenCalledWith('dark') }) - it('should forward the resolved "QueryClient" via "setClient"', async () => { - const { PreactQueryDevtoolsPanel } = - await import('../PreactQueryDevtoolsPanel') - const queryClient = new QueryClient() - + it('should forward the resolved "QueryClient" via "setClient"', () => { render() expect(setClientMock).toHaveBeenCalledWith(queryClient) }) - it('should forward "styleNonce" to the devtools constructor', async () => { - const { PreactQueryDevtoolsPanel } = - await import('../PreactQueryDevtoolsPanel') - const queryClient = new QueryClient() - + it('should forward "styleNonce" to the devtools constructor', () => { render() expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith( @@ -141,10 +112,7 @@ describe('PreactQueryDevtoolsPanel', () => { ) }) - it('should forward "shadowDOMTarget" to the devtools constructor', async () => { - const { PreactQueryDevtoolsPanel } = - await import('../PreactQueryDevtoolsPanel') - const queryClient = new QueryClient() + it('should forward "shadowDOMTarget" to the devtools constructor', () => { const shadowDOMTarget = document .createElement('div') .attachShadow({ mode: 'open' }) @@ -161,11 +129,7 @@ describe('PreactQueryDevtoolsPanel', () => { ) }) - it('should forward "hideDisabledQueries" to the devtools constructor', async () => { - const { PreactQueryDevtoolsPanel } = - await import('../PreactQueryDevtoolsPanel') - const queryClient = new QueryClient() - + it('should forward "hideDisabledQueries" to the devtools constructor', () => { render( { ) }) - it('should preserve the default container height when "style" omits "height"', async () => { - const { PreactQueryDevtoolsPanel } = - await import('../PreactQueryDevtoolsPanel') - const queryClient = new QueryClient() - + it('should preserve the default container height when "style" omits "height"', () => { const { container } = render( { }) }) - it('should let "style" override the default container height on the rendered element', async () => { - const { PreactQueryDevtoolsPanel } = - await import('../PreactQueryDevtoolsPanel') - const queryClient = new QueryClient() - + it('should let "style" override the default container height on the rendered element', () => { const { container } = render( { }) }) - it('should call "unmount" on the devtools instance when the component unmounts', async () => { - const { PreactQueryDevtoolsPanel } = - await import('../PreactQueryDevtoolsPanel') - const queryClient = new QueryClient() - + it('should call "unmount" on the devtools instance when the component unmounts', () => { const { unmount } = render( , ) @@ -232,8 +184,9 @@ describe('PreactQueryDevtoolsPanel', () => { vi.resetModules() try { - const { PreactQueryDevtoolsPanel } = await import('..') - expect(PreactQueryDevtoolsPanel({})).toBeNull() + const { PreactQueryDevtoolsPanel: ProductionDevtoolsPanel } = + await import('..') + expect(ProductionDevtoolsPanel({})).toBeNull() } finally { vi.unstubAllEnvs() vi.resetModules() From f8062fa088f8fa4dfbe8b17e141fffaeb031683f Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sat, 4 Jul 2026 06:16:11 +0000 Subject: [PATCH 2/2] ci: apply automated fixes --- .../src/__tests__/PreactQueryDevtoolsPanel.test.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx index c7a90d76fb7..fd159307967 100644 --- a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx +++ b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx @@ -30,9 +30,8 @@ describe('PreactQueryDevtoolsPanel', () => { beforeEach(async () => { vi.clearAllMocks() - ;({ PreactQueryDevtoolsPanel } = await import( - '../PreactQueryDevtoolsPanel' - )) + ;({ PreactQueryDevtoolsPanel } = + await import('../PreactQueryDevtoolsPanel')) queryClient = new QueryClient() })