From e1d843f4d8776bbf5d4fbd12a39bcfd2c565f900 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Wed, 18 Dec 2024 13:29:41 -0500
Subject: [PATCH] [tests] <StrictMode /> nested in tree is broken (#31825)

Adds a test that shows using <StrictMode /> anywhere outside of the root
node will not fire strict effects.

This works:

```js
root.render(
  <StrictMode>
    <App>
      <Children />
    </App>
  </StrictMode>
);
  ```

  This does not fire strict effects on mount:
```js
root.render(
  <App>
    <StrictMode>
      <Children />
    </StrictMode>
  </App>
);
```
---
 .../ReactStrictMode-test.internal.js          | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
index ed9ee70279648..2867e06483792 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -179,6 +179,40 @@ describe('ReactStrictMode', () => {
           'B: useEffect mount',
         ]);
       });
+
+      it('should support nested strict mode on initial mount', async () => {
+        function Wrapper({children}) {
+          return children;
+        }
+        await act(() => {
+          const container = document.createElement('div');
+          const root = ReactDOMClient.createRoot(container);
+          root.render(
+            <Wrapper>
+              <Component label="A" />
+              <React.StrictMode>
+                <Component label="B" />,
+              </React.StrictMode>
+              ,
+            </Wrapper>,
+          );
+        });
+
+        expect(log).toEqual([
+          'A: render',
+          'B: render',
+          'B: render',
+          'A: useLayoutEffect mount',
+          'B: useLayoutEffect mount',
+          'A: useEffect mount',
+          'B: useEffect mount',
+          // TODO: this is currently broken
+          // 'B: useLayoutEffect unmount',
+          // 'B: useEffect unmount',
+          // 'B: useLayoutEffect mount',
+          // 'B: useEffect mount',
+        ]);
+      });
     }
   });
 });