diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 01397d00004f..de17e49f156d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -301,6 +301,84 @@ describe('ReactDOMFizzServer', () => {
);
});
+ // @gate experimental
+ it('should asynchronously load a lazy component with sibling after', async () => {
+ const makeApp = () => {
+ let resolve;
+ const imports = new Promise(r => {
+ resolve = () => r({default: () => async});
+ });
+ const Lazy = React.lazy(() => imports);
+
+ // Test passes if you change:
+ // after
+ // to:
+ // after
+ const App = () => (
+
+ Loading...}>
+
+ after
+
+
+ );
+
+ return [App, resolve];
+ };
+
+ // Server-side
+ const [App, resolve] = makeApp();
+ await act(async () => {
+ const {pipe} = ReactDOMFizzServer.renderToPipeableStream();
+ pipe(writable);
+ });
+ expect(getVisibleChildren(container)).toEqual(
+
+ Loading...
+
,
+ );
+ await act(async () => {
+ resolve();
+ });
+ expect(getVisibleChildren(container)).toEqual(
+
+ async
+ after
+
,
+ );
+
+ // Client-side
+ const [HydrateApp, hydrateResolve] = makeApp();
+ await act(async () => {
+ ReactDOM.hydrateRoot(container, );
+ // Throws after flushAll:
+ // Warning: Prop `id` did not match. Server: "async" Client: "after"
+ // at span
+ // at Suspense
+ // at div
+ // at App
+ Scheduler.unstable_flushAll();
+ });
+
+ // nb: Honestly not really sure whether this should expect "loading..." or "async"
+ expect(getVisibleChildren(container)).toEqual(
+
+ async
+ after
+
,
+ );
+
+ await act(async () => {
+ hydrateResolve();
+ });
+ expect(getVisibleChildren(container)).toEqual(
+
+ async
+ after
+
,
+ );
+ });
+
// @gate experimental
it('should support nonce scripts', async () => {
CSPnonce = 'R4nd0m';