fix impl

Author: mdjastrzebski

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">
@@ -33,6 +49,15 @@ test('does not warn when no options are passed', async () => {
   expect(_console.warn).not.toHaveBeenCalled();
 });
 
+test('supports null options', async () => {
+  const TestComponent = () => <Text testID="test">Test</Text>;
+
+  await render(<TestComponent />, null as any);
+
+  expect(screen.getByTestId('test')).toBeOnTheScreen();
+  expect(_console.warn).not.toHaveBeenCalled();
+});
+
 test('does not warn when only valid options are passed', async () => {
   const TestComponent = () => <Text testID="test">Test</Text>;
   const Wrapper = ({ children }: { children: React.ReactNode }) => <View>{children}</View>;
@@ -68,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/__tests__/suspense-fake-timers.test.tsx

@@ -14,8 +14,6 @@ afterEach(() => {
 });
 
 function Suspending({ promise, testID }: { promise: Promise<unknown>; testID: string }) {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore React 18 does not have `use` hook
   React.use(promise);
   return <View testID={testID} />;
 }

src/__tests__/suspense.test.tsx

@@ -12,8 +12,6 @@ afterEach(() => {
 });
 
 function Suspending({ promise, testID }: { promise: Promise<unknown>; testID: string }) {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore React 18 does not have `use` hook
   React.use(promise);
   return <View testID={testID} />;
 }

src/render.tsx

@@ -127,7 +127,7 @@ type StyleLike = Record<string, unknown>;
 
 function withHiddenStyle(style: StyleProp<StyleLike>): StyleProp<StyleLike> {
   if (style == null) {
-    return null;
+    return { display: 'none' };
   }
 
   return [style, { display: 'none' }];