Add test for hiding children after layout destroy (#24483)

rickhanlonii · web-flow · commit a10a9a6b5b89 · 2022-05-03T14:24:23.000-04:00
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -310,6 +310,47 @@ describe('ReactOffscreen', () => {
     expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
   });
 
+  // @gate experimental || www
+  // @gate enableSuspenseLayoutEffectSemantics
+  // @gate enableFlipOffscreenUnhideOrder
+  it('hides children of offscreen after layout effects are destroyed', async () => {
+    const root = ReactNoop.createRoot();
+    function Child({text}) {
+      useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Mount layout');
+        return () => {
+          // The child should not be hidden yet.
+          expect(root).toMatchRenderedOutput(<span prop="Child" />);
+          Scheduler.unstable_yieldValue('Unmount layout');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    await act(async () => {
+      root.render(
+        <Offscreen mode="visible">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Child', 'Mount layout']);
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+
+    // Hide the tree. The layout effect is unmounted.
+    await act(async () => {
+      root.render(
+        <Offscreen mode="hidden">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Unmount layout', 'Child']);
+
+    // After the layout effect is unmounted, the child is hidden.
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
+  });
+
   // @gate www
   it('does not toggle effects for LegacyHidden component', async () => {
     // LegacyHidden is meant to be the same as offscreen except it doesn't
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
@@ -38,7 +38,7 @@ export const skipUnmountedBoundaries = true;
 //
 // TODO: Finish rolling out in www
 export const enableSuspenseLayoutEffectSemantics = true;
-export const enableFlipOffscreenUnhideOrder = false;
+export const enableFlipOffscreenUnhideOrder = true;
 
 // TODO: Finish rolling out in www
 export const enableClientRenderFallbackOnTextMismatch = true;
