From 4a20ff26ecfe9bc66941d79f7fce2c67be8ee236 Mon Sep 17 00:00:00 2001
From: "C. T. Lin" <chentsulin@gmail.com>
Date: Wed, 7 Feb 2018 19:51:53 +0800
Subject: [PATCH] Fix server render async mode (#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
---
 ...=> ReactDOMServerIntegrationModes-test.js} | 68 +++++++++++++++++++
 .../src/server/ReactPartialRenderer.js        |  2 +
 2 files changed, 70 insertions(+)
 rename packages/react-dom/src/__tests__/{ReactDOMServerIntegrationStrictMode-test.js => ReactDOMServerIntegrationModes-test.js} (56%)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationStrictMode-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js
similarity index 56%
rename from packages/react-dom/src/__tests__/ReactDOMServerIntegrationStrictMode-test.js
rename to packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js
index b34dd4a8e3..ca941a388f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationStrictMode-test.js
+++ b/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);
+    });
+  });
 });
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 5d28988152..01dcbf079e 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/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,