[Fiber] Make server rendering tests pass (#8372)
* Use the public ReactDOMServer in tests We need this because it runs the injection. * Let Fiber skip react data attributes and comments in SSR tests This markup is testing implementation details rather than behavior.
Sebastian Markbåge committed
Nov 22, 2016 at 16:03 UTC
f38c355cbadd00c56744a2599bc5596300ed0e1e
5 files changed
+63
-51
scripts/fiber/tests-failing.txt
-19
@@ -108,24 +108,6 @@ src/renderers/dom/stack/client/__tests__/ReactRenderDocument-test.js
108
* should throw on full document render w/ no markup
109
* supports findDOMNode on full-page components
110
111
-src/renderers/dom/stack/server/__tests__/ReactServerRendering-test.js
112
-* should generate simple markup
113
-* should generate simple markup for self-closing tags
114
-* should generate simple markup for attribute with `>` symbol
115
-* should generate comment markup for component returns null
116
-* should render composite components
117
-* should only execute certain lifecycle methods
118
-* should have the correct mounting behavior
119
-* should not put checksum and React ID on components
120
-* should not put checksum and React ID on text components
121
-* should only execute certain lifecycle methods
122
-* allows setState in componentWillMount without using DOM
123
-* renders components with different batching strategies
124
-* warns with a no-op when an async setState is triggered
125
-* warns with a no-op when an async replaceState is triggered
126
-* warns with a no-op when an async forceUpdate is triggered
127
-* should warn when children are mutated during render
128
-
111
src/renderers/shared/__tests__/ReactPerf-test.js
112
* should count no-op update as waste
113
* should count no-op update in child as waste
@@ -150,7 +132,6 @@ src/renderers/shared/stack/reconciler/__tests__/ReactComponentLifeCycle-test.js
132
* should carry through each of the phases of setup
133
134
src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponent-test.js
153
-* should not thrash a server rendered layout with client side one
135
* should warn about `forceUpdate` on unmounted components
136
* should warn about `setState` on unmounted components
137
* should warn about `setState` in render
scripts/fiber/tests-passing-except-dev.txt
+3
@@ -65,6 +65,9 @@ src/renderers/dom/stack/client/__tests__/ReactMountDestruction-test.js
65
* should warn when unmounting a non-container root node
66
* should warn when unmounting a non-container, non-root node
67
68
+src/renderers/dom/stack/server/__tests__/ReactServerRendering-test.js
69
+* should have the correct mounting behavior
70
+
71
src/renderers/shared/hooks/__tests__/ReactComponentTreeHook-test.js
72
* uses displayName or Unknown for classic components
73
* uses displayName, name, or ReactComponent for modern components
scripts/fiber/tests-passing.txt
+16
@@ -919,8 +919,23 @@ src/renderers/dom/stack/client/__tests__/findDOMNode-test.js
919
* findDOMNode should not throw an error when called within a component that is not mounted
920
921
src/renderers/dom/stack/server/__tests__/ReactServerRendering-test.js
922
+* should generate simple markup
923
+* should generate simple markup for self-closing tags
924
+* should generate simple markup for attribute with `>` symbol
925
+* should generate comment markup for component returns null
926
+* should render composite components
927
+* should only execute certain lifecycle methods
928
* should throw with silly args
929
+* should not put checksum and React ID on components
930
+* should not put checksum and React ID on text components
931
+* should only execute certain lifecycle methods
932
* should throw with silly args
933
+* allows setState in componentWillMount without using DOM
934
+* renders components with different batching strategies
935
+* warns with a no-op when an async setState is triggered
936
+* warns with a no-op when an async replaceState is triggered
937
+* warns with a no-op when an async forceUpdate is triggered
938
+* should warn when children are mutated during render
939
940
src/renderers/native/__tests__/ReactNativeAttributePayload-test.js
941
* should work with simple example
@@ -1231,6 +1246,7 @@ src/renderers/shared/stack/reconciler/__tests__/ReactComponentLifeCycle-test.js
1246
src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponent-test.js
1247
* should support module pattern components
1248
* should support rendering to different child types over time
1249
+* should not thrash a server rendered layout with client side one
1250
* should react to state changes from callbacks
1251
* should rewire refs when rendering to different child types
1252
* should not cache old DOM nodes when switching constructors
src/renderers/dom/stack/server/__tests__/ReactServerRendering-test.js
+41
-29
@@ -14,26 +14,28 @@
14
var ExecutionEnvironment;
15
var React;
16
var ReactDOM;
17
+var ReactDOMFeatureFlags;
18
+var ReactDOMServer;
19
var ReactMarkupChecksum;
20
var ReactReconcileTransaction;
21
var ReactTestUtils;
20
-var ReactServerRendering;
22
23
var ID_ATTRIBUTE_NAME;
24
var ROOT_ATTRIBUTE_NAME;
25
25
-describe('ReactServerRendering', () => {
26
+describe('ReactDOMServer', () => {
27
beforeEach(() => {
28
jest.resetModuleRegistry();
29
React = require('React');
30
ReactDOM = require('ReactDOM');
31
+ ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
32
ReactMarkupChecksum = require('ReactMarkupChecksum');
33
ReactTestUtils = require('ReactTestUtils');
34
ReactReconcileTransaction = require('ReactReconcileTransaction');
35
36
ExecutionEnvironment = require('ExecutionEnvironment');
37
ExecutionEnvironment.canUseDOM = false;
36
- ReactServerRendering = require('ReactServerRendering');
38
+ ReactDOMServer = require('ReactDOMServer');
39
40
var DOMProperty = require('DOMProperty');
41
ID_ATTRIBUTE_NAME = DOMProperty.ID_ATTRIBUTE_NAME;
@@ -42,7 +44,7 @@ describe('ReactServerRendering', () => {
44
45
describe('renderToString', () => {
46
it('should generate simple markup', () => {
45
- var response = ReactServerRendering.renderToString(
47
+ var response = ReactDOMServer.renderToString(
48
<span>hello world</span>
49
);
50
expect(response).toMatch(new RegExp(
@@ -53,7 +55,7 @@ describe('ReactServerRendering', () => {
55
});
56
57
it('should generate simple markup for self-closing tags', () => {
56
- var response = ReactServerRendering.renderToString(
58
+ var response = ReactDOMServer.renderToString(
59
<img />
60
);
61
expect(response).toMatch(new RegExp(
@@ -64,7 +66,7 @@ describe('ReactServerRendering', () => {
66
});
67
68
it('should generate simple markup for attribute with `>` symbol', () => {
67
- var response = ReactServerRendering.renderToString(
69
+ var response = ReactDOMServer.renderToString(
70
<img data-attr=">" />
71
);
72
expect(response).toMatch(new RegExp(
@@ -81,7 +83,7 @@ describe('ReactServerRendering', () => {
83
}
84
}
85
84
- var response = ReactServerRendering.renderToString(<NullComponent />);
86
+ var response = ReactDOMServer.renderToString(<NullComponent />);
87
expect(response).toBe('<!-- react-empty: 1 -->');
88
});
89
@@ -100,7 +102,7 @@ describe('ReactServerRendering', () => {
102
}
103
}
104
103
- var response = ReactServerRendering.renderToString(
105
+ var response = ReactDOMServer.renderToString(
106
<Parent />
107
);
108
expect(response).toMatch(new RegExp(
@@ -160,7 +162,7 @@ describe('ReactServerRendering', () => {
162
}
163
}
164
163
- var response = ReactServerRendering.renderToString(
165
+ var response = ReactDOMServer.renderToString(
166
<TestComponent />
167
);
168
@@ -233,7 +235,7 @@ describe('ReactServerRendering', () => {
235
expect(element.innerHTML).toEqual('');
236
237
ExecutionEnvironment.canUseDOM = false;
236
- lastMarkup = ReactServerRendering.renderToString(
238
+ lastMarkup = ReactDOMServer.renderToString(
239
<TestComponent name="x" />
240
);
241
ExecutionEnvironment.canUseDOM = true;
@@ -241,7 +243,17 @@ describe('ReactServerRendering', () => {
243
244
var instance = ReactDOM.render(<TestComponent name="x" />, element);
245
expect(mountCount).toEqual(3);
244
- expect(element.innerHTML).toBe(lastMarkup);
246
+
247
+ var expectedMarkup = lastMarkup;
248
+ if (ReactDOMFeatureFlags.useFiber) {
249
+ var reactMetaData = /\s+data-react[a-z-]+=\"[^\"]*\"/g;
250
+ var reactComments = /<!-- \/?react-text(: \d+)? -->/g;
251
+ expectedMarkup =
252
+ expectedMarkup
253
+ .replace(reactMetaData, '')
254
+ .replace(reactComments, '');
255
+ }
256
+ expect(element.innerHTML).toBe(expectedMarkup);
257
258
// Ensure the events system works after mount into server markup
259
expect(numClicks).toEqual(0);
@@ -269,8 +281,8 @@ describe('ReactServerRendering', () => {
281
282
it('should throw with silly args', () => {
283
expect(
272
- ReactServerRendering.renderToString.bind(
273
- ReactServerRendering,
284
+ ReactDOMServer.renderToString.bind(
285
+ ReactDOMServer,
286
'not a component'
287
)
288
).toThrowError(
@@ -293,7 +305,7 @@ describe('ReactServerRendering', () => {
305
}
306
}
307
296
- var response = ReactServerRendering.renderToStaticMarkup(
308
+ var response = ReactDOMServer.renderToStaticMarkup(
309
<TestComponent />
310
);
311
@@ -307,7 +319,7 @@ describe('ReactServerRendering', () => {
319
}
320
}
321
310
- var response = ReactServerRendering.renderToStaticMarkup(
322
+ var response = ReactDOMServer.renderToStaticMarkup(
323
<TestComponent />
324
);
325
@@ -359,7 +371,7 @@ describe('ReactServerRendering', () => {
371
}
372
}
373
362
- var response = ReactServerRendering.renderToStaticMarkup(
374
+ var response = ReactDOMServer.renderToStaticMarkup(
375
<TestComponent />
376
);
377
@@ -378,8 +390,8 @@ describe('ReactServerRendering', () => {
390
391
it('should throw with silly args', () => {
392
expect(
381
- ReactServerRendering.renderToStaticMarkup.bind(
382
- ReactServerRendering,
393
+ ReactDOMServer.renderToStaticMarkup.bind(
394
+ ReactDOMServer,
395
'not a component'
396
)
397
).toThrowError(
@@ -402,7 +414,7 @@ describe('ReactServerRendering', () => {
414
// We shouldn't ever be calling this on the server
415
throw new Error('Browser reconcile transaction should not be used');
416
};
405
- var markup = ReactServerRendering.renderToString(
417
+ var markup = ReactDOMServer.renderToString(
418
<Component />
419
);
420
expect(markup.indexOf('hello, world') >= 0).toBe(true);
@@ -411,7 +423,7 @@ describe('ReactServerRendering', () => {
423
it('renders components with different batching strategies', () => {
424
class StaticComponent extends React.Component {
425
render() {
414
- const staticContent = ReactServerRendering.renderToStaticMarkup(
426
+ const staticContent = ReactDOMServer.renderToStaticMarkup(
427
<div>
428
<img src="foo-bar.jpg" />
429
</div>
@@ -431,8 +443,8 @@ describe('ReactServerRendering', () => {
443
}
444
445
expect(
434
- ReactServerRendering.renderToString.bind(
435
- ReactServerRendering,
446
+ ReactDOMServer.renderToString.bind(
447
+ ReactDOMServer,
448
<div>
449
<StaticComponent />
450
<Component />
@@ -456,7 +468,7 @@ describe('ReactServerRendering', () => {
468
}
469
470
spyOn(console, 'error');
459
- ReactServerRendering.renderToString(<Foo />);
471
+ ReactDOMServer.renderToString(<Foo />);
472
jest.runOnlyPendingTimers();
473
expectDev(console.error.calls.count()).toBe(1);
474
expectDev(console.error.calls.mostRecent().args[0]).toBe(
@@ -464,7 +476,7 @@ describe('ReactServerRendering', () => {
476
' This usually means you called setState() outside componentWillMount() on the server.' +
477
' This is a no-op. Please check the code for the Foo component.'
478
);
467
- var markup = ReactServerRendering.renderToStaticMarkup(<Foo />);
479
+ var markup = ReactDOMServer.renderToStaticMarkup(<Foo />);
480
expect(markup).toBe('<div>hello</div>');
481
});
482
@@ -482,7 +494,7 @@ describe('ReactServerRendering', () => {
494
});
495
496
spyOn(console, 'error');
485
- ReactServerRendering.renderToString(<Bar />);
497
+ ReactDOMServer.renderToString(<Bar />);
498
jest.runOnlyPendingTimers();
499
expectDev(console.error.calls.count()).toBe(1);
500
expectDev(console.error.calls.mostRecent().args[0]).toBe(
@@ -490,7 +502,7 @@ describe('ReactServerRendering', () => {
502
'This usually means you called replaceState() outside componentWillMount() on the server. ' +
503
'This is a no-op. Please check the code for the Bar component.'
504
);
493
- var markup = ReactServerRendering.renderToStaticMarkup(<Bar />);
505
+ var markup = ReactDOMServer.renderToStaticMarkup(<Bar />);
506
expect(markup).toBe('<div>hello</div>');
507
});
508
@@ -509,7 +521,7 @@ describe('ReactServerRendering', () => {
521
}
522
523
spyOn(console, 'error');
512
- ReactServerRendering.renderToString(<Baz />);
524
+ ReactDOMServer.renderToString(<Baz />);
525
jest.runOnlyPendingTimers();
526
expectDev(console.error.calls.count()).toBe(1);
527
expectDev(console.error.calls.mostRecent().args[0]).toBe(
@@ -517,7 +529,7 @@ describe('ReactServerRendering', () => {
529
'This usually means you called forceUpdate() outside componentWillMount() on the server. ' +
530
'This is a no-op. Please check the code for the Baz component.'
531
);
520
- var markup = ReactServerRendering.renderToStaticMarkup(<Baz />);
532
+ var markup = ReactDOMServer.renderToStaticMarkup(<Baz />);
533
expect(markup).toBe('<div></div>');
534
});
535
@@ -528,7 +540,7 @@ describe('ReactServerRendering', () => {
540
return <div>{props.children}</div>;
541
}
542
expect(() => {
531
- ReactServerRendering.renderToStaticMarkup(
543
+ ReactDOMServer.renderToStaticMarkup(
544
<Wrapper>
545
<span key={0}/>
546
<span key={1}/>
src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponent-test.js
+3
-3
@@ -16,9 +16,9 @@ var MorphingComponent;
16
var React;
17
var ReactDOM;
18
var ReactDOMFeatureFlags;
19
+var ReactDOMServer;
20
var ReactCurrentOwner;
21
var ReactPropTypes;
21
-var ReactServerRendering;
22
var ReactTestUtils;
23
24
describe('ReactCompositeComponent', () => {
@@ -28,10 +28,10 @@ describe('ReactCompositeComponent', () => {
28
React = require('React');
29
ReactDOM = require('ReactDOM');
30
ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
31
+ ReactDOMServer = require('ReactDOMServer');
32
ReactCurrentOwner = require('ReactCurrentOwner');
33
ReactPropTypes = require('ReactPropTypes');
34
ReactTestUtils = require('ReactTestUtils');
34
- ReactServerRendering = require('ReactServerRendering');
35
36
MorphingComponent = class extends React.Component {
37
state = {activated: false};
@@ -108,7 +108,7 @@ describe('ReactCompositeComponent', () => {
108
}
109
}
110
111
- var markup = ReactServerRendering.renderToString(<Parent />);
111
+ var markup = ReactDOMServer.renderToString(<Parent />);
112
var container = document.createElement('div');
113
container.innerHTML = markup;
114