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

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(