From b9ddd206f95af4a42265874b73f3e31b97ab0fe6 Mon Sep 17 00:00:00 2001 From: Edvin Erikson Date: Mon, 5 Jun 2017 00:44:24 +0200 Subject: [PATCH] Fiber SSR tests (#9846) --- scripts/fiber/tests-passing.txt | 3 + scripts/rollup/results.json | 122 +++++++++--------- .../__tests__/ReactServerRendering-test.js | 82 +++++++++++- .../shared/server/ReactServerRenderer.js | 4 + 4 files changed, 149 insertions(+), 62 deletions(-) diff --git a/scripts/fiber/tests-passing.txt b/scripts/fiber/tests-passing.txt index 5ed7aa117f..401449172b 100644 --- a/scripts/fiber/tests-passing.txt +++ b/scripts/fiber/tests-passing.txt @@ -1327,6 +1327,9 @@ src/renderers/dom/shared/__tests__/ReactServerRendering-test.js * should only execute certain lifecycle methods * should throw with silly args * allows setState in componentWillMount without using DOM +* allows setState in componentWillMount with custom constructor +* renders with props when using custom constructor +* renders with context when using custom constructor * renders components with different batching strategies * warns with a no-op when an async setState is triggered * warns with a no-op when an async forceUpdate is triggered diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json index 0787402e94..35deea083e 100644 --- a/scripts/rollup/results.json +++ b/scripts/rollup/results.json @@ -9,28 +9,28 @@ "gzip": 3089 }, "react-dom.development.js (UMD_DEV)": { - "size": 605435, - "gzip": 139358 + "size": 603820, + "gzip": 138900 }, "react-dom.production.min.js (UMD_PROD)": { - "size": 125246, - "gzip": 39624 + "size": 124927, + "gzip": 39493 }, "react-dom-server.development.js (UMD_DEV)": { - "size": 534438, - "gzip": 129160 + "size": 532325, + "gzip": 128572 }, "react-dom-server.production.min.js (UMD_PROD)": { - "size": 113386, - "gzip": 35642 + "size": 112876, + "gzip": 35439 }, "react-art.development.js (UMD_DEV)": { - "size": 359125, - "gzip": 79859 + "size": 358834, + "gzip": 79713 }, "react-art.production.min.js (UMD_PROD)": { - "size": 98612, - "gzip": 29993 + "size": 98607, + "gzip": 29968 }, "react.development.js (NODE_DEV)": { "size": 64064, @@ -57,36 +57,36 @@ "gzip": 86700 }, "react-dom.development.js (NODE_DEV)": { - "size": 563003, - "gzip": 129288 + "size": 562438, + "gzip": 129053 }, "react-dom.production.min.js (NODE_PROD)": { - "size": 121459, - "gzip": 38279 + "size": 121292, + "gzip": 38189 }, "ReactDOMFiber-dev.js (FB_DEV)": { - "size": 563992, - "gzip": 129811 + "size": 563608, + "gzip": 129673 }, "ReactDOMFiber-prod.js (FB_PROD)": { - "size": 423415, - "gzip": 96616 + "size": 423197, + "gzip": 96509 }, "react-dom-server.development.js (NODE_DEV)": { - "size": 482987, - "gzip": 116600 + "size": 481924, + "gzip": 116242 }, "react-dom-server.production.min.js (NODE_PROD)": { - "size": 107761, - "gzip": 33495 + "size": 107403, + "gzip": 33347 }, "ReactDOMServerStack-dev.js (FB_DEV)": { - "size": 464469, - "gzip": 112326 + "size": 463581, + "gzip": 112069 }, "ReactDOMServerStack-prod.js (FB_PROD)": { - "size": 341137, - "gzip": 82395 + "size": 340301, + "gzip": 82162 }, "ReactARTStack-dev.js (FB_DEV)": { "size": 143177, @@ -97,20 +97,20 @@ "gzip": 23049 }, "react-art.development.js (NODE_DEV)": { - "size": 280466, - "gzip": 59782 - }, - "react-art.production.min.js (NODE_PROD)": { - "size": 59997, - "gzip": 18059 - }, - "ReactARTFiber-dev.js (FB_DEV)": { - "size": 279735, + "size": 280175, "gzip": 59621 }, + "react-art.production.min.js (NODE_PROD)": { + "size": 59992, + "gzip": 18043 + }, + "ReactARTFiber-dev.js (FB_DEV)": { + "size": 279625, + "gzip": 59561 + }, "ReactARTFiber-prod.js (FB_PROD)": { - "size": 217307, - "gzip": 45335 + "size": 217340, + "gzip": 45300 }, "ReactNativeStack.js (RN)": { "size": 233993, @@ -121,20 +121,20 @@ "gzip": 84001 }, "ReactTestRendererFiber-dev.js (FB_DEV)": { - "size": 277216, - "gzip": 58480 + "size": 277109, + "gzip": 58420 }, "ReactTestRendererStack-dev.js (FB_DEV)": { - "size": 151781, - "gzip": 34856 + "size": 151247, + "gzip": 34719 }, "react-noop-renderer.development.js (NODE_DEV)": { - "size": 269122, - "gzip": 56410 + "size": 268831, + "gzip": 56248 }, "react-test-renderer.development.js (NODE_DEV)": { - "size": 277956, - "gzip": 58660 + "size": 277668, + "gzip": 58491 }, "react-dom-test-utils.development.js (NODE_DEV)": { "size": 52792, @@ -145,8 +145,8 @@ "gzip": 13574 }, "react-test-renderer-stack.development.js (NODE_DEV)": { - "size": 152686, - "gzip": 35015 + "size": 151979, + "gzip": 34761 }, "react-test-renderer-shallow.development.js (NODE_DEV)": { "size": 8108, @@ -157,28 +157,28 @@ "gzip": 2234 }, "ReactDOMServerStream-dev.js (FB_DEV)": { - "size": 481456, - "gzip": 116430 + "size": 480568, + "gzip": 116171 }, "ReactDOMServerStream-prod.js (FB_PROD)": { - "size": 352294, - "gzip": 85249 + "size": 351458, + "gzip": 85017 }, "ReactNativeStack-dev.js (RN_DEV)": { - "size": 182421, - "gzip": 35496 + "size": 186098, + "gzip": 35885 }, "ReactNativeStack-prod.js (RN_PROD)": { - "size": 134188, - "gzip": 25741 + "size": 137881, + "gzip": 26310 }, "ReactNativeFiber-dev.js (RN_DEV)": { - "size": 278278, - "gzip": 50225 + "size": 282183, + "gzip": 50630 }, "ReactNativeFiber-prod.js (RN_PROD)": { - "size": 216205, - "gzip": 37384 + "size": 220295, + "gzip": 37795 } } } \ No newline at end of file diff --git a/src/renderers/dom/shared/__tests__/ReactServerRendering-test.js b/src/renderers/dom/shared/__tests__/ReactServerRendering-test.js index 93975911b6..638ff28e7b 100644 --- a/src/renderers/dom/shared/__tests__/ReactServerRendering-test.js +++ b/src/renderers/dom/shared/__tests__/ReactServerRendering-test.js @@ -19,6 +19,7 @@ var ReactDOMServer; var ReactMarkupChecksum; var ReactReconcileTransaction; var ReactTestUtils; +var PropTypes; var ID_ATTRIBUTE_NAME; var ROOT_ATTRIBUTE_NAME; @@ -32,6 +33,7 @@ describe('ReactDOMServer', () => { ReactMarkupChecksum = require('ReactMarkupChecksum'); ReactTestUtils = require('ReactTestUtils'); ReactReconcileTransaction = require('ReactReconcileTransaction'); + PropTypes = require('prop-types'); ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment'); ExecutionEnvironment.canUseDOM = false; @@ -424,7 +426,85 @@ describe('ReactDOMServer', () => { throw new Error('Browser reconcile transaction should not be used'); }; var markup = ReactDOMServer.renderToString(); - expect(markup.indexOf('hello, world') >= 0).toBe(true); + expect(markup).toContain('hello, world'); + }); + + it('allows setState in componentWillMount with custom constructor', () => { + class Component extends React.Component { + constructor() { + super(); + this.state = {text: 'default state'}; + } + + componentWillMount() { + this.setState({text: 'hello, world'}); + } + + render() { + return
{this.state.text}
; + } + } + + ReactReconcileTransaction.prototype.perform = function() { + // We shouldn't ever be calling this on the server + throw new Error('Browser reconcile transaction should not be used'); + }; + var markup = ReactDOMServer.renderToString(); + expect(markup).toContain('hello, world'); + }); + + it('renders with props when using custom constructor', () => { + class Component extends React.Component { + constructor() { + super(); + } + + render() { + return
{this.props.text}
; + } + } + + var markup = ReactDOMServer.renderToString( + , + ); + expect(markup).toContain('hello, world'); + }); + + it('renders with context when using custom constructor', () => { + class Component extends React.Component { + constructor() { + super(); + } + + render() { + return
{this.context.text}
; + } + } + + Component.contextTypes = { + text: PropTypes.string.isRequired, + }; + + class ContextProvider extends React.Component { + getChildContext() { + return { + text: 'hello, world', + }; + } + + render() { + return this.props.children; + } + } + + ContextProvider.childContextTypes = { + text: PropTypes.string, + }; + + var markup = ReactDOMServer.renderToString( + , + ); + expect(markup).toContain('hello, world'); }); it('renders components with different batching strategies', () => { diff --git a/src/renderers/shared/server/ReactServerRenderer.js b/src/renderers/shared/server/ReactServerRenderer.js index db96d478c8..fc86b3bf2c 100644 --- a/src/renderers/shared/server/ReactServerRenderer.js +++ b/src/renderers/shared/server/ReactServerRenderer.js @@ -278,6 +278,10 @@ function resolve(child, context) { } } + inst.props = child.props; + inst.context = publicContext; + inst.updater = updater; + var initialState = inst.state; if (initialState === undefined) { inst.state = initialState = null;