test(queries): unmount rendered roots between tests

renderHookWithClient created a React root per test but never tore it
down, so trees stayed mounted with live QueryClient observers until
worker teardown and async notifications could cross test boundaries.

Audited every test in the repo using createRoot: 51 of 53 already
unmount. The two that did not were both mine — voice.test.tsx here and
chats.test.tsx from #6223 — so both are fixed and the pattern is now
uniform.

Author: waleedlatif1

apps/sim/hooks/queries/chats.test.tsx

@@ -5,7 +5,7 @@ import { act, type ReactNode } from 'react'
 import { sleep } from '@sim/utils/helpers'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createRoot, type Root } from 'react-dom/client'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 const { mockRequestJson, mockInvalidateDeploymentQueries } = vi.hoisted(() => ({
   mockRequestJson: vi.fn(),
@@ -23,11 +23,15 @@ vi.mock('@/hooks/queries/deployments', async (importOriginal) => ({
 
 import { useCreateChat, useUpdateChat } from '@/hooks/queries/chats'
 
+/** Trees rendered by a test, torn down in afterEach so observers do not leak across tests. */
+const mountedRoots: Root[] = []
+
 function renderHookWithClient<T>(useHook: () => T): { getResult: () => T } {
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
   const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
   const container = document.createElement('div')
   const root: Root = createRoot(container)
+  mountedRoots.push(root)
   let result: T | undefined
 
   function Probe() {
@@ -71,6 +75,12 @@ const FORM_DATA = {
   includeToolCalls: false,
 }
 
+afterEach(() => {
+  act(() => {
+    for (const root of mountedRoots.splice(0)) root.unmount()
+  })
+})
+
 beforeEach(() => {
   vi.clearAllMocks()
   mockRequestJson.mockResolvedValue({ chatUrl: 'https://sim.ai/chat/my-chat', chatId: 'chat-1' })

apps/sim/hooks/queries/voice.test.tsx

@@ -5,19 +5,23 @@ import { act, type ReactNode } from 'react'
 import { sleep } from '@sim/utils/helpers'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createRoot, type Root } from 'react-dom/client'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 const { mockRequestJson } = vi.hoisted(() => ({ mockRequestJson: vi.fn() }))
 
 vi.mock('@/lib/api/client/request', () => ({ requestJson: mockRequestJson }))
 
 import { useVoiceSettings, voiceSettingsKeys } from '@/hooks/queries/voice'
 
+/** Trees rendered by a test, torn down in afterEach so observers do not leak across tests. */
+const mountedRoots: Root[] = []
+
 function renderHookWithClient<T>(useHook: () => T): { getResult: () => T } {
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
   const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
   const container = document.createElement('div')
   const root: Root = createRoot(container)
+  mountedRoots.push(root)
   let result: T | undefined
 
   function Probe() {
@@ -48,6 +52,12 @@ async function flush() {
   })
 }
 
+afterEach(() => {
+  act(() => {
+    for (const root of mountedRoots.splice(0)) root.unmount()
+  })
+})
+
 beforeEach(() => {
   vi.clearAllMocks()
 })