Added SSR/hydration tests for modes, forwardRef, and Profiler (#13195)
* Added more SSR tests for modes, profiler, and forward-ref
Brian Vaughn committed
Jul 12, 2018 at 08:35 UTC
58f3b29d91a1bcd5c81d25ae8b3f760cbea612ae
2 files changed
+140
packages/react-dom/src/__tests__/ReactDOMServerIntegrationSpecialTypes-test.js
new
+68
@@ -0,0 +1,68 @@
1
+/**
2
+ * Copyright (c) 2013-present, Facebook, Inc.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @emails react-core
8
+ */
9
+
10
+'use strict';
11
+
12
+const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
13
+
14
+let React;
15
+let ReactDOM;
16
+let ReactDOMServer;
17
+
18
+function initModules() {
19
+ // Reset warning cache.
20
+ jest.resetModuleRegistry();
21
+ React = require('react');
22
+ ReactDOM = require('react-dom');
23
+ ReactDOMServer = require('react-dom/server');
24
+
25
+ // Make them available to the helpers.
26
+ return {
27
+ ReactDOM,
28
+ ReactDOMServer,
29
+ };
30
+}
31
+
32
+const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
33
+
34
+describe('ReactDOMServerIntegration', () => {
35
+ beforeEach(() => {
36
+ resetModules();
37
+ });
38
+
39
+ itRenders('a forwardedRef component and its children', async render => {
40
+ const FunctionComponent = ({label, forwardedRef}) => (
41
+ <div ref={forwardedRef}>{label}</div>
42
+ );
43
+ const WrappedFunctionComponent = React.forwardRef((props, ref) => (
44
+ <FunctionComponent {...props} forwardedRef={ref} />
45
+ ));
46
+
47
+ const ref = React.createRef();
48
+ const element = await render(
49
+ <WrappedFunctionComponent ref={ref} label="Test" />,
50
+ );
51
+ const parent = element.parentNode;
52
+ const div = parent.childNodes[0];
53
+ expect(div.tagName).toBe('DIV');
54
+ expect(div.textContent).toBe('Test');
55
+ });
56
+
57
+ itRenders('a Profiler component and its children', async render => {
58
+ const element = await render(
59
+ <React.unstable_Profiler id="profiler" onRender={jest.fn()}>
60
+ <div>Test</div>
61
+ </React.unstable_Profiler>,
62
+ );
63
+ const parent = element.parentNode;
64
+ const div = parent.childNodes[0];
65
+ expect(div.tagName).toBe('DIV');
66
+ expect(div.textContent).toBe('Test');
67
+ });
68
+});
packages/react-dom/src/__tests__/ReactServerRenderingHydration.js
+72
@@ -263,4 +263,76 @@ describe('ReactDOMServerHydration', () => {
263
'Render them conditionally so that they only appear on the client render.',
264
);
265
});
266
+
267
+ it('should be able to render and hydrate Mode components', () => {
268
+ class ComponentWithWarning extends React.Component {
269
+ componentWillMount() {
270
+ // Expected warning
271
+ }
272
+ render() {
273
+ return 'Hi';
274
+ }
275
+ }
276
+
277
+ const markup = (
278
+ <React.StrictMode>
279
+ <ComponentWithWarning />
280
+ </React.StrictMode>
281
+ );
282
+
283
+ const element = document.createElement('div');
284
+ element.innerHTML = ReactDOMServer.renderToString(markup);
285
+ expect(element.textContent).toBe('Hi');
286
+
287
+ expect(() => ReactDOM.hydrate(markup, element)).toWarnDev(
288
+ 'Please update the following components to use componentDidMount instead: ComponentWithWarning',
289
+ );
290
+ expect(element.textContent).toBe('Hi');
291
+ });
292
+
293
+ it('should be able to render and hydrate forwardRef components', () => {
294
+ const FunctionComponent = ({label, forwardedRef}) => (
295
+ <div ref={forwardedRef}>{label}</div>
296
+ );
297
+ const WrappedFunctionComponent = React.forwardRef((props, ref) => (
298
+ <FunctionComponent {...props} forwardedRef={ref} />
299
+ ));
300
+
301
+ const ref = React.createRef();
302
+ const markup = <WrappedFunctionComponent ref={ref} label="Hi" />;
303
+
304
+ const element = document.createElement('div');
305
+ element.innerHTML = ReactDOMServer.renderToString(markup);
306
+ expect(element.textContent).toBe('Hi');
307
+ expect(ref.current).toBe(null);
308
+
309
+ ReactDOM.hydrate(markup, element);
310
+ expect(element.textContent).toBe('Hi');
311
+ expect(ref.current.tagName).toBe('DIV');
312
+ });
313
+
314
+ it('should be able to render and hydrate Profiler components', () => {
315
+ const callback = jest.fn();
316
+ const markup = (
317
+ <React.unstable_Profiler id="profiler" onRender={callback}>
318
+ <div>Hi</div>
319
+ </React.unstable_Profiler>
320
+ );
321
+
322
+ const element = document.createElement('div');
323
+ element.innerHTML = ReactDOMServer.renderToString(markup);
324
+ expect(element.textContent).toBe('Hi');
325
+ expect(callback).not.toHaveBeenCalled();
326
+
327
+ ReactDOM.hydrate(markup, element);
328
+ expect(element.textContent).toBe('Hi');
329
+ if (__DEV__) {
330
+ expect(callback).toHaveBeenCalledTimes(1);
331
+ const [id, phase] = callback.mock.calls[0];
332
+ expect(id).toBe('profiler');
333
+ expect(phase).toBe('mount');
334
+ } else {
335
+ expect(callback).toHaveBeenCalledTimes(0);
336
+ }
337
+ });
338
});