Skip to content

Commit e1d843f

Browse files
authored
[tests] <StrictMode /> nested in tree is broken (facebook#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> ); ```
1 parent 1e9ef39 commit e1d843f

File tree

1 file changed

+34
-0
lines changed

1 file changed

+34
-0
lines changed

packages/react/src/__tests__/ReactStrictMode-test.internal.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,40 @@ describe('ReactStrictMode', () => {
179179
'B: useEffect mount',
180180
]);
181181
});
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+
});
182216
}
183217
});
184218
});

0 commit comments

Comments
 (0)