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
C. T. Lin committed
Feb 7, 2018 at 19:51 UTC
4a20ff26ecfe9bc66941d79f7fce2c67be8ee236
2 files changed
+70
packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js
renamed
+68
@@ -103,4 +103,72 @@ describe('ReactDOMServerIntegration', () => {
103
expect(await render(<React.StrictMode />)).toBe(null);
104
});
105
});
106
+
107
+ describe('React.unstable_AsyncMode', () => {
108
+ itRenders('an async mode with one child', async render => {
109
+ let e = await render(
110
+ <React.unstable_AsyncMode>
111
+ <div>text1</div>
112
+ </React.unstable_AsyncMode>,
113
+ );
114
+ let parent = e.parentNode;
115
+ expect(parent.childNodes[0].tagName).toBe('DIV');
116
+ });
117
+
118
+ itRenders('an async mode with several children', async render => {
119
+ let Header = props => {
120
+ return <p>header</p>;
121
+ };
122
+ let Footer = props => {
123
+ return (
124
+ <React.unstable_AsyncMode>
125
+ <h2>footer</h2>
126
+ <h3>about</h3>
127
+ </React.unstable_AsyncMode>
128
+ );
129
+ };
130
+ let e = await render(
131
+ <React.unstable_AsyncMode>
132
+ <div>text1</div>
133
+ <span>text2</span>
134
+ <Header />
135
+ <Footer />
136
+ </React.unstable_AsyncMode>,
137
+ );
138
+ let parent = e.parentNode;
139
+ expect(parent.childNodes[0].tagName).toBe('DIV');
140
+ expect(parent.childNodes[1].tagName).toBe('SPAN');
141
+ expect(parent.childNodes[2].tagName).toBe('P');
142
+ expect(parent.childNodes[3].tagName).toBe('H2');
143
+ expect(parent.childNodes[4].tagName).toBe('H3');
144
+ });
145
+
146
+ itRenders('a nested async mode', async render => {
147
+ let e = await render(
148
+ <React.unstable_AsyncMode>
149
+ <React.unstable_AsyncMode>
150
+ <div>text1</div>
151
+ </React.unstable_AsyncMode>
152
+ <span>text2</span>
153
+ <React.unstable_AsyncMode>
154
+ <React.unstable_AsyncMode>
155
+ <React.unstable_AsyncMode>
156
+ {null}
157
+ <p />
158
+ </React.unstable_AsyncMode>
159
+ {false}
160
+ </React.unstable_AsyncMode>
161
+ </React.unstable_AsyncMode>
162
+ </React.unstable_AsyncMode>,
163
+ );
164
+ let parent = e.parentNode;
165
+ expect(parent.childNodes[0].tagName).toBe('DIV');
166
+ expect(parent.childNodes[1].tagName).toBe('SPAN');
167
+ expect(parent.childNodes[2].tagName).toBe('P');
168
+ });
169
+
170
+ itRenders('an empty async mode', async render => {
171
+ expect(await render(<React.unstable_AsyncMode />)).toBe(null);
172
+ });
173
+ });
174
});
packages/react-dom/src/server/ReactPartialRenderer.js
+2
@@ -29,6 +29,7 @@ import {warnAboutDeprecatedLifecycles} from 'shared/ReactFeatureFlags';
29
import {
30
REACT_FRAGMENT_TYPE,
31
REACT_STRICT_MODE_TYPE,
32
+ REACT_ASYNC_MODE_TYPE,
33
REACT_CALL_TYPE,
34
REACT_RETURN_TYPE,
35
REACT_PORTAL_TYPE,
@@ -816,6 +817,7 @@ class ReactDOMServerRenderer {
817
818
switch (elementType) {
819
case REACT_STRICT_MODE_TYPE:
820
+ case REACT_ASYNC_MODE_TYPE:
821
case REACT_FRAGMENT_TYPE: {
822
const nextChildren = toArray(
823
((nextChild: any): ReactElement).props.children,