Fix server render async mode (facebook#12173)

* add failed tests for <unstable_AsyncMode> with server rendering

* Fix server render with <unstable_AsyncMode> component

* Merge StrictMode and AsyncMode tests into Modes file

Author: chentsulin

…ctDOMServerIntegrationStrictMode-test.js …_/ReactDOMServerIntegrationModes-test.jspackages/react-dom/src/__tests__/ReactDOMServerIntegrationStrictMode-test.js renamed to packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js packages/react-dom/src/__tests__/ReactDOMServerIntegrationStrictMode-test.js renamed to packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js

@@ -103,4 +103,72 @@ describe('ReactDOMServerIntegration', () => {
       expect(await render(<React.StrictMode />)).toBe(null);
     });
   });
+
+  describe('React.unstable_AsyncMode', () => {
+    itRenders('an async mode with one child', async render => {
+      let e = await render(
+        <React.unstable_AsyncMode>
+          <div>text1</div>
+        </React.unstable_AsyncMode>,
+      );
+      let parent = e.parentNode;
+      expect(parent.childNodes[0].tagName).toBe('DIV');
+    });
+
+    itRenders('an async mode with several children', async render => {
+      let Header = props => {
+        return <p>header</p>;
+      };
+      let Footer = props => {
+        return (
+          <React.unstable_AsyncMode>
+            <h2>footer</h2>
+            <h3>about</h3>
+          </React.unstable_AsyncMode>
+        );
+      };
+      let e = await render(
+        <React.unstable_AsyncMode>
+          <div>text1</div>
+          <span>text2</span>
+          <Header />
+          <Footer />
+        </React.unstable_AsyncMode>,
+      );
+      let parent = e.parentNode;
+      expect(parent.childNodes[0].tagName).toBe('DIV');
+      expect(parent.childNodes[1].tagName).toBe('SPAN');
+      expect(parent.childNodes[2].tagName).toBe('P');
+      expect(parent.childNodes[3].tagName).toBe('H2');
+      expect(parent.childNodes[4].tagName).toBe('H3');
+    });
+
+    itRenders('a nested async mode', async render => {
+      let e = await render(
+        <React.unstable_AsyncMode>
+          <React.unstable_AsyncMode>
+            <div>text1</div>
+          </React.unstable_AsyncMode>
+          <span>text2</span>
+          <React.unstable_AsyncMode>
+            <React.unstable_AsyncMode>
+              <React.unstable_AsyncMode>
+                {null}
+                <p />
+              </React.unstable_AsyncMode>
+              {false}
+            </React.unstable_AsyncMode>
+          </React.unstable_AsyncMode>
+        </React.unstable_AsyncMode>,
+      );
+      let parent = e.parentNode;
+      expect(parent.childNodes[0].tagName).toBe('DIV');
+      expect(parent.childNodes[1].tagName).toBe('SPAN');
+      expect(parent.childNodes[2].tagName).toBe('P');
+    });
+
+    itRenders('an empty async mode', async render => {
+      expect(await render(<React.unstable_AsyncMode />)).toBe(null);
+    });
+  });
 });

packages/react-dom/src/server/ReactPartialRenderer.js

@@ -29,6 +29,7 @@ import {warnAboutDeprecatedLifecycles} from 'shared/ReactFeatureFlags';
 import {
   REACT_FRAGMENT_TYPE,
   REACT_STRICT_MODE_TYPE,
+  REACT_ASYNC_MODE_TYPE,
   REACT_CALL_TYPE,
   REACT_RETURN_TYPE,
   REACT_PORTAL_TYPE,
@@ -816,6 +817,7 @@ class ReactDOMServerRenderer {
 
       switch (elementType) {
         case REACT_STRICT_MODE_TYPE:
+        case REACT_ASYNC_MODE_TYPE:
         case REACT_FRAGMENT_TYPE: {
           const nextChildren = toArray(
             ((nextChild: any): ReactElement).props.children,