Add test starting from hidden

rickhanlonii · acdlite · commit 129640c0f770 · 2021-06-01T15:43:02.000-04:00
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -218,7 +218,7 @@ describe('ReactOffscreen', () => {
 
   // @gate experimental
   // @gate enableSuspenseLayoutEffectSemantics
-  it('mounts/unmounts layout effects when visibility changes', async () => {
+  it('mounts/unmounts layout effects when visibility changes (starting visible)', async () => {
     function Child({text}) {
       useLayoutEffect(() => {
         Scheduler.unstable_yieldValue('Mount layout');
@@ -265,4 +265,58 @@ describe('ReactOffscreen', () => {
     expect(Scheduler).toHaveYielded(['Child', 'Mount layout']);
     expect(root).toMatchRenderedOutput(<span prop="Child" />);
   });
+
+  // @gate experimental
+  // @gate enableSuspenseLayoutEffectSemantics
+  it('mounts/unmounts layout effects when visibility changes (starting hidden)', async () => {
+    function Child({text}) {
+      useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Mount layout');
+        return () => {
+          Scheduler.unstable_yieldValue('Unmount layout');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      // Start the tree hidden. The layout effect is not mounted.
+      root.render(
+        <Offscreen mode="hidden">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Child']);
+    // TODO: Offscreen does not yet hide/unhide children correctly. Until we do,
+    // it should only be used inside a host component wrapper whose visibility
+    // is toggled simultaneously.
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+
+    // Show the tree. The layout effect is mounted.
+    await ReactNoop.act(async () => {
+      root.render(
+        <Offscreen mode="visible">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Child', 'Mount layout']);
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+
+    // Hide the tree again. The layout effect is un-mounted.
+    await ReactNoop.act(async () => {
+      root.render(
+        <Offscreen mode="hidden">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Unmount layout', 'Child']);
+    // TODO: Offscreen does not yet hide/unhide children correctly. Until we do,
+    // it should only be used inside a host component wrapper whose visibility
+    // is toggled simultaneously.
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+  });
 });
