mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Add a regression test for Force unwind work loop during selective hydration #25695
This commit is contained in:
@@ -1772,4 +1772,71 @@ describe('ReactDOMServerSelectiveHydration', () => {
|
||||
|
||||
document.body.removeChild(container);
|
||||
});
|
||||
|
||||
it('regression test: can unwind context on selective hydration interruption', async () => {
|
||||
const Context = React.createContext('DefaultContext');
|
||||
|
||||
function ContextReader(props) {
|
||||
const value = React.useContext(Context);
|
||||
Scheduler.unstable_yieldValue(value);
|
||||
return null;
|
||||
}
|
||||
|
||||
function Child({text}) {
|
||||
Scheduler.unstable_yieldValue(text);
|
||||
return <span>{text}</span>;
|
||||
}
|
||||
const ChildWithBoundary = React.memo(function({text}) {
|
||||
return (
|
||||
<Suspense fallback="Loading...">
|
||||
<Child text={text} />
|
||||
</Suspense>
|
||||
);
|
||||
});
|
||||
|
||||
function App({a}) {
|
||||
Scheduler.unstable_yieldValue('App');
|
||||
React.useEffect(() => {
|
||||
Scheduler.unstable_yieldValue('Commit');
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<Context.Provider value="SiblingContext">
|
||||
<ChildWithBoundary text={a} />
|
||||
</Context.Provider>
|
||||
<ContextReader />
|
||||
</>
|
||||
);
|
||||
}
|
||||
const finalHTML = ReactDOMServer.renderToString(<App a="A" />);
|
||||
expect(Scheduler).toHaveYielded(['App', 'A', 'DefaultContext']);
|
||||
const container = document.createElement('div');
|
||||
container.innerHTML = finalHTML;
|
||||
document.body.appendChild(container);
|
||||
|
||||
const spanA = container.getElementsByTagName('span')[0];
|
||||
|
||||
await act(async () => {
|
||||
const root = ReactDOMClient.hydrateRoot(container, <App a="A" />);
|
||||
expect(Scheduler).toFlushAndYieldThrough([
|
||||
'App',
|
||||
'DefaultContext',
|
||||
'Commit',
|
||||
]);
|
||||
|
||||
TODO_scheduleIdleDOMSchedulerTask(() => {
|
||||
root.render(<App a="AA" />);
|
||||
});
|
||||
expect(Scheduler).toFlushAndYieldThrough(['App', 'AA', 'DefaultContext']);
|
||||
|
||||
dispatchClickEvent(spanA);
|
||||
expect(Scheduler).toHaveYielded(['A']);
|
||||
expect(Scheduler).toFlushAndYield([
|
||||
'App',
|
||||
'AA',
|
||||
'DefaultContext',
|
||||
'Commit',
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user