Add test starting from hidden

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" />);
+ });
 });