[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.

Author: sebmarkbage

scripts/fiber/tests-failing.txt

@@ -108,24 +108,6 @@ src/renderers/dom/stack/client/__tests__/ReactRenderDocument-test.js
 * should throw on full document render w/ no markup
 * supports findDOMNode on full-page components
 
-src/renderers/dom/stack/server/__tests__/ReactServerRendering-test.js
-* should generate simple markup
-* should generate simple markup for self-closing tags
-* should generate simple markup for attribute with `>` symbol
-* should generate comment markup for component returns null
-* should render composite components
-* should only execute certain lifecycle methods
-* should have the correct mounting behavior
-* should not put checksum and React ID on components
-* should not put checksum and React ID on text components
-* should only execute certain lifecycle methods
-* allows setState in componentWillMount without using DOM
-* 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 replaceState is triggered
-* warns with a no-op when an async forceUpdate is triggered
-* should warn when children are mutated during render
-
 src/renderers/shared/__tests__/ReactPerf-test.js
 * should count no-op update as waste
 * should count no-op update in child as waste
@@ -150,7 +132,6 @@ src/renderers/shared/stack/reconciler/__tests__/ReactComponentLifeCycle-test.js
 * should carry through each of the phases of setup
 
 src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponent-test.js
-* should not thrash a server rendered layout with client side one
 * should warn about `forceUpdate` on unmounted components
 * should warn about `setState` on unmounted components
 * should warn about `setState` in render

scripts/fiber/tests-passing-except-dev.txt

@@ -65,6 +65,9 @@ src/renderers/dom/stack/client/__tests__/ReactMountDestruction-test.js
 * should warn when unmounting a non-container root node
 * should warn when unmounting a non-container, non-root node
 
+src/renderers/dom/stack/server/__tests__/ReactServerRendering-test.js
+* should have the correct mounting behavior
+
 src/renderers/shared/hooks/__tests__/ReactComponentTreeHook-test.js
 * uses displayName or Unknown for classic components
 * uses displayName, name, or ReactComponent for modern components

scripts/fiber/tests-passing.txt

@@ -919,8 +919,23 @@ src/renderers/dom/stack/client/__tests__/findDOMNode-test.js
 * findDOMNode should not throw an error when called within a component that is not mounted
 
 src/renderers/dom/stack/server/__tests__/ReactServerRendering-test.js
+* should generate simple markup
+* should generate simple markup for self-closing tags
+* should generate simple markup for attribute with `>` symbol
+* should generate comment markup for component returns null
+* should render composite components
+* should only execute certain lifecycle methods
 * should throw with silly args
+* should not put checksum and React ID on components
+* should not put checksum and React ID on text components
+* should only execute certain lifecycle methods
 * should throw with silly args
+* allows setState in componentWillMount without using DOM
+* 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 replaceState is triggered
+* warns with a no-op when an async forceUpdate is triggered
+* should warn when children are mutated during render
 
 src/renderers/native/__tests__/ReactNativeAttributePayload-test.js
 * should work with simple example
@@ -1231,6 +1246,7 @@ src/renderers/shared/stack/reconciler/__tests__/ReactComponentLifeCycle-test.js
 src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponent-test.js
 * should support module pattern components
 * should support rendering to different child types over time
+* should not thrash a server rendered layout with client side one
 * should react to state changes from callbacks
 * should rewire refs when rendering to different child types
 * should not cache old DOM nodes when switching constructors

src/renderers/dom/stack/server/__tests__/ReactServerRendering-test.js

@@ -14,26 +14,28 @@
 var ExecutionEnvironment;
 var React;
 var ReactDOM;
+var ReactDOMFeatureFlags;
+var ReactDOMServer;
 var ReactMarkupChecksum;
 var ReactReconcileTransaction;
 var ReactTestUtils;
-var ReactServerRendering;
 
 var ID_ATTRIBUTE_NAME;
 var ROOT_ATTRIBUTE_NAME;
 
-describe('ReactServerRendering', () => {
+describe('ReactDOMServer', () => {
   beforeEach(() => {
     jest.resetModuleRegistry();
     React = require('React');
     ReactDOM = require('ReactDOM');
+    ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
     ReactMarkupChecksum = require('ReactMarkupChecksum');
     ReactTestUtils = require('ReactTestUtils');
     ReactReconcileTransaction = require('ReactReconcileTransaction');
 
     ExecutionEnvironment = require('ExecutionEnvironment');
     ExecutionEnvironment.canUseDOM = false;
-    ReactServerRendering = require('ReactServerRendering');
+    ReactDOMServer = require('ReactDOMServer');
 
     var DOMProperty = require('DOMProperty');
     ID_ATTRIBUTE_NAME = DOMProperty.ID_ATTRIBUTE_NAME;
@@ -42,7 +44,7 @@ describe('ReactServerRendering', () => {
 
   describe('renderToString', () => {
     it('should generate simple markup', () => {
-      var response = ReactServerRendering.renderToString(
+      var response = ReactDOMServer.renderToString(
         <span>hello world</span>
       );
       expect(response).toMatch(new RegExp(
@@ -53,7 +55,7 @@ describe('ReactServerRendering', () => {
     });
 
     it('should generate simple markup for self-closing tags', () => {
-      var response = ReactServerRendering.renderToString(
+      var response = ReactDOMServer.renderToString(
         <img />
       );
       expect(response).toMatch(new RegExp(
@@ -64,7 +66,7 @@ describe('ReactServerRendering', () => {
     });
 
     it('should generate simple markup for attribute with `>` symbol', () => {
-      var response = ReactServerRendering.renderToString(
+      var response = ReactDOMServer.renderToString(
         <img data-attr=">" />
       );
       expect(response).toMatch(new RegExp(
@@ -81,7 +83,7 @@ describe('ReactServerRendering', () => {
         }
       }
 
-      var response = ReactServerRendering.renderToString(<NullComponent />);
+      var response = ReactDOMServer.renderToString(<NullComponent />);
       expect(response).toBe('<!-- react-empty: 1 -->');
     });
 
@@ -100,7 +102,7 @@ describe('ReactServerRendering', () => {
         }
       }
 
-      var response = ReactServerRendering.renderToString(
+      var response = ReactDOMServer.renderToString(
         <Parent />
       );
       expect(response).toMatch(new RegExp(
@@ -160,7 +162,7 @@ describe('ReactServerRendering', () => {
           }
         }
 
-        var response = ReactServerRendering.renderToString(
+        var response = ReactDOMServer.renderToString(
           <TestComponent />
         );
 
@@ -233,15 +235,25 @@ describe('ReactServerRendering', () => {
       expect(element.innerHTML).toEqual('');
 
       ExecutionEnvironment.canUseDOM = false;
-      lastMarkup = ReactServerRendering.renderToString(
+      lastMarkup = ReactDOMServer.renderToString(
         <TestComponent name="x" />
       );
       ExecutionEnvironment.canUseDOM = true;
       element.innerHTML = lastMarkup;
 
       var instance = ReactDOM.render(<TestComponent name="x" />, element);
       expect(mountCount).toEqual(3);
-      expect(element.innerHTML).toBe(lastMarkup);
+
+      var expectedMarkup = lastMarkup;
+      if (ReactDOMFeatureFlags.useFiber) {
+        var reactMetaData = /\s+data-react[a-z-]+=\"[^\"]*\"/g;
+        var reactComments = /<!-- \/?react-text(: \d+)? -->/g;
+        expectedMarkup =
+          expectedMarkup
+          .replace(reactMetaData, '')
+          .replace(reactComments, '');
+      }
+      expect(element.innerHTML).toBe(expectedMarkup);
 
       // Ensure the events system works after mount into server markup
       expect(numClicks).toEqual(0);
@@ -269,8 +281,8 @@ describe('ReactServerRendering', () => {
 
     it('should throw with silly args', () => {
       expect(
-        ReactServerRendering.renderToString.bind(
-          ReactServerRendering,
+        ReactDOMServer.renderToString.bind(
+          ReactDOMServer,
           'not a component'
         )
       ).toThrowError(
@@ -293,7 +305,7 @@ describe('ReactServerRendering', () => {
         }
       }
 
-      var response = ReactServerRendering.renderToStaticMarkup(
+      var response = ReactDOMServer.renderToStaticMarkup(
         <TestComponent />
       );
 
@@ -307,7 +319,7 @@ describe('ReactServerRendering', () => {
         }
       }
 
-      var response = ReactServerRendering.renderToStaticMarkup(
+      var response = ReactDOMServer.renderToStaticMarkup(
         <TestComponent />
       );
 
@@ -359,7 +371,7 @@ describe('ReactServerRendering', () => {
           }
         }
 
-        var response = ReactServerRendering.renderToStaticMarkup(
+        var response = ReactDOMServer.renderToStaticMarkup(
           <TestComponent />
         );
 
@@ -378,8 +390,8 @@ describe('ReactServerRendering', () => {
 
     it('should throw with silly args', () => {
       expect(
-        ReactServerRendering.renderToStaticMarkup.bind(
-          ReactServerRendering,
+        ReactDOMServer.renderToStaticMarkup.bind(
+          ReactDOMServer,
           'not a component'
         )
       ).toThrowError(
@@ -402,7 +414,7 @@ describe('ReactServerRendering', () => {
         // We shouldn't ever be calling this on the server
         throw new Error('Browser reconcile transaction should not be used');
       };
-      var markup = ReactServerRendering.renderToString(
+      var markup = ReactDOMServer.renderToString(
         <Component />
       );
       expect(markup.indexOf('hello, world') >= 0).toBe(true);
@@ -411,7 +423,7 @@ describe('ReactServerRendering', () => {
     it('renders components with different batching strategies', () => {
       class StaticComponent extends React.Component {
         render() {
-          const staticContent = ReactServerRendering.renderToStaticMarkup(
+          const staticContent = ReactDOMServer.renderToStaticMarkup(
             <div>
               <img src="foo-bar.jpg" />
             </div>
@@ -431,8 +443,8 @@ describe('ReactServerRendering', () => {
       }
 
       expect(
-        ReactServerRendering.renderToString.bind(
-          ReactServerRendering,
+        ReactDOMServer.renderToString.bind(
+          ReactDOMServer,
           <div>
             <StaticComponent />
             <Component />
@@ -456,15 +468,15 @@ describe('ReactServerRendering', () => {
     }
 
     spyOn(console, 'error');
-    ReactServerRendering.renderToString(<Foo />);
+    ReactDOMServer.renderToString(<Foo />);
     jest.runOnlyPendingTimers();
     expectDev(console.error.calls.count()).toBe(1);
     expectDev(console.error.calls.mostRecent().args[0]).toBe(
       'Warning: setState(...): Can only update a mounting component.' +
       ' This usually means you called setState() outside componentWillMount() on the server.' +
       ' This is a no-op. Please check the code for the Foo component.'
     );
-    var markup = ReactServerRendering.renderToStaticMarkup(<Foo />);
+    var markup = ReactDOMServer.renderToStaticMarkup(<Foo />);
     expect(markup).toBe('<div>hello</div>');
   });
 
@@ -482,15 +494,15 @@ describe('ReactServerRendering', () => {
     });
 
     spyOn(console, 'error');
-    ReactServerRendering.renderToString(<Bar />);
+    ReactDOMServer.renderToString(<Bar />);
     jest.runOnlyPendingTimers();
     expectDev(console.error.calls.count()).toBe(1);
     expectDev(console.error.calls.mostRecent().args[0]).toBe(
       'Warning: replaceState(...): Can only update a mounting component. ' +
       'This usually means you called replaceState() outside componentWillMount() on the server. ' +
       'This is a no-op. Please check the code for the Bar component.'
     );
-    var markup = ReactServerRendering.renderToStaticMarkup(<Bar />);
+    var markup = ReactDOMServer.renderToStaticMarkup(<Bar />);
     expect(markup).toBe('<div>hello</div>');
   });
 
@@ -509,15 +521,15 @@ describe('ReactServerRendering', () => {
     }
 
     spyOn(console, 'error');
-    ReactServerRendering.renderToString(<Baz />);
+    ReactDOMServer.renderToString(<Baz />);
     jest.runOnlyPendingTimers();
     expectDev(console.error.calls.count()).toBe(1);
     expectDev(console.error.calls.mostRecent().args[0]).toBe(
       'Warning: forceUpdate(...): Can only update a mounting component. ' +
       'This usually means you called forceUpdate() outside componentWillMount() on the server. ' +
       'This is a no-op. Please check the code for the Baz component.'
     );
-    var markup = ReactServerRendering.renderToStaticMarkup(<Baz />);
+    var markup = ReactDOMServer.renderToStaticMarkup(<Baz />);
     expect(markup).toBe('<div></div>');
   });
 
@@ -528,7 +540,7 @@ describe('ReactServerRendering', () => {
       return <div>{props.children}</div>;
     }
     expect(() => {
-      ReactServerRendering.renderToStaticMarkup(
+      ReactDOMServer.renderToStaticMarkup(
         <Wrapper>
           <span key={0}/>
           <span key={1}/>

src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponent-test.js

@@ -16,9 +16,9 @@ var MorphingComponent;
 var React;
 var ReactDOM;
 var ReactDOMFeatureFlags;
+var ReactDOMServer;
 var ReactCurrentOwner;
 var ReactPropTypes;
-var ReactServerRendering;
 var ReactTestUtils;
 
 describe('ReactCompositeComponent', () => {
@@ -28,10 +28,10 @@ describe('ReactCompositeComponent', () => {
     React = require('React');
     ReactDOM = require('ReactDOM');
     ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
+    ReactDOMServer = require('ReactDOMServer');
     ReactCurrentOwner = require('ReactCurrentOwner');
     ReactPropTypes = require('ReactPropTypes');
     ReactTestUtils = require('ReactTestUtils');
-    ReactServerRendering = require('ReactServerRendering');
 
     MorphingComponent = class extends React.Component {
       state = {activated: false};
@@ -108,7 +108,7 @@ describe('ReactCompositeComponent', () => {
       }
     }
 
-    var markup = ReactServerRendering.renderToString(<Parent />);
+    var markup = ReactDOMServer.renderToString(<Parent />);
     var container = document.createElement('div');
     container.innerHTML = markup;