[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> ); ```
Ricky committed
Dec 18, 2024 at 13:29 UTC
e1d843f4d8776bbf5d4fbd12a39bcfd2c565f900
1 file changed
+34
packages/react/src/__tests__/ReactStrictMode-test.internal.js
+34
@@ -179,6 +179,40 @@ describe('ReactStrictMode', () => {
179
'B: useEffect mount',
180
]);
181
});
182
+
183
+ it('should support nested strict mode on initial mount', async () => {
184
+ function Wrapper({children}) {
185
+ return children;
186
+ }
187
+ await act(() => {
188
+ const container = document.createElement('div');
189
+ const root = ReactDOMClient.createRoot(container);
190
+ root.render(
191
+ <Wrapper>
192
+ <Component label="A" />
193
+ <React.StrictMode>
194
+ <Component label="B" />,
195
+ </React.StrictMode>
196
+ ,
197
+ </Wrapper>,
198
+ );
199
+ });
200
+
201
+ expect(log).toEqual([
202
+ 'A: render',
203
+ 'B: render',
204
+ 'B: render',
205
+ 'A: useLayoutEffect mount',
206
+ 'B: useLayoutEffect mount',
207
+ 'A: useEffect mount',
208
+ 'B: useEffect mount',
209
+ // TODO: this is currently broken
210
+ // 'B: useLayoutEffect unmount',
211
+ // 'B: useEffect unmount',
212
+ // 'B: useLayoutEffect mount',
213
+ // 'B: useEffect mount',
214
+ ]);
215
+ });
216
}
217
});
218
});