From e51984ff01f7c73b9de9f3480ff16baef455a475 Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@fb.com>
Date: Wed, 19 Oct 2022 17:46:41 -0400
Subject: [PATCH 1/3] Add helper function to test case (no actual changes)

---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 204 ++++++++----------
 1 file changed, 93 insertions(+), 111 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 62a0bc4d10294..ca9ef2c618187 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -289,6 +289,14 @@ describe('ReactDOMFizzServer', () => {
     return <As>{readText(text)}</As>;
   }
 
+  function renderToPipeableStream(jsx, options) {
+    if (options) {
+      return ReactDOMFizzServer.renderToPipeableStream(jsx, options);
+    } else {
+      return ReactDOMFizzServer.renderToPipeableStream(jsx);
+    }
+  }
+
   it('should asynchronously load a lazy component', async () => {
     let resolveA;
     const LazyA = React.lazy(() => {
@@ -313,7 +321,7 @@ describe('ReactDOMFizzServer', () => {
     };
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <div>
           <div>
             <Suspense fallback={<Text text="Loading..." />}>
@@ -379,7 +387,7 @@ describe('ReactDOMFizzServer', () => {
     // Server-side
     const [App, resolve] = makeApp();
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      const {pipe} = renderToPipeableStream(<App />);
       pipe(writable);
     });
     expect(getVisibleChildren(container)).toEqual(
@@ -432,7 +440,7 @@ describe('ReactDOMFizzServer', () => {
       });
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <div>
             <Suspense fallback={<Text text="Loading..." />}>
               <Lazy text="Hello" />
@@ -492,13 +500,10 @@ describe('ReactDOMFizzServer', () => {
     loggedErrors.length = 0;
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
-        <App isClient={false} />,
-        {
-          bootstrapScriptContent: '__INIT__();',
-          onError,
-        },
-      );
+      const {pipe} = renderToPipeableStream(<App isClient={false} />, {
+        bootstrapScriptContent: '__INIT__();',
+        onError,
+      });
       pipe(writable);
     });
     expect(loggedErrors).toEqual([]);
@@ -554,7 +559,7 @@ describe('ReactDOMFizzServer', () => {
     });
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <div>
           <Suspense fallback={<Text text="Loading..." />}>
             {lazyElement}
@@ -603,7 +608,7 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <App isClient={false} />,
 
         {
@@ -699,7 +704,7 @@ describe('ReactDOMFizzServer', () => {
     loggedErrors.length = 0;
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <App />,
 
         {
@@ -767,7 +772,7 @@ describe('ReactDOMFizzServer', () => {
     loggedErrors.length = 0;
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <App />,
 
         {
@@ -823,7 +828,7 @@ describe('ReactDOMFizzServer', () => {
 
   it('should asynchronously load the suspense boundary', async () => {
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <div>
           <Suspense fallback={<Text text="Loading..." />}>
             <AsyncText text="Hello World" />
@@ -862,7 +867,7 @@ describe('ReactDOMFizzServer', () => {
     };
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+      const {pipe} = renderToPipeableStream(<App />, {
         bootstrapScriptContent: '__INIT__();',
       });
       pipe(writable);
@@ -936,7 +941,7 @@ describe('ReactDOMFizzServer', () => {
 
     // We originally suspend the boundary and start streaming the loading state.
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <App />,
 
         {
@@ -1018,9 +1023,7 @@ describe('ReactDOMFizzServer', () => {
 
     // We originally suspend the boundary and start streaming the loading state.
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
-        <App showMore={false} />,
-      );
+      const {pipe} = renderToPipeableStream(<App showMore={false} />);
       pipe(writable);
     });
 
@@ -1093,7 +1096,7 @@ describe('ReactDOMFizzServer', () => {
 
     let controls;
     await act(async () => {
-      controls = ReactDOMFizzServer.renderToPipeableStream(<App />, {onError});
+      controls = renderToPipeableStream(<App />, {onError});
       controls.pipe(writable);
     });
 
@@ -1163,7 +1166,7 @@ describe('ReactDOMFizzServer', () => {
     };
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         // We use two nested boundaries to flush out coverage of an old reentrancy bug.
         <Suspense fallback="Loading...">
           <Suspense fallback={<Text text="Loading A..." />}>
@@ -1187,7 +1190,7 @@ describe('ReactDOMFizzServer', () => {
     });
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <Suspense fallback={<Text text="Loading B..." />}>
           <Text text="This will show B: " />
           <div>
@@ -1283,7 +1286,7 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      const {pipe} = renderToPipeableStream(<App />);
       pipe(writable);
     });
 
@@ -1370,7 +1373,7 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      const {pipe} = renderToPipeableStream(<App />);
       pipe(writable);
     });
 
@@ -1423,7 +1426,7 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <App />,
 
         {
@@ -1509,7 +1512,7 @@ describe('ReactDOMFizzServer', () => {
 
     try {
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<A />);
+        const {pipe} = renderToPipeableStream(<A />);
         pipe(writable);
       });
 
@@ -1607,7 +1610,7 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <TestProvider ctx="A">
           <div>
             <Suspense fallback={[<Text text="Loading: " />, <TestConsumer />]}>
@@ -1664,7 +1667,7 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <div>
           <PrintA />
           <div>
@@ -1725,7 +1728,7 @@ describe('ReactDOMFizzServer', () => {
 
     const loggedErrors = [];
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <div>
           <PrintA />
           <div>
@@ -1793,7 +1796,7 @@ describe('ReactDOMFizzServer', () => {
 
     let controls;
     await act(async () => {
-      controls = ReactDOMFizzServer.renderToPipeableStream(
+      controls = renderToPipeableStream(
         <App isClient={false} />,
 
         {
@@ -1876,7 +1879,7 @@ describe('ReactDOMFizzServer', () => {
 
   it('should be able to abort the fallback if the main content finishes first', async () => {
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <Suspense fallback={<Text text="Loading Outer" />}>
           <div>
             <Suspense
@@ -1973,9 +1976,7 @@ describe('ReactDOMFizzServer', () => {
     await jest.runAllTimers();
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
-        <App isClient={false} />,
-      );
+      const {pipe} = renderToPipeableStream(<App isClient={false} />);
       pipe(writable);
     });
 
@@ -2085,7 +2086,7 @@ describe('ReactDOMFizzServer', () => {
 
     const loggedErrors = [];
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <Suspense fallback="Loading...">
           <App />
         </Suspense>,
@@ -2170,7 +2171,7 @@ describe('ReactDOMFizzServer', () => {
     }
     const loggedErrors = [];
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <Suspense fallback="Loading...">
           <App />
         </Suspense>,
@@ -2259,7 +2260,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
       expect(Scheduler).toHaveYielded(['Yay!']);
@@ -2349,7 +2350,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
       expect(Scheduler).toHaveYielded(['Yay!']);
@@ -2439,7 +2440,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
       expect(Scheduler).toHaveYielded(['Yay!']);
@@ -2492,7 +2493,7 @@ describe('ReactDOMFizzServer', () => {
       );
     }
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+      const {pipe} = renderToPipeableStream(<App />, {
         onError(error) {
           Scheduler.unstable_yieldValue('[s!] ' + error.message);
         },
@@ -2577,14 +2578,11 @@ describe('ReactDOMFizzServer', () => {
         );
       }
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
-          <App color="red" />,
-          {
-            onError(error) {
-              Scheduler.unstable_yieldValue('[s!] ' + error.message);
-            },
+        const {pipe} = renderToPipeableStream(<App color="red" />, {
+          onError(error) {
+            Scheduler.unstable_yieldValue('[s!] ' + error.message);
           },
-        );
+        });
         pipe(writable);
       });
       expect(Scheduler).toHaveYielded(['[s!] Oops.']);
@@ -2678,7 +2676,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <App fallbackText="Loading..." />,
           {
             onError(error) {
@@ -2807,7 +2805,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
       expect(Scheduler).toHaveYielded(['Yay!']);
@@ -2959,7 +2957,7 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      const {pipe} = renderToPipeableStream(<App />);
       pipe(writable);
     });
     expect(Scheduler).toHaveYielded(['A', 'B']);
@@ -3025,7 +3023,7 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      const {pipe} = renderToPipeableStream(<Foo />);
       pipe(writable);
     });
 
@@ -3047,9 +3045,7 @@ describe('ReactDOMFizzServer', () => {
     ]).map(item => <li key={item.get('value')}>{item.get('name')}</li>);
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
-        <ul>{mappedJSX}</ul>,
-      );
+      const {pipe} = renderToPipeableStream(<ul>{mappedJSX}</ul>);
       pipe(writable);
     });
     expect(getVisibleChildren(container)).toEqual(
@@ -3081,10 +3077,7 @@ describe('ReactDOMFizzServer', () => {
     let abort;
     const loggedErrors = [];
     await act(async () => {
-      const {
-        pipe,
-        abort: abortImpl,
-      } = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+      const {pipe, abort: abortImpl} = renderToPipeableStream(<App />, {
         onError(error) {
           // In this test we contrive erroring with strings so we push the error whereas in most
           // other tests we contrive erroring with Errors and push the message.
@@ -3167,10 +3160,7 @@ describe('ReactDOMFizzServer', () => {
     let abort;
     const loggedErrors = [];
     await act(async () => {
-      const {
-        pipe,
-        abort: abortImpl,
-      } = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+      const {pipe, abort: abortImpl} = renderToPipeableStream(<App />, {
         onError(error) {
           loggedErrors.push(error.message);
           return 'a digest';
@@ -3232,7 +3222,7 @@ describe('ReactDOMFizzServer', () => {
 
   it('warns in dev if you access digest from errorInfo in onRecoverableError', async () => {
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <div>
           <Suspense fallback={'loading...'}>
             <AsyncText text={'hello'} />
@@ -3309,7 +3299,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+        const {pipe} = renderToPipeableStream(<App />, {
           onError,
         });
         pipe(writable);
@@ -3357,7 +3347,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+        const {pipe} = renderToPipeableStream(<App />, {
           onError,
         });
         pipe(writable);
@@ -3397,7 +3387,7 @@ describe('ReactDOMFizzServer', () => {
       loggedErrors.length = 0;
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+        const {pipe} = renderToPipeableStream(<App />, {
           onError,
         });
         pipe(writable);
@@ -3435,7 +3425,7 @@ describe('ReactDOMFizzServer', () => {
 
   it('accepts an integrity property for bootstrapScripts and bootstrapModules', async () => {
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html>
           <head />
           <body>
@@ -3494,7 +3484,7 @@ describe('ReactDOMFizzServer', () => {
       const stringWithScriptsInIt =
         'prescription pre<scription pre<Scription pre</scRipTion pre</ScripTion </script><script><!-- <script> -->';
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<div />, {
+        const {pipe} = renderToPipeableStream(<div />, {
           bootstrapScriptContent:
             'window.__test_outlet = "This should have been replaced";var x = "' +
             stringWithScriptsInIt +
@@ -3515,7 +3505,7 @@ describe('ReactDOMFizzServer', () => {
       el.textContent = '{"one":1,\u2028\u2029"two":2}';
       const stringWithLSAndPSCharacters = el.textContent;
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<div />, {
+        const {pipe} = renderToPipeableStream(<div />, {
           bootstrapScriptContent:
             'let x = ' +
             stringWithLSAndPSCharacters +
@@ -3536,7 +3526,7 @@ describe('ReactDOMFizzServer', () => {
       // this boolean expression will be cast to a number due to the bitwise &. we will look for a truthy value (1) below
       const booleanLogicString = '1 < 2 & 3 > 1';
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<div />, {
+        const {pipe} = renderToPipeableStream(<div />, {
           bootstrapScriptContent:
             'let x = ' + booleanLogicString + '; window.__test_outlet = x;',
         });
@@ -3549,7 +3539,7 @@ describe('ReactDOMFizzServer', () => {
   // @gate enableFizzExternalRuntime
   it('supports option to load runtime as an external script', async () => {
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html>
           <head />
           <body>
@@ -3608,7 +3598,7 @@ describe('ReactDOMFizzServer', () => {
 
     const [ServerApp, serverResolve] = makeApp();
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<ServerApp />);
+      const {pipe} = renderToPipeableStream(<ServerApp />);
       pipe(writable);
     });
     await act(() => {
@@ -3684,9 +3674,7 @@ describe('ReactDOMFizzServer', () => {
 
     const [ServerApp, serverResolve] = makeApp();
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
-        <ServerApp text="initial" />,
-      );
+      const {pipe} = renderToPipeableStream(<ServerApp text="initial" />);
       pipe(writable);
     });
     await act(() => {
@@ -3763,9 +3751,7 @@ describe('ReactDOMFizzServer', () => {
 
     try {
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
-          <App text="initial" />,
-        );
+        const {pipe} = renderToPipeableStream(<App text="initial" />);
         pipe(writable);
       });
 
@@ -3854,7 +3840,7 @@ describe('ReactDOMFizzServer', () => {
     };
 
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      const {pipe} = renderToPipeableStream(<App />);
       pipe(writable);
     });
 
@@ -3946,7 +3932,7 @@ describe('ReactDOMFizzServer', () => {
 
     try {
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
 
@@ -4077,7 +4063,7 @@ describe('ReactDOMFizzServer', () => {
 
     try {
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
 
@@ -4200,7 +4186,7 @@ describe('ReactDOMFizzServer', () => {
 
     try {
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
 
@@ -4271,7 +4257,7 @@ describe('ReactDOMFizzServer', () => {
       );
     }
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      const {pipe} = renderToPipeableStream(<App />);
       pipe(writable);
     });
 
@@ -4317,7 +4303,7 @@ describe('ReactDOMFizzServer', () => {
       );
     }
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      const {pipe} = renderToPipeableStream(<App />);
       pipe(writable);
     });
 
@@ -4372,7 +4358,7 @@ describe('ReactDOMFizzServer', () => {
       );
     }
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html data-html="html">
           <AsyncNoOutput />
           <AsyncHead />
@@ -4413,7 +4399,7 @@ describe('ReactDOMFizzServer', () => {
     });
 
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html>
           <head />
           <body>
@@ -4470,9 +4456,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
-          <App name="Foo" />,
-        );
+        const {pipe} = renderToPipeableStream(<App name="Foo" />);
         pipe(writable);
       });
 
@@ -4510,9 +4494,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
-          <App name="Foo" />,
-        );
+        const {pipe} = renderToPipeableStream(<App name="Foo" />);
         pipe(writable);
       });
 
@@ -4562,7 +4544,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
 
@@ -4607,7 +4589,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         await afterImmediate();
         await act(() => resolveText('ello'));
         pipe(writable);
@@ -4651,7 +4633,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         await afterImmediate();
         await act(() => resolveText('world'));
         pipe(writable);
@@ -4689,7 +4671,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         await afterImmediate();
         await act(() => resolveText('world'));
         pipe(writable);
@@ -4738,7 +4720,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         await afterImmediate();
         await act(() => resolveText('world'));
         pipe(writable);
@@ -4823,7 +4805,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         await afterImmediate();
         await act(() => resolveText('world'));
         pipe(writable);
@@ -4879,7 +4861,7 @@ describe('ReactDOMFizzServer', () => {
 
       prepareJSDOMForTitle();
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
       expect(getVisibleChildren(container)).toEqual(<title>hello</title>);
@@ -4903,7 +4885,7 @@ describe('ReactDOMFizzServer', () => {
 
       prepareJSDOMForTitle();
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
       expect(getVisibleChildren(container)).toEqual(<title>hello</title>);
@@ -4941,7 +4923,7 @@ describe('ReactDOMFizzServer', () => {
         prepareJSDOMForTitle();
 
         await act(async () => {
-          const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+          const {pipe} = renderToPipeableStream(<App />);
           pipe(writable);
         });
         if (__DEV__) {
@@ -5025,7 +5007,7 @@ describe('ReactDOMFizzServer', () => {
         prepareJSDOMForTitle();
 
         await act(async () => {
-          const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+          const {pipe} = renderToPipeableStream(<App />);
           pipe(writable);
         });
         if (__DEV__) {
@@ -5086,7 +5068,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
 
@@ -5146,7 +5128,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
       expect(getVisibleChildren(container)).toEqual(['AB', 'C']);
@@ -5185,7 +5167,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
 
@@ -5254,7 +5236,7 @@ describe('ReactDOMFizzServer', () => {
 
       const reportedServerErrors = [];
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+        const {pipe} = renderToPipeableStream(<App />, {
           onError(error) {
             reportedServerErrors.push(error);
           },
@@ -5315,7 +5297,7 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
       expect(getVisibleChildren(container)).toEqual('Hi');
@@ -5342,7 +5324,7 @@ describe('ReactDOMFizzServer', () => {
         );
       }
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
       expect(getVisibleChildren(container)).toEqual(<button>0</button>);
@@ -5373,7 +5355,7 @@ describe('ReactDOMFizzServer', () => {
       let caughtError;
       try {
         await act(async () => {
-          const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+          const {pipe} = renderToPipeableStream(<App />, {
             onError(e) {
               reportedServerErrors.push(e);
             },
@@ -5402,7 +5384,7 @@ describe('ReactDOMFizzServer', () => {
         }
       }
       await act(async () => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
       expect(getVisibleChildren(container)).toEqual(<div />);

From a4662cbcbdef61cec68e3954d71c76a7bc9df300 Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@fb.com>
Date: Mon, 31 Oct 2022 17:00:27 -0400
Subject: [PATCH 2/3] Add comments, renames, and helper functions

---
 .../src/__tests__/ReactDOMFizzServer-test.js  |  36 ++---
 .../src/__tests__/ReactDOMFloat-test.js       | 125 ++++++++++--------
 .../server/ReactDOMServerExternalRuntime.js   |  11 +-
 .../react-dom/src/test-utils/FizzTestUtils.js | 125 ++++++++++++++++++
 packages/shared/ReactFeatureFlags.js          |   2 +
 5 files changed, 224 insertions(+), 75 deletions(-)
 create mode 100644 packages/react-dom/src/test-utils/FizzTestUtils.js

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index ca9ef2c618187..e5f57505eb9b8 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -8,6 +8,7 @@
  */
 
 'use strict';
+import {replaceScriptsAndMove, mergeOptions} from '../test-utils/FizzTestUtils';
 
 let JSDOM;
 let Stream;
@@ -30,6 +31,8 @@ let container;
 let buffer = '';
 let hasErrored = false;
 let fatalError = undefined;
+const renderOptions = {};
+const rollupCache: Map<string, string | null> = new Map();
 
 describe('ReactDOMFizzServer', () => {
   beforeEach(() => {
@@ -134,17 +137,7 @@ describe('ReactDOMFizzServer', () => {
       container.nodeName === '#document' ? container.body : container;
     while (fakeBody.firstChild) {
       const node = fakeBody.firstChild;
-      if (
-        node.nodeName === 'SCRIPT' &&
-        (CSPnonce === null || node.getAttribute('nonce') === CSPnonce)
-      ) {
-        const script = document.createElement('script');
-        script.textContent = node.textContent;
-        fakeBody.removeChild(node);
-        parent.appendChild(script);
-      } else {
-        parent.appendChild(node);
-      }
+      await replaceScriptsAndMove(window, rollupCache, CSPnonce, node, parent);
     }
   }
 
@@ -170,6 +163,12 @@ describe('ReactDOMFizzServer', () => {
     document = jsdom.window.document;
     container = document;
     buffer = '';
+    await replaceScriptsAndMove(
+      window,
+      rollupCache,
+      CSPnonce,
+      document.documentElement,
+    );
   }
 
   function getVisibleChildren(element) {
@@ -179,6 +178,7 @@ describe('ReactDOMFizzServer', () => {
       if (node.nodeType === 1) {
         if (
           node.tagName !== 'SCRIPT' &&
+          node.tagName !== 'script' &&
           node.tagName !== 'TEMPLATE' &&
           node.tagName !== 'template' &&
           !node.hasAttribute('hidden') &&
@@ -288,13 +288,12 @@ describe('ReactDOMFizzServer', () => {
     const As = as;
     return <As>{readText(text)}</As>;
   }
-
   function renderToPipeableStream(jsx, options) {
-    if (options) {
-      return ReactDOMFizzServer.renderToPipeableStream(jsx, options);
-    } else {
-      return ReactDOMFizzServer.renderToPipeableStream(jsx);
-    }
+    // Merge options with renderOptions, which may contain featureFlag specific behavior
+    return ReactDOMFizzServer.renderToPipeableStream(
+      jsx,
+      mergeOptions(options, renderOptions),
+    );
   }
 
   it('should asynchronously load a lazy component', async () => {
@@ -572,7 +571,7 @@ describe('ReactDOMFizzServer', () => {
     // Because there is no content inside the Suspense boundary that could've
     // been written, we expect to not see any additional partial data flushed
     // yet.
-    expect(container.firstChild.nextSibling).toBe(null);
+    expect(container.childNodes.length).toBe(1);
     await act(async () => {
       resolveElement({default: <Text text="Hello" />});
     });
@@ -4811,6 +4810,7 @@ describe('ReactDOMFizzServer', () => {
         pipe(writable);
       });
 
+      // strip inserted external runtime
       expect(container.innerHTML).toEqual(
         '<div><!--$-->hello<!-- -->world<!-- --><!--/$--><!--$-->world<!-- --><!--/$--><!--$-->hello<!-- -->world<!-- --><br><!--/$--><!--$-->world<!-- --><br><!--/$--></div>',
       );
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index 61c8d137acd33..615d615e1515e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -8,6 +8,7 @@
  */
 
 'use strict';
+import {replaceScriptsAndMove, mergeOptions} from '../test-utils/FizzTestUtils';
 
 let JSDOM;
 let Stream;
@@ -25,6 +26,8 @@ let container;
 let buffer = '';
 let hasErrored = false;
 let fatalError = undefined;
+const renderOptions = {};
+const rollupCache: Map<string, string | null> = new Map();
 
 describe('ReactDOMFloat', () => {
   beforeEach(() => {
@@ -100,17 +103,13 @@ describe('ReactDOMFloat', () => {
       container.nodeName === '#document' ? container.body : container;
     while (fakeBody.firstChild) {
       const node = fakeBody.firstChild;
-      if (
-        node.nodeName === 'SCRIPT' &&
-        (CSPnonce === null || node.getAttribute('nonce') === CSPnonce)
-      ) {
-        const script = document.createElement('script');
-        script.textContent = node.textContent;
-        fakeBody.removeChild(node);
-        parent.appendChild(script);
-      } else {
-        parent.appendChild(node);
-      }
+      await replaceScriptsAndMove(
+        document.defaultView,
+        rollupCache,
+        CSPnonce,
+        node,
+        parent,
+      );
     }
   }
 
@@ -135,6 +134,12 @@ describe('ReactDOMFloat', () => {
     document = jsdom.window.document;
     container = document;
     buffer = '';
+    await replaceScriptsAndMove(
+      jsdom.window,
+      rollupCache,
+      null,
+      document.documentElement,
+    );
   }
 
   function getMeaningfulChildren(element) {
@@ -148,6 +153,8 @@ describe('ReactDOMFloat', () => {
           node.hasAttribute('data-meaningful') ||
           (node.tagName === 'SCRIPT' &&
             node.hasAttribute('src') &&
+            node.getAttribute('src') !==
+              renderOptions.unstable_externalRuntimeSrc &&
             node.hasAttribute('async')) ||
           (node.tagName !== 'SCRIPT' &&
             node.tagName !== 'TEMPLATE' &&
@@ -235,6 +242,14 @@ describe('ReactDOMFloat', () => {
     return readText(text);
   }
 
+  function renderToPipeableStream(jsx, options) {
+    // Merge options with renderOptions, which may contain featureFlag specific behavior
+    return ReactDOMFizzServer.renderToPipeableStream(
+      jsx,
+      mergeOptions(options, renderOptions),
+    );
+  }
+
   // @gate enableFloat
   it('can render resources before singletons', async () => {
     const root = ReactDOMClient.createRoot(document);
@@ -503,7 +518,7 @@ describe('ReactDOMFloat', () => {
     });
 
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <>
           <title>foo</title>
           <html>
@@ -569,7 +584,7 @@ describe('ReactDOMFloat', () => {
         return 'foo';
       }
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <head />
             <body>
@@ -720,7 +735,7 @@ describe('ReactDOMFloat', () => {
       }
 
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<ServerApp />);
+        const {pipe} = renderToPipeableStream(<ServerApp />);
         pipe(writable);
       });
       expect(getMeaningfulChildren(document)).toEqual(
@@ -780,7 +795,7 @@ describe('ReactDOMFloat', () => {
         return 'foo';
       }
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <head />
             <body>
@@ -811,7 +826,7 @@ describe('ReactDOMFloat', () => {
         return 'foo';
       }
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <head />
             <body>
@@ -930,7 +945,7 @@ describe('ReactDOMFloat', () => {
         );
       }
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <App srcs={['server', 'shared']} />,
         );
         pipe(writable);
@@ -1082,7 +1097,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('supports preconnects, prefetc-dns, and arbitrary other link types', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <head />
             <body>
@@ -1193,7 +1208,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('can render <base> as a Resource', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <head />
             <body>
@@ -1251,7 +1266,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('can render icons and apple-touch-icons as Resources', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <>
             <html>
               <head />
@@ -1305,7 +1320,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('can hydrate the right instances for deeply nested structured metas', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <>
             <html>
               <head />
@@ -1397,7 +1412,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('can insert meta tags in the expected location', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <>
             <html>
               <head />
@@ -1549,7 +1564,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('can render meta tags with og properties with structured data', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <>
             <html>
               <head />
@@ -1712,7 +1727,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('can render meta tags as resources', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <>
             <html>
               <head />
@@ -1777,7 +1792,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('can rendering title tags anywhere in the tree', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <>
             <title>before</title>
             <>
@@ -1852,7 +1867,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('prepends new titles on the client so newer ones override older ones, including orphaned server rendered titles', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <head>
               <title>server</title>
@@ -1966,7 +1981,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat && enableHostSingletons && (enableClientRenderFallbackOnTextMismatch || !__DEV__)
     it('can render a title before a singleton even if that singleton clears its contents', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <>
             <title>foo</title>
             <html>
@@ -2031,7 +2046,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('treats link rel stylesheet elements as a style resource when it includes a precedence when server rendering', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <head />
             <body>
@@ -2084,7 +2099,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('treats link rel stylesheet elements as a style resource when it includes a precedence when hydrating', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <head />
             <body>
@@ -2122,7 +2137,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('preloads stylesheets without a precedence prop when server rendering', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <head />
             <body>
@@ -2150,7 +2165,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('hoists style resources to the correct precedence', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <head />
             <body>
@@ -2245,7 +2260,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat && enableHostSingletons && enableClientRenderFallbackOnTextMismatch
     it('retains styles even when a new html, head, and/body mount', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <head />
             <body>
@@ -2297,7 +2312,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat && !enableHostSingletons
     it('retains styles even when a new html, head, and/body mount - without HostSingleton', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <head />
             <body>
@@ -2402,7 +2417,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('treats async scripts without onLoad or onError as Resources', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <head />
             <body>
@@ -2487,7 +2502,7 @@ describe('ReactDOMFloat', () => {
       );
     }
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      const {pipe} = renderToPipeableStream(<App />);
       pipe(writable);
     });
 
@@ -2570,7 +2585,7 @@ describe('ReactDOMFloat', () => {
   // @gate enableFloat
   it('treats stylesheet links with a precedence as a resource', async () => {
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html>
           <head />
           <body>
@@ -2623,7 +2638,7 @@ describe('ReactDOMFloat', () => {
     }
 
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html>
           <head />
           <body>
@@ -2679,7 +2694,7 @@ describe('ReactDOMFloat', () => {
       ReactDOM.preinit('preset', {as: 'style', precedence: 'preset'});
     }
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html>
           <head />
           <body>
@@ -3043,7 +3058,7 @@ describe('ReactDOMFloat', () => {
   // @gate enableFloat
   it('normalizes style resource precedence for all boundaries inlined as part of the shell flush', async () => {
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html>
           <head />
           <body>
@@ -3133,7 +3148,7 @@ describe('ReactDOMFloat', () => {
   // @gate enableFloat
   it('style resources are inserted according to precedence order on the client', async () => {
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html>
           <head />
           <body>
@@ -3262,7 +3277,7 @@ describe('ReactDOMFloat', () => {
       return null;
     }
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html>
           <head />
           <body>
@@ -3340,7 +3355,7 @@ describe('ReactDOMFloat', () => {
       return children;
     }
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html>
           <head />
           <body>
@@ -3463,7 +3478,7 @@ describe('ReactDOMFloat', () => {
       return children;
     }
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html>
           <head />
           <body>
@@ -3695,7 +3710,7 @@ describe('ReactDOMFloat', () => {
     }
     try {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        const {pipe} = renderToPipeableStream(<App />);
         pipe(writable);
       });
       expect(getMeaningfulChildren(document)).toEqual(
@@ -3803,7 +3818,7 @@ describe('ReactDOMFloat', () => {
       return children;
     }
     await actIntoEmptyDocument(() => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      const {pipe} = renderToPipeableStream(
         <html>
           <head />
           <body>
@@ -3932,7 +3947,7 @@ describe('ReactDOMFloat', () => {
     };
     try {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <head />
             <body>
@@ -4016,7 +4031,7 @@ describe('ReactDOMFloat', () => {
       };
       try {
         await actIntoEmptyDocument(() => {
-          const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+          const {pipe} = renderToPipeableStream(
             <html>
               <head>
                 <Component scenarios={scenarios} />
@@ -4653,7 +4668,7 @@ describe('ReactDOMFloat', () => {
       };
       try {
         await actIntoEmptyDocument(() => {
-          const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+          const {pipe} = renderToPipeableStream(
             <html>
               <head>
                 <link
@@ -4766,7 +4781,7 @@ describe('ReactDOMFloat', () => {
       };
       try {
         await actIntoEmptyDocument(() => {
-          const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+          const {pipe} = renderToPipeableStream(
             <html>
               <head>
                 <link
@@ -4879,7 +4894,7 @@ describe('ReactDOMFloat', () => {
       };
       try {
         await actIntoEmptyDocument(() => {
-          const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+          const {pipe} = renderToPipeableStream(
             <html>
               <head>
                 <link
@@ -4990,7 +5005,7 @@ describe('ReactDOMFloat', () => {
       };
       try {
         await actIntoEmptyDocument(() => {
-          const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+          const {pipe} = renderToPipeableStream(
             <html>
               <head>
                 <script src="foo" async={true} data-foo="a current value" />
@@ -5040,7 +5055,7 @@ describe('ReactDOMFloat', () => {
       };
       try {
         await actIntoEmptyDocument(() => {
-          const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+          const {pipe} = renderToPipeableStream(
             <html>
               <head>
                 <link
@@ -5135,7 +5150,7 @@ describe('ReactDOMFloat', () => {
       };
       try {
         await actIntoEmptyDocument(() => {
-          const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+          const {pipe} = renderToPipeableStream(
             <html>
               <head>
                 <link
@@ -5196,7 +5211,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('escapes hrefs when selecting matching elements in the document when rendering Resources', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <head />
             <body>
@@ -5258,7 +5273,7 @@ describe('ReactDOMFloat', () => {
     // @gate enableFloat
     it('escapes hrefs when selecting matching elements in the document when using preload and preinit', async () => {
       await actIntoEmptyDocument(() => {
-        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        const {pipe} = renderToPipeableStream(
           <html>
             <head />
             <body>
diff --git a/packages/react-dom/src/server/ReactDOMServerExternalRuntime.js b/packages/react-dom/src/server/ReactDOMServerExternalRuntime.js
index dccb1bb3debe9..1260df97965d1 100644
--- a/packages/react-dom/src/server/ReactDOMServerExternalRuntime.js
+++ b/packages/react-dom/src/server/ReactDOMServerExternalRuntime.js
@@ -1,10 +1,17 @@
-// TODO: Add Flow types
+/**
+ * This file is compiled to a standalone browser script by rollup and loaded by Fizz
+ *  clients. Therefore, it should be fast and not have many external dependencies.
+ * @flow
+ */
+
+// Imports are resolved statically by the closure compiler in release bundles
+// and by rollup in jest unit tests
 import {
   clientRenderBoundary,
   completeBoundaryWithStyles,
   completeBoundary,
   completeSegment,
-} from 'react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSet';
+} from '../../../react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSet';
 
 // Intentionally does nothing. Implementation will be added in future PR.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/react-dom/src/test-utils/FizzTestUtils.js b/packages/react-dom/src/test-utils/FizzTestUtils.js
new file mode 100644
index 0000000000000..051a3d7ef02e0
--- /dev/null
+++ b/packages/react-dom/src/test-utils/FizzTestUtils.js
@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+'use strict';
+
+import * as tmp from 'tmp';
+import * as fs from 'fs';
+import replace from 'rollup-plugin-replace';
+import {rollup} from 'rollup';
+
+// Utility function to read and bundle a standalone browser script
+async function getRollupResult(
+  scriptSrc: string,
+  rollupCache: Map<string, string | null>,
+): Promise<string | null> {
+  const cachedResult = rollupCache.get(scriptSrc);
+  if (cachedResult !== undefined) {
+    return cachedResult;
+  }
+  let tmpFile;
+  try {
+    tmpFile = tmp.fileSync();
+    const rollupConfig = {
+      input: require.resolve(scriptSrc),
+      onwarn: console.warn,
+      plugins: [replace({__DEV__: 'true'})],
+      output: {
+        externalLiveBindings: false,
+        freeze: false,
+        interop: false,
+        esModule: false,
+      },
+    };
+    const outputConfig = {
+      file: tmpFile.name,
+      format: 'iife',
+    };
+    const bundle = await rollup(rollupConfig);
+    await bundle.write(outputConfig);
+    const bundleBuffer = Buffer.alloc(4096);
+    let bundleStr = '';
+    while (true) {
+      // $FlowFixMe[incompatible-call]
+      const bytes = fs.readSync(tmpFile.fd, bundleBuffer);
+      if (bytes <= 0) {
+        break;
+      }
+      bundleStr += bundleBuffer.slice(0, bytes).toString();
+    }
+    rollupCache.set(scriptSrc, bundleStr);
+    return bundleStr;
+  } catch (e) {
+    rollupCache.set(scriptSrc, null);
+    return null;
+  } finally {
+    if (tmpFile) {
+      tmpFile.removeCallback();
+    }
+  }
+}
+
+// Utility function to process received HTML nodes and execute
+//  embedded scripts by:
+//  1. Matching nonce attributes and moving node into an existing
+//      parent container (if passed)
+//  2. Resolving scripts with sources
+async function replaceScriptsAndMove(
+  window: any,
+  rollupCache: Map<string, string | null>,
+  CSPnonce: string | null,
+  node: Node,
+  parent: Node | null,
+) {
+  if (
+    node.nodeType === 1 &&
+    (node.nodeName === 'SCRIPT' || node.nodeName === 'script')
+  ) {
+    // $FlowFixMe[incompatible-cast]
+    const element = (node: HTMLElement);
+    const script = window.document.createElement('SCRIPT');
+    const scriptSrc = element.getAttribute('src');
+    if (scriptSrc) {
+      const rollupOutput = await getRollupResult(scriptSrc, rollupCache);
+      if (rollupOutput) {
+        // Manually call eval(...) here, since changing the HTML text content
+        //  may interfere with hydration
+        window.eval(rollupOutput);
+      }
+      for (let i = 0; i < element.attributes.length; i++) {
+        const attr = element.attributes.item(i);
+        script.setAttribute(attr.name, attr.value);
+      }
+    } else if (element === null || element.getAttribute('nonce') === CSPnonce) {
+      script.textContent = node.textContent;
+    }
+    if (parent) {
+      element.parentNode?.removeChild(element);
+      parent.appendChild(script);
+    } else {
+      element.parentNode?.replaceChild(script, element);
+    }
+  } else {
+    for (let i = 0; i < node.childNodes.length; i++) {
+      const inner = node.childNodes[i];
+      await replaceScriptsAndMove(window, rollupCache, CSPnonce, inner, null);
+    }
+    if (parent != null) {
+      parent.appendChild(node);
+    }
+  }
+}
+
+function mergeOptions(options: Object, defaultOptions: Object): Object {
+  return {
+    ...defaultOptions,
+    ...options,
+  };
+}
+
+export {replaceScriptsAndMove, mergeOptions};
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index d8414b7c037d1..100124c28b7b4 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -128,6 +128,8 @@ export const enableUseMemoCacheHook = __EXPERIMENTAL__;
 export const enableUseEventHook = __EXPERIMENTAL__;
 
 // Test in www before enabling in open source.
+// Enables DOM-server to stream its instruction set as data-attributes
+// (handled with an MutationObserver) instead of inline-scripts
 export const enableFizzExternalRuntime = false;
 
 // -----------------------------------------------------------------------------

From 5f4d56033bf1c2f48c7ffe23cf6dc48fbcfe0da1 Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@fb.com>
Date: Tue, 1 Nov 2022 11:14:17 -0400
Subject: [PATCH 3/3] Move rollupCache to test helper/utils file

---
 .../src/__tests__/ReactDOMFizzServer-test.js     | 10 ++--------
 .../src/__tests__/ReactDOMFloat-test.js          | 16 ++--------------
 .../react-dom/src/test-utils/FizzTestUtils.js    | 12 +++++-------
 3 files changed, 9 insertions(+), 29 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index e5f57505eb9b8..2333f366f50e5 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -32,7 +32,6 @@ let buffer = '';
 let hasErrored = false;
 let fatalError = undefined;
 const renderOptions = {};
-const rollupCache: Map<string, string | null> = new Map();
 
 describe('ReactDOMFizzServer', () => {
   beforeEach(() => {
@@ -137,7 +136,7 @@ describe('ReactDOMFizzServer', () => {
       container.nodeName === '#document' ? container.body : container;
     while (fakeBody.firstChild) {
       const node = fakeBody.firstChild;
-      await replaceScriptsAndMove(window, rollupCache, CSPnonce, node, parent);
+      await replaceScriptsAndMove(window, CSPnonce, node, parent);
     }
   }
 
@@ -163,12 +162,7 @@ describe('ReactDOMFizzServer', () => {
     document = jsdom.window.document;
     container = document;
     buffer = '';
-    await replaceScriptsAndMove(
-      window,
-      rollupCache,
-      CSPnonce,
-      document.documentElement,
-    );
+    await replaceScriptsAndMove(window, CSPnonce, document.documentElement);
   }
 
   function getVisibleChildren(element) {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index 615d615e1515e..2ead3001d9df9 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -27,7 +27,6 @@ let buffer = '';
 let hasErrored = false;
 let fatalError = undefined;
 const renderOptions = {};
-const rollupCache: Map<string, string | null> = new Map();
 
 describe('ReactDOMFloat', () => {
   beforeEach(() => {
@@ -103,13 +102,7 @@ describe('ReactDOMFloat', () => {
       container.nodeName === '#document' ? container.body : container;
     while (fakeBody.firstChild) {
       const node = fakeBody.firstChild;
-      await replaceScriptsAndMove(
-        document.defaultView,
-        rollupCache,
-        CSPnonce,
-        node,
-        parent,
-      );
+      await replaceScriptsAndMove(document.defaultView, CSPnonce, node, parent);
     }
   }
 
@@ -134,12 +127,7 @@ describe('ReactDOMFloat', () => {
     document = jsdom.window.document;
     container = document;
     buffer = '';
-    await replaceScriptsAndMove(
-      jsdom.window,
-      rollupCache,
-      null,
-      document.documentElement,
-    );
+    await replaceScriptsAndMove(jsdom.window, null, document.documentElement);
   }
 
   function getMeaningfulChildren(element) {
diff --git a/packages/react-dom/src/test-utils/FizzTestUtils.js b/packages/react-dom/src/test-utils/FizzTestUtils.js
index 051a3d7ef02e0..bf4084dc13e59 100644
--- a/packages/react-dom/src/test-utils/FizzTestUtils.js
+++ b/packages/react-dom/src/test-utils/FizzTestUtils.js
@@ -13,11 +13,10 @@ import * as fs from 'fs';
 import replace from 'rollup-plugin-replace';
 import {rollup} from 'rollup';
 
+const rollupCache: Map<string, string | null> = new Map();
+
 // Utility function to read and bundle a standalone browser script
-async function getRollupResult(
-  scriptSrc: string,
-  rollupCache: Map<string, string | null>,
-): Promise<string | null> {
+async function getRollupResult(scriptSrc: string): Promise<string | null> {
   const cachedResult = rollupCache.get(scriptSrc);
   if (cachedResult !== undefined) {
     return cachedResult;
@@ -71,7 +70,6 @@ async function getRollupResult(
 //  2. Resolving scripts with sources
 async function replaceScriptsAndMove(
   window: any,
-  rollupCache: Map<string, string | null>,
   CSPnonce: string | null,
   node: Node,
   parent: Node | null,
@@ -85,7 +83,7 @@ async function replaceScriptsAndMove(
     const script = window.document.createElement('SCRIPT');
     const scriptSrc = element.getAttribute('src');
     if (scriptSrc) {
-      const rollupOutput = await getRollupResult(scriptSrc, rollupCache);
+      const rollupOutput = await getRollupResult(scriptSrc);
       if (rollupOutput) {
         // Manually call eval(...) here, since changing the HTML text content
         //  may interfere with hydration
@@ -107,7 +105,7 @@ async function replaceScriptsAndMove(
   } else {
     for (let i = 0; i < node.childNodes.length; i++) {
       const inner = node.childNodes[i];
-      await replaceScriptsAndMove(window, rollupCache, CSPnonce, inner, null);
+      await replaceScriptsAndMove(window, CSPnonce, inner, null);
     }
     if (parent != null) {
       parent.appendChild(node);