test(cli): refactor tests for async render utilities (#23252)

packages/cli/src/ui/components/ToolConfirmationQueue.test.tsx

@@ -5,6 +5,7 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { act } from 'react';
 import { Box } from 'ink';
 import { ToolConfirmationQueue } from './ToolConfirmationQueue.js';
 import { StreamingState } from '../types.js';
@@ -79,7 +80,7 @@ describe('ToolConfirmationQueue', () => {
       total: 3,
     };
 
-    const { lastFrame, waitUntilReady, unmount } = await renderWithProviders(
+    const { lastFrame, unmount } = await renderWithProviders(
       <ToolConfirmationQueue
         confirmingTool={confirmingTool as unknown as ConfirmingToolState}
       />,
@@ -90,7 +91,6 @@ describe('ToolConfirmationQueue', () => {
         },
       },
     );
-    await waitUntilReady();
 
     const output = lastFrame();
     expect(output).toContain('Action Required');
@@ -117,7 +117,7 @@ describe('ToolConfirmationQueue', () => {
       total: 1,
     };
 
-    const { lastFrame, waitUntilReady, unmount } = await renderWithProviders(
+    const { lastFrame, unmount } = await renderWithProviders(
       <ToolConfirmationQueue
         confirmingTool={confirmingTool as unknown as ConfirmingToolState}
       />,
@@ -128,7 +128,6 @@ describe('ToolConfirmationQueue', () => {
         },
       },
     );
-    await waitUntilReady();
 
     expect(lastFrame({ allowEmpty: true })).toBe('');
     unmount();
@@ -156,7 +155,7 @@ describe('ToolConfirmationQueue', () => {
       total: 1,
     };
 
-    const { lastFrame, waitUntilReady, unmount } = await renderWithProviders(
+    const { lastFrame, unmount } = await renderWithProviders(
       <Box flexDirection="column" height={30}>
         <ToolConfirmationQueue
           confirmingTool={confirmingTool as unknown as ConfirmingToolState}
@@ -176,7 +175,6 @@ describe('ToolConfirmationQueue', () => {
         },
       },
     );
-    await waitUntilReady();
 
     await waitFor(() =>
       expect(lastFrame()?.toLowerCase()).toContain(
@@ -210,7 +208,7 @@ describe('ToolConfirmationQueue', () => {
     };
 
     // Use a small availableTerminalHeight to force truncation
-    const { lastFrame, waitUntilReady, unmount } = await renderWithProviders(
+    const { lastFrame, unmount } = await renderWithProviders(
       <ToolConfirmationQueue
         confirmingTool={confirmingTool as unknown as ConfirmingToolState}
       />,
@@ -226,7 +224,6 @@ describe('ToolConfirmationQueue', () => {
         },
       },
     );
-    await waitUntilReady();
 
     // With availableTerminalHeight = 10:
     // maxHeight = Math.max(10 - 1, 4) = 9
@@ -261,11 +258,7 @@ describe('ToolConfirmationQueue', () => {
       total: 1,
     };
 
-    const {
-      lastFrame,
-      waitUntilReady,
-      unmount = vi.fn(),
-    } = await renderWithProviders(
+    const { lastFrame, unmount } = await renderWithProviders(
       <ToolConfirmationQueue
         confirmingTool={confirmingTool as unknown as ConfirmingToolState}
       />,
@@ -280,7 +273,6 @@ describe('ToolConfirmationQueue', () => {
         },
       },
     );
-    await waitUntilReady();
 
     // Calculation:
     // availableTerminalHeight: 20 -> maxHeight: 19 (20-1)
@@ -321,7 +313,7 @@ describe('ToolConfirmationQueue', () => {
       total: 1,
     };
 
-    const { lastFrame, waitUntilReady, unmount } = await renderWithProviders(
+    const { lastFrame, unmount } = await renderWithProviders(
       <ToolConfirmationQueue
         confirmingTool={confirmingTool as unknown as ConfirmingToolState}
       />,
@@ -335,7 +327,6 @@ describe('ToolConfirmationQueue', () => {
         },
       },
     );
-    await waitUntilReady();
 
     const output = lastFrame();
     expect(output).not.toContain('Press CTRL-O to show more lines');
@@ -360,7 +351,7 @@ describe('ToolConfirmationQueue', () => {
       total: 1,
     };
 
-    const { lastFrame, waitUntilReady, unmount } = await renderWithProviders(
+    const { lastFrame, unmount } = await renderWithProviders(
       <ToolConfirmationQueue
         confirmingTool={confirmingTool as unknown as ConfirmingToolState}
       />,
@@ -371,7 +362,6 @@ describe('ToolConfirmationQueue', () => {
         },
       },
     );
-    await waitUntilReady();
 
     const output = lastFrame();
     expect(output).toMatchSnapshot();
@@ -398,16 +388,18 @@ describe('ToolConfirmationQueue', () => {
       total: 1,
     };
 
-    const { lastFrame, unmount } = await renderWithProviders(
-      <ToolConfirmationQueue
-        confirmingTool={confirmingTool as unknown as ConfirmingToolState}
-      />,
-      {
-        config: mockConfig,
-        uiState: {
-          terminalWidth: 80,
+    const { lastFrame, unmount } = await act(async () =>
+      renderWithProviders(
+        <ToolConfirmationQueue
+          confirmingTool={confirmingTool as unknown as ConfirmingToolState}
+        />,
+        {
+          config: mockConfig,
+          uiState: {
+            terminalWidth: 80,
+          },
         },
-      },
+      ),
     );
 
     await waitFor(() => {