diff --git a/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx b/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx
index 922ba82377..a55b98970b 100644
--- a/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx
+++ b/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx
@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { render } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { TanstackQueryDevtools } from '@tanstack/query-devtools'
+import type { ReactQueryDevtools as ReactQueryDevtoolsComponent } from '../ReactQueryDevtools'
 
 const mountMock = vi.fn()
 const unmountMock = vi.fn()
@@ -26,22 +27,22 @@ vi.mock('@tanstack/query-devtools', () => ({
 }))
 
 describe('ReactQueryDevtools', () => {
-  beforeEach(() => {
+  let ReactQueryDevtools: typeof ReactQueryDevtoolsComponent
+  let queryClient: QueryClient
+
+  beforeEach(async () => {
     vi.clearAllMocks()
+    ;({ ReactQueryDevtools } = await import('../ReactQueryDevtools'))
+    queryClient = new QueryClient()
   })
 
-  it('should throw an error if no query client has been set', async () => {
-    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
-
+  it('should throw an error if no query client has been set', () => {
     expect(() => render(<ReactQueryDevtools />)).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()
-
+  it('should not throw an error if query client is provided via context', () => {
     expect(() =>
       render(
         <QueryClientProvider client={queryClient}>
@@ -52,20 +53,14 @@ describe('ReactQueryDevtools', () => {
     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()
-
+  it('should not throw an error if query client is provided via props', () => {
     expect(() =>
       render(<ReactQueryDevtools client={queryClient} />),
     ).not.toThrow()
     expect(mountMock).toHaveBeenCalled()
   })
 
-  it('should forward "buttonPosition" to the devtools instance', async () => {
-    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
-    const queryClient = new QueryClient()
-
+  it('should forward "buttonPosition" to the devtools instance', () => {
     render(
       <ReactQueryDevtools client={queryClient} buttonPosition="top-left" />,
     )
@@ -73,36 +68,25 @@ describe('ReactQueryDevtools', () => {
     expect(setButtonPositionMock).toHaveBeenCalledWith('top-left')
   })
 
-  it('should forward "position" to the devtools instance', async () => {
-    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
-    const queryClient = new QueryClient()
-
+  it('should forward "position" to the devtools instance', () => {
     render(<ReactQueryDevtools client={queryClient} position="left" />)
 
     expect(setPositionMock).toHaveBeenCalledWith('left')
   })
 
-  it('should forward "initialIsOpen" to the devtools instance', async () => {
-    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
-    const queryClient = new QueryClient()
-
+  it('should forward "initialIsOpen" to the devtools instance', () => {
     render(<ReactQueryDevtools client={queryClient} initialIsOpen={true} />)
 
     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()
-
+  it('should default "initialIsOpen" to "false" when the prop is omitted', () => {
     render(<ReactQueryDevtools client={queryClient} />)
 
     expect(setInitialIsOpenMock).toHaveBeenCalledWith(false)
   })
 
-  it('should forward "errorTypes" to the devtools instance', async () => {
-    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
-    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('ReactQueryDevtools', () => {
     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()
-
+  it('should default "errorTypes" to an empty array when the prop is omitted', () => {
     render(<ReactQueryDevtools client={queryClient} />)
 
     expect(setErrorTypesMock).toHaveBeenCalledWith([])
   })
 
-  it('should forward "theme" to the devtools instance', async () => {
-    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
-    const queryClient = new QueryClient()
-
+  it('should forward "theme" to the devtools instance', () => {
     render(<ReactQueryDevtools client={queryClient} theme="dark" />)
 
     expect(setThemeMock).toHaveBeenCalledWith('dark')
   })
 
-  it('should forward the resolved "QueryClient" via "setClient"', async () => {
-    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
-    const queryClient = new QueryClient()
-
+  it('should forward the resolved "QueryClient" via "setClient"', () => {
     render(<ReactQueryDevtools client={queryClient} />)
 
     expect(setClientMock).toHaveBeenCalledWith(queryClient)
   })
 
-  it('should forward "styleNonce" to the devtools constructor', async () => {
-    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
-    const queryClient = new QueryClient()
-
+  it('should forward "styleNonce" to the devtools constructor', () => {
     render(<ReactQueryDevtools client={queryClient} styleNonce="abc" />)
 
     expect(TanstackQueryDevtools).toHaveBeenCalledWith(
@@ -150,9 +122,7 @@ describe('ReactQueryDevtools', () => {
     )
   })
 
-  it('should forward "shadowDOMTarget" to the devtools constructor', async () => {
-    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
-    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('ReactQueryDevtools', () => {
     )
   })
 
-  it('should forward "hideDisabledQueries" to the devtools constructor', async () => {
-    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
-    const queryClient = new QueryClient()
-
+  it('should forward "hideDisabledQueries" to the devtools constructor', () => {
     render(
       <ReactQueryDevtools client={queryClient} hideDisabledQueries={true} />,
     )
@@ -182,10 +149,7 @@ describe('ReactQueryDevtools', () => {
     )
   })
 
-  it('should forward a "buttonPosition" change to the devtools instance after mount', async () => {
-    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
-    const queryClient = new QueryClient()
-
+  it('should forward a "buttonPosition" change to the devtools instance after mount', () => {
     const { rerender } = render(
       <ReactQueryDevtools client={queryClient} buttonPosition="bottom-right" />,
     )
@@ -198,10 +162,7 @@ describe('ReactQueryDevtools', () => {
     expect(setButtonPositionMock).toHaveBeenCalledWith('top-left')
   })
 
-  it('should forward a "position" change to the devtools instance after mount', async () => {
-    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
-    const queryClient = new QueryClient()
-
+  it('should forward a "position" change to the devtools instance after mount', () => {
     const { rerender } = render(
       <ReactQueryDevtools client={queryClient} position="bottom" />,
     )
@@ -212,10 +173,7 @@ describe('ReactQueryDevtools', () => {
     expect(setPositionMock).toHaveBeenCalledWith('top')
   })
 
-  it('should forward an "initialIsOpen" change to the devtools instance after mount', async () => {
-    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
-    const queryClient = new QueryClient()
-
+  it('should forward an "initialIsOpen" change to the devtools instance after mount', () => {
     const { rerender } = render(
       <ReactQueryDevtools client={queryClient} initialIsOpen={false} />,
     )
@@ -226,10 +184,7 @@ describe('ReactQueryDevtools', () => {
     expect(setInitialIsOpenMock).toHaveBeenCalledWith(true)
   })
 
-  it('should forward an "errorTypes" change to the devtools instance after mount', async () => {
-    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
-    const queryClient = new QueryClient()
-
+  it('should forward an "errorTypes" change to the devtools instance after mount', () => {
     const { rerender } = render(
       <ReactQueryDevtools client={queryClient} errorTypes={[]} />,
     )
@@ -245,10 +200,7 @@ describe('ReactQueryDevtools', () => {
     expect(setErrorTypesMock).toHaveBeenCalledWith(errorTypes)
   })
 
-  it('should forward a "theme" change to the devtools instance after mount', async () => {
-    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
-    const queryClient = new QueryClient()
-
+  it('should forward a "theme" change to the devtools instance after mount', () => {
     const { rerender } = render(
       <ReactQueryDevtools client={queryClient} theme="light" />,
     )
@@ -259,10 +211,7 @@ describe('ReactQueryDevtools', () => {
     expect(setThemeMock).toHaveBeenCalledWith('dark')
   })
 
-  it('should call "unmount" on the devtools instance when the component unmounts', async () => {
-    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
-    const queryClient = new QueryClient()
-
+  it('should call "unmount" on the devtools instance when the component unmounts', () => {
     const { unmount } = render(<ReactQueryDevtools client={queryClient} />)
     unmount()
 
@@ -274,8 +223,8 @@ describe('ReactQueryDevtools', () => {
     vi.resetModules()
 
     try {
-      const { ReactQueryDevtools } = await import('..')
-      expect(ReactQueryDevtools({})).toBeNull()
+      const { ReactQueryDevtools: ProductionDevtools } = await import('..')
+      expect(ProductionDevtools({})).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 779498826d..a1e15494c1 100644
--- a/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx
+++ b/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx
@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { render } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
+import type { ReactQueryDevtoolsPanel as ReactQueryDevtoolsPanelComponent } from '../ReactQueryDevtoolsPanel'
 
 const mountMock = vi.fn()
 const unmountMock = vi.fn()
@@ -24,24 +25,22 @@ vi.mock('@tanstack/query-devtools', () => ({
 }))
 
 describe('ReactQueryDevtoolsPanel', () => {
-  beforeEach(() => {
+  let ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanelComponent
+  let queryClient: QueryClient
+
+  beforeEach(async () => {
     vi.clearAllMocks()
+    ;({ ReactQueryDevtoolsPanel } = await import('../ReactQueryDevtoolsPanel'))
+    queryClient = new QueryClient()
   })
 
-  it('should throw an error if no query client has been set', async () => {
-    const { ReactQueryDevtoolsPanel } =
-      await import('../ReactQueryDevtoolsPanel')
-
+  it('should throw an error if no query client has been set', () => {
     expect(() => render(<ReactQueryDevtoolsPanel />)).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()
-
+  it('should not throw an error if query client is provided via context', () => {
     expect(() =>
       render(
         <QueryClientProvider client={queryClient}>
@@ -52,21 +51,14 @@ describe('ReactQueryDevtoolsPanel', () => {
     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()
-
+  it('should not throw an error if query client is provided via props', () => {
     expect(() =>
       render(<ReactQueryDevtoolsPanel client={queryClient} />),
     ).not.toThrow()
     expect(mountMock).toHaveBeenCalled()
   })
 
-  it('should forward "onClose" to the devtools instance', async () => {
-    const { ReactQueryDevtoolsPanel } =
-      await import('../ReactQueryDevtoolsPanel')
-    const queryClient = new QueryClient()
+  it('should forward "onClose" to the devtools instance', () => {
     const onClose = vi.fn()
 
     render(<ReactQueryDevtoolsPanel client={queryClient} onClose={onClose} />)
@@ -74,20 +66,13 @@ describe('ReactQueryDevtoolsPanel', () => {
     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()
-
+  it('should default "onClose" to a no-op function when the prop is omitted', () => {
     render(<ReactQueryDevtoolsPanel client={queryClient} />)
 
     expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function))
   })
 
-  it('should forward "errorTypes" to the devtools instance', async () => {
-    const { ReactQueryDevtoolsPanel } =
-      await import('../ReactQueryDevtoolsPanel')
-    const queryClient = new QueryClient()
+  it('should forward "errorTypes" to the devtools instance', () => {
     const errorTypes = [
       { name: 'Network', initializer: () => new Error('Network') },
     ]
@@ -99,41 +84,25 @@ describe('ReactQueryDevtoolsPanel', () => {
     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()
-
+  it('should default "errorTypes" to an empty array when the prop is omitted', () => {
     render(<ReactQueryDevtoolsPanel client={queryClient} />)
 
     expect(setErrorTypesMock).toHaveBeenCalledWith([])
   })
 
-  it('should forward "theme" to the devtools instance', async () => {
-    const { ReactQueryDevtoolsPanel } =
-      await import('../ReactQueryDevtoolsPanel')
-    const queryClient = new QueryClient()
-
+  it('should forward "theme" to the devtools instance', () => {
     render(<ReactQueryDevtoolsPanel client={queryClient} theme="dark" />)
 
     expect(setThemeMock).toHaveBeenCalledWith('dark')
   })
 
-  it('should forward the resolved "QueryClient" via "setClient"', async () => {
-    const { ReactQueryDevtoolsPanel } =
-      await import('../ReactQueryDevtoolsPanel')
-    const queryClient = new QueryClient()
-
+  it('should forward the resolved "QueryClient" via "setClient"', () => {
     render(<ReactQueryDevtoolsPanel client={queryClient} />)
 
     expect(setClientMock).toHaveBeenCalledWith(queryClient)
   })
 
-  it('should forward "styleNonce" to the devtools constructor', async () => {
-    const { ReactQueryDevtoolsPanel } =
-      await import('../ReactQueryDevtoolsPanel')
-    const queryClient = new QueryClient()
-
+  it('should forward "styleNonce" to the devtools constructor', () => {
     render(<ReactQueryDevtoolsPanel client={queryClient} styleNonce="abc" />)
 
     expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith(
@@ -141,10 +110,7 @@ describe('ReactQueryDevtoolsPanel', () => {
     )
   })
 
-  it('should forward "shadowDOMTarget" to the devtools constructor', async () => {
-    const { ReactQueryDevtoolsPanel } =
-      await import('../ReactQueryDevtoolsPanel')
-    const queryClient = new QueryClient()
+  it('should forward "shadowDOMTarget" to the devtools constructor', () => {
     const shadowDOMTarget = document
       .createElement('div')
       .attachShadow({ mode: 'open' })
@@ -161,11 +127,7 @@ describe('ReactQueryDevtoolsPanel', () => {
     )
   })
 
-  it('should forward "hideDisabledQueries" to the devtools constructor', async () => {
-    const { ReactQueryDevtoolsPanel } =
-      await import('../ReactQueryDevtoolsPanel')
-    const queryClient = new QueryClient()
-
+  it('should forward "hideDisabledQueries" to the devtools constructor', () => {
     render(
       <ReactQueryDevtoolsPanel
         client={queryClient}
@@ -178,11 +140,7 @@ describe('ReactQueryDevtoolsPanel', () => {
     )
   })
 
-  it('should preserve the default container height when "style" omits "height"', async () => {
-    const { ReactQueryDevtoolsPanel } =
-      await import('../ReactQueryDevtoolsPanel')
-    const queryClient = new QueryClient()
-
+  it('should preserve the default container height when "style" omits "height"', () => {
     const { container } = render(
       <ReactQueryDevtoolsPanel
         client={queryClient}
@@ -196,11 +154,7 @@ describe('ReactQueryDevtoolsPanel', () => {
     })
   })
 
-  it('should let "style" override the default container height on the rendered element', async () => {
-    const { ReactQueryDevtoolsPanel } =
-      await import('../ReactQueryDevtoolsPanel')
-    const queryClient = new QueryClient()
-
+  it('should let "style" override the default container height on the rendered element', () => {
     const { container } = render(
       <ReactQueryDevtoolsPanel
         client={queryClient}
@@ -214,11 +168,7 @@ describe('ReactQueryDevtoolsPanel', () => {
     })
   })
 
-  it('should call "unmount" on the devtools instance when the component unmounts', async () => {
-    const { ReactQueryDevtoolsPanel } =
-      await import('../ReactQueryDevtoolsPanel')
-    const queryClient = new QueryClient()
-
+  it('should call "unmount" on the devtools instance when the component unmounts', () => {
     const { unmount } = render(<ReactQueryDevtoolsPanel client={queryClient} />)
     unmount()
 
@@ -230,8 +180,9 @@ describe('ReactQueryDevtoolsPanel', () => {
     vi.resetModules()
 
     try {
-      const { ReactQueryDevtoolsPanel } = await import('..')
-      expect(ReactQueryDevtoolsPanel({})).toBeNull()
+      const { ReactQueryDevtoolsPanel: ProductionDevtoolsPanel } =
+        await import('..')
+      expect(ProductionDevtoolsPanel({})).toBeNull()
     } finally {
       vi.unstubAllEnvs()
       vi.resetModules()