From 5fd820463d8fb851de28efbc76492d257fdb2c50 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Sun, 3 May 2026 13:54:24 +0900 Subject: [PATCH 1/3] test(react-query-devtools): add tests for missing 'QueryClient', context provider, 'client' prop, and production fallback --- .../src/__tests__/ReactQueryDevtools.test.tsx | 71 ++++++++++++++++++ .../ReactQueryDevtoolsPanel.test.tsx | 75 +++++++++++++++++++ .../src/__tests__/devtools.test.tsx | 7 -- .../src/__tests__/not-development.test.tsx | 9 --- 4 files changed, 146 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 00000000000..b6f11016516 --- /dev/null +++ b/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx @@ -0,0 +1,71 @@ +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 () => { + const { ReactQueryDevtools } = await import('..') + + expect(process.env.NODE_ENV).not.toBe('development') + expect(ReactQueryDevtools({})).toBeNull() + }) +}) 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 00000000000..0a2ed1ccf5b --- /dev/null +++ b/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx @@ -0,0 +1,75 @@ +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 () => { + const { ReactQueryDevtoolsPanel } = await import('..') + + expect(process.env.NODE_ENV).not.toBe('development') + expect(ReactQueryDevtoolsPanel({})).toBeNull() + }) +}) 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 0e44d74db67..00000000000 --- 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 6353147ed4d..00000000000 --- 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 27d38bf01c14f1789210db0c022b3627547557df Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 3 May 2026 04:55:36 +0000 Subject: [PATCH 2/3] ci: apply automated fixes --- .../__tests__/ReactQueryDevtoolsPanel.test.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx b/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx index 0a2ed1ccf5b..74ad979990d 100644 --- a/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx +++ b/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx @@ -29,9 +29,8 @@ describe('ReactQueryDevtoolsPanel', () => { }) it('should throw an error if no query client has been set', async () => { - const { ReactQueryDevtoolsPanel } = await import( - '../ReactQueryDevtoolsPanel' - ) + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') expect(() => render()).toThrow( 'No QueryClient set, use QueryClientProvider to set one', @@ -39,9 +38,8 @@ describe('ReactQueryDevtoolsPanel', () => { }) it('should not throw an error if query client is provided via context', async () => { - const { ReactQueryDevtoolsPanel } = await import( - '../ReactQueryDevtoolsPanel' - ) + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') const queryClient = new QueryClient() expect(() => @@ -55,9 +53,8 @@ describe('ReactQueryDevtoolsPanel', () => { }) it('should not throw an error if query client is provided via props', async () => { - const { ReactQueryDevtoolsPanel } = await import( - '../ReactQueryDevtoolsPanel' - ) + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') const queryClient = new QueryClient() expect(() => From 9828545a37c00292bfc954211be46b89e4eba7be Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Sun, 3 May 2026 14:09:01 +0900 Subject: [PATCH 3/3] test(react-query-devtools): make production fallback test deterministic with 'vi.stubEnv' and 'vi.resetModules' --- .../src/__tests__/ReactQueryDevtools.test.tsx | 12 +++++++++--- .../src/__tests__/ReactQueryDevtoolsPanel.test.tsx | 12 +++++++++--- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx b/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx index b6f11016516..0d48c3d173d 100644 --- a/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx +++ b/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx @@ -63,9 +63,15 @@ describe('ReactQueryDevtools', () => { }) it('should return null in non-development environments', async () => { - const { ReactQueryDevtools } = await import('..') + vi.stubEnv('NODE_ENV', 'production') + vi.resetModules() - expect(process.env.NODE_ENV).not.toBe('development') - expect(ReactQueryDevtools({})).toBeNull() + 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 index 74ad979990d..4beb7d99c02 100644 --- a/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx +++ b/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx @@ -64,9 +64,15 @@ describe('ReactQueryDevtoolsPanel', () => { }) it('should return null in non-development environments', async () => { - const { ReactQueryDevtoolsPanel } = await import('..') + vi.stubEnv('NODE_ENV', 'production') + vi.resetModules() - expect(process.env.NODE_ENV).not.toBe('development') - expect(ReactQueryDevtoolsPanel({})).toBeNull() + try { + const { ReactQueryDevtoolsPanel } = await import('..') + expect(ReactQueryDevtoolsPanel({})).toBeNull() + } finally { + vi.unstubAllEnvs() + vi.resetModules() + } }) })