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

packages/cli/src/test-utils/render.test.tsx

@@ -12,24 +12,18 @@ import { waitFor } from './async.js';
 
 describe('render', () => {
   it('should render a component', async () => {
-    const { lastFrame, waitUntilReady, unmount } = render(
-      <Text>Hello World</Text>,
-    );
-    await waitUntilReady();
+    const { lastFrame, unmount } = await render(<Text>Hello World</Text>);
     expect(lastFrame()).toBe('Hello World\n');
     unmount();
   });
 
   it('should support rerender', async () => {
-    const { lastFrame, rerender, waitUntilReady, unmount } = render(
+    const { lastFrame, rerender, waitUntilReady, unmount } = await render(
       <Text>Hello</Text>,
     );
-    await waitUntilReady();
     expect(lastFrame()).toBe('Hello\n');
 
-    await act(async () => {
-      rerender(<Text>World</Text>);
-    });
+    await act(async () => rerender(<Text>World</Text>));
     await waitUntilReady();
     expect(lastFrame()).toBe('World\n');
     unmount();
@@ -42,10 +36,8 @@ describe('render', () => {
       return <Text>Hello</Text>;
     }
 
-    const { unmount, waitUntilReady } = render(<TestComponent />);
-    await waitUntilReady();
+    const { unmount } = await render(<TestComponent />);
     unmount();
-
     expect(cleanupMock).toHaveBeenCalled();
   });
 });
@@ -54,36 +46,27 @@ describe('renderHook', () => {
   it('should rerender with previous props when called without arguments', async () => {
     const useTestHook = ({ value }: { value: number }) => {
       const [count, setCount] = useState(0);
-      useEffect(() => {
-        setCount((c) => c + 1);
-      }, [value]);
+      useEffect(() => setCount((c) => c + 1), [value]);
       return { count, value };
     };
 
-    const { result, rerender, waitUntilReady, unmount } = renderHook(
+    const { result, rerender, waitUntilReady, unmount } = await renderHook(
       useTestHook,
-      {
-        initialProps: { value: 1 },
-      },
+      { initialProps: { value: 1 } },
     );
-    await waitUntilReady();
 
     expect(result.current.value).toBe(1);
     await waitFor(() => expect(result.current.count).toBe(1));
 
     // Rerender with new props
-    await act(async () => {
-      rerender({ value: 2 });
-    });
+    await act(async () => rerender({ value: 2 }));
     await waitUntilReady();
     expect(result.current.value).toBe(2);
     await waitFor(() => expect(result.current.count).toBe(2));
 
     // Rerender without arguments should use previous props (value: 2)
     // This would previously crash or pass undefined if not fixed
-    await act(async () => {
-      rerender();
-    });
+    await act(async () => rerender());
     await waitUntilReady();
     expect(result.current.value).toBe(2);
     // Count should not increase because value didn't change
@@ -98,14 +81,11 @@ describe('renderHook', () => {
     };
 
     const { result, rerender, waitUntilReady, unmount } =
-      renderHook(useTestHook);
-    await waitUntilReady();
+      await renderHook(useTestHook);
 
     expect(result.current.count).toBe(0);
 
-    await act(async () => {
-      rerender();
-    });
+    await act(async () => rerender());
     await waitUntilReady();
     expect(result.current.count).toBe(0);
     unmount();
@@ -113,19 +93,14 @@ describe('renderHook', () => {
 
   it('should update props if undefined is passed explicitly', async () => {
     const useTestHook = (val: string | undefined) => val;
-    const { result, rerender, waitUntilReady, unmount } = renderHook(
+    const { result, rerender, waitUntilReady, unmount } = await renderHook(
       useTestHook,
-      {
-        initialProps: 'initial' as string | undefined,
-      },
+      { initialProps: 'initial' },
     );
-    await waitUntilReady();
 
     expect(result.current).toBe('initial');
 
-    await act(async () => {
-      rerender(undefined);
-    });
+    await act(async () => rerender(undefined));
     await waitUntilReady();
     expect(result.current).toBeUndefined();
     unmount();

packages/cli/src/test-utils/render.tsx

@@ -257,13 +257,9 @@ class XtermStdout extends EventEmitter {
           return currentFrame !== '';
         }
 
-        // If both are empty, it's a match.
-        // We consider undefined lastRenderOutput as effectively empty for this check
-        // to support hook testing where Ink may skip rendering completely.
-        if (
-          (this.lastRenderOutput === undefined || expectedFrame === '') &&
-          currentFrame === ''
-        ) {
+        // If Ink expects nothing (no new static content and no dynamic output),
+        // we consider it a match because the terminal buffer will just hold the historical static content.
+        if (expectedFrame === '') {
           return true;
         }
 
@@ -271,8 +267,8 @@ class XtermStdout extends EventEmitter {
           return false;
         }
 
-        // If Ink expects nothing but terminal has content, or vice-versa, it's NOT a match.
-        if (expectedFrame === '' || currentFrame === '') {
+        // If the terminal is empty but Ink expects something, it's not a match.
+        if (currentFrame === '') {
           return false;
         }
 
@@ -382,13 +378,11 @@ export type RenderInstance = {
 
 const instances: InkInstance[] = [];
 
-// Wrapper around ink's render that ensures act() is called and uses Xterm for output
-export const render = (
+export const render = async (
   tree: React.ReactElement,
   terminalWidth?: number,
-): Omit<
-  RenderInstance,
-  'capturedOverflowState' | 'capturedOverflowActions'
+): Promise<
+  Omit<RenderInstance, 'capturedOverflowState' | 'capturedOverflowActions'>
 > => {
   const cols = terminalWidth ?? 100;
   // We use 1000 rows to avoid windows with incorrect snapshots if a correct
@@ -437,6 +431,8 @@ export const render = (
 
   instances.push(instance);
 
+  await stdout.waitUntilReady();
+
   return {
     rerender: (newTree: React.ReactElement) => {
       act(() => {
@@ -751,7 +747,10 @@ export const renderWithProviders = async (
     </AppContext.Provider>
   );
 
-  const renderResult = render(wrapWithProviders(component), terminalWidth);
+  const renderResult = await render(
+    wrapWithProviders(component),
+    terminalWidth,
+  );
 
   return {
     ...renderResult,
@@ -765,19 +764,19 @@ export const renderWithProviders = async (
   };
 };
 
-export function renderHook<Result, Props>(
+export async function renderHook<Result, Props>(
   renderCallback: (props: Props) => Result,
   options?: {
     initialProps?: Props;
     wrapper?: React.ComponentType<{ children: React.ReactNode }>;
   },
-): {
+): Promise<{
   result: { current: Result };
   rerender: (props?: Props) => void;
   unmount: () => void;
   waitUntilReady: () => Promise<void>;
   generateSvg: () => string;
-} {
+}> {
   const result = { current: undefined as unknown as Result };
 
   let currentProps = options?.initialProps as Props;
@@ -800,17 +799,15 @@ export function renderHook<Result, Props>(
   let waitUntilReady: () => Promise<void> = async () => {};
   let generateSvg: () => string = () => '';
 
-  act(() => {
-    const renderResult = render(
-      <Wrapper>
-        <TestComponent renderCallback={renderCallback} props={currentProps} />
-      </Wrapper>,
-    );
-    inkRerender = renderResult.rerender;
-    unmount = renderResult.unmount;
-    waitUntilReady = renderResult.waitUntilReady;
-    generateSvg = renderResult.generateSvg;
-  });
+  const renderResult = await render(
+    <Wrapper>
+      <TestComponent renderCallback={renderCallback} props={currentProps} />
+    </Wrapper>,
+  );
+  inkRerender = renderResult.rerender;
+  unmount = renderResult.unmount;
+  waitUntilReady = renderResult.waitUntilReady;
+  generateSvg = renderResult.generateSvg;
 
   function rerender(props?: Props) {
     if (arguments.length > 0) {
@@ -864,7 +861,13 @@ export async function renderHookWithProviders<Result, Props>(
 
   const Wrapper = options.wrapper || (({ children }) => <>{children}</>);
 
-  let renderResult: ReturnType<typeof render>;
+  let renderResult: RenderInstance & {
+    simulateClick: (
+      col: number,
+      row: number,
+      button?: 0 | 1 | 2,
+    ) => Promise<void>;
+  };
 
   await act(async () => {
     renderResult = await renderWithProviders(