feat: realistic instance hiding

src/__tests__/render.test.tsx

@@ -4,6 +4,22 @@ import { Text, View } from 'react-native';
 import { render, screen } from '..';
 import { _console, logger } from '../helpers/logger';
 
+function MaybeSuspend({
+  children,
+  promise,
+  suspend,
+}: {
+  children: React.ReactNode;
+  promise: Promise<unknown>;
+  suspend: boolean;
+}) {
+  if (suspend) {
+    React.use(promise);
+  }
+
+  return children;
+}
+
 test('renders a simple component', async () => {
   const TestComponent = () => (
     <View testID="container">
@@ -77,6 +93,64 @@ describe('render options', () => {
   });
 });
 
+describe('hidden instance props', () => {
+  test('sets hidden suspended elements with no style to display none', async () => {
+    const promise = new Promise<unknown>(() => {});
+
+    function TestComponent({ suspend }: { suspend: boolean }) {
+      return (
+        <React.Suspense fallback={<Text>Loading...</Text>}>
+          <MaybeSuspend promise={promise} suspend={suspend}>
+            <View testID="hidden-target">
+              <Text>Ready</Text>
+            </View>
+          </MaybeSuspend>
+        </React.Suspense>
+      );
+    }
+
+    await render(<TestComponent suspend={false} />);
+
+    expect(screen.getByText('Ready')).toBeOnTheScreen();
+
+    await screen.rerender(<TestComponent suspend />);
+
+    expect(screen.getByText('Loading...')).toBeOnTheScreen();
+    expect(
+      screen.getByTestId('hidden-target', { includeHiddenElements: true }).props.style,
+    ).toEqual({
+      display: 'none',
+    });
+  });
+
+  test('appends display none when suspending an element with existing style', async () => {
+    const promise = new Promise<unknown>(() => {});
+
+    function TestComponent({ suspend }: { suspend: boolean }) {
+      return (
+        <React.Suspense fallback={<Text>Loading...</Text>}>
+          <MaybeSuspend promise={promise} suspend={suspend}>
+            <View style={{ opacity: 0.5 }} testID="hidden-target">
+              <Text>Ready</Text>
+            </View>
+          </MaybeSuspend>
+        </React.Suspense>
+      );
+    }
+
+    await render(<TestComponent suspend={false} />);
+
+    expect(screen.getByText('Ready')).toBeOnTheScreen();
+
+    await screen.rerender(<TestComponent suspend />);
+
+    expect(screen.getByText('Loading...')).toBeOnTheScreen();
+    expect(
+      screen.getByTestId('hidden-target', { includeHiddenElements: true }).props.style,
+    ).toEqual([{ opacity: 0.5 }, { display: 'none' }]);
+  });
+});
+
 describe('component rendering', () => {
   test('render accepts RCTText component', async () => {
     await render(React.createElement('RCTText', { testID: 'text' }, 'Hello'));

src/render.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { StyleProp } from 'react-native';
 import {
   createRoot,
   type HostElement,
@@ -39,6 +40,10 @@ export async function render<T>(element: React.ReactElement<T>, options: RenderO
   const rendererOptions: RootOptions = {
     textComponentTypes: HOST_TEXT_NAMES,
     publicTextComponentTypes: ['Text'],
+    transformHiddenInstanceProps: ({ props }) => ({
+      ...props,
+      style: withHiddenStyle(props.style as StyleProp<StyleLike>),
+    }),
   };
 
   const wrap = (element: React.ReactElement) => (Wrapper ? <Wrapper>{element}</Wrapper> : element);
@@ -117,3 +122,13 @@ function makeDebug(renderer: Root): DebugFunction {
   }
   return debugImpl;
 }
+
+type StyleLike = Record<string, unknown>;
+
+function withHiddenStyle(style: StyleProp<StyleLike>): StyleProp<StyleLike> {
+  if (style == null) {
+    return { display: 'none' };
+  }
+
+  return [style, { display: 'none' }];
+}