Skip to content

Commit

Permalink
[tests] <StrictMode /> nested in tree is broken (facebook#31825)
Browse files Browse the repository at this point in the history
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>
);
```
  • Loading branch information
rickhanlonii authored Dec 18, 2024
1 parent 1e9ef39 commit e1d843f
Showing 1 changed file with 34 additions and 0 deletions.
34 changes: 34 additions & 0 deletions packages/react/src/__tests__/ReactStrictMode-test.internal.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
]);
});
}
});
});

0 comments on commit e1d843f

Please sign in to comment.