Added SSR/hydration tests for modes, forwardRef, and Profiler

packages/react-dom/src/__tests__/ReactDOMServerIntegrationSpecialTypes-test.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+
+let React;
+let ReactDOM;
+let ReactDOMServer;
+
+function initModules() {
+  // Reset warning cache.
+  jest.resetModuleRegistry();
+  React = require('react');
+  ReactDOM = require('react-dom');
+  ReactDOMServer = require('react-dom/server');
+
+  // Make them available to the helpers.
+  return {
+    ReactDOM,
+    ReactDOMServer,
+  };
+}
+
+const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+
+describe('ReactDOMServerIntegration', () => {
+  beforeEach(() => {
+    resetModules();
+  });
+
+  itRenders('a forwardedRef component and its children', async render => {
+    const FunctionComponent = ({label, forwardedRef}) => (
+      <div ref={forwardedRef}>{label}</div>
+    );
+    const WrappedFunctionComponent = React.forwardRef((props, ref) => (
+      <FunctionComponent {...props} forwardedRef={ref} />
+    ));
+
+    const ref = React.createRef();
+    const element = await render(
+      <WrappedFunctionComponent ref={ref} label="Test" />,
+    );
+    const parent = element.parentNode;
+    const div = parent.childNodes[0];
+    expect(div.tagName).toBe('DIV');
+    expect(div.textContent).toBe('Test');
+  });
+
+  itRenders('a Profiler component and its children', async render => {
+    const element = await render(
+      <React.unstable_Profiler id="profiler" onRender={jest.fn()}>
+        <div>Test</div>
+      </React.unstable_Profiler>,
+    );
+    const parent = element.parentNode;
+    const div = parent.childNodes[0];
+    expect(div.tagName).toBe('DIV');
+    expect(div.textContent).toBe('Test');
+  });
+});

packages/react-dom/src/__tests__/ReactServerRenderingHydration.js

@@ -263,4 +263,76 @@ describe('ReactDOMServerHydration', () => {
         'Render them conditionally so that they only appear on the client render.',
     );
   });
+
+  it('should be able to render and hydrate Mode components', () => {
+    class ComponentWithWarning extends React.Component {
+      componentWillMount() {
+        // Expected warning
+      }
+      render() {
+        return 'Hi';
+      }
+    }
+
+    const markup = (
+      <React.StrictMode>
+        <ComponentWithWarning />
+      </React.StrictMode>
+    );
+
+    const element = document.createElement('div');
+    element.innerHTML = ReactDOMServer.renderToString(markup);
+    expect(element.textContent).toBe('Hi');
+
+    expect(() => ReactDOM.hydrate(markup, element)).toWarnDev(
+      'Please update the following components to use componentDidMount instead: ComponentWithWarning',
+    );
+    expect(element.textContent).toBe('Hi');
+  });
+
+  it('should be able to render and hydrate forwardRef components', () => {
+    const FunctionComponent = ({label, forwardedRef}) => (
+      <div ref={forwardedRef}>{label}</div>
+    );
+    const WrappedFunctionComponent = React.forwardRef((props, ref) => (
+      <FunctionComponent {...props} forwardedRef={ref} />
+    ));
+
+    const ref = React.createRef();
+    const markup = <WrappedFunctionComponent ref={ref} label="Hi" />;
+
+    const element = document.createElement('div');
+    element.innerHTML = ReactDOMServer.renderToString(markup);
+    expect(element.textContent).toBe('Hi');
+    expect(ref.current).toBe(null);
+
+    ReactDOM.hydrate(markup, element);
+    expect(element.textContent).toBe('Hi');
+    expect(ref.current.tagName).toBe('DIV');
+  });
+
+  it('should be able to render and hydrate Profiler components', () => {
+    const callback = jest.fn();
+    const markup = (
+      <React.unstable_Profiler id="profiler" onRender={callback}>
+        <div>Hi</div>
+      </React.unstable_Profiler>
+    );
+
+    const element = document.createElement('div');
+    element.innerHTML = ReactDOMServer.renderToString(markup);
+    expect(element.textContent).toBe('Hi');
+    expect(callback).not.toHaveBeenCalled();
+
+    ReactDOM.hydrate(markup, element);
+    expect(element.textContent).toBe('Hi');
+    if (__DEV__) {
+      expect(callback).toHaveBeenCalledTimes(1);
+      const [id, phase] = callback.mock.calls[0];
+      expect(id).toBe('profiler');
+      expect(phase).toBe('mount');
+    } else {
+      expect(callback).toHaveBeenCalledTimes(0);
+    }
+  });
 });