.',
+ );
+ } else {
+ expectDev(console.error.calls.argsFor(0)[0]).toContain(
+ 'Target node has markup rendered by React, but there are unrelated nodes as well.',
+ );
+ }
});
it('should not warn if mounting into non-empty node', () => {
@@ -203,10 +220,17 @@ describe('ReactMount', () => {
div.innerHTML = markup;
spyOn(console, 'error');
- ReactDOM.render(
- This markup contains an nbsp entity: client text
,
- div,
- );
+ if (ReactDOMFeatureFlags.useFiber) {
+ ReactDOM.hydrate(
+ This markup contains an nbsp entity: client text
,
+ div,
+ );
+ } else {
+ ReactDOM.render(
+ This markup contains an nbsp entity: client text
,
+ div,
+ );
+ }
expectDev(console.error.calls.count()).toBe(1);
if (ReactDOMFeatureFlags.useFiber) {
expectDev(console.error.calls.argsFor(0)[0]).toContain(
diff --git a/src/renderers/dom/shared/__tests__/ReactRenderDocument-test.js b/src/renderers/dom/shared/__tests__/ReactRenderDocument-test.js
index 21089d763821d..89eccba3bc25c 100644
--- a/src/renderers/dom/shared/__tests__/ReactRenderDocument-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactRenderDocument-test.js
@@ -14,10 +14,11 @@
var React;
var ReactDOM;
var ReactDOMServer;
-var ReactDOMFeatureFlags;
var getTestDocument;
+var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
+
var UNMOUNT_INVARIANT_MESSAGE =
' tried to unmount. ' +
'Because of cross-browser quirks it is impossible to unmount some ' +
@@ -32,256 +33,524 @@ describe('rendering React components at document', () => {
React = require('react');
ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server');
- ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
getTestDocument = require('getTestDocument');
});
- it('should be able to adopt server markup', () => {
- class Root extends React.Component {
- render() {
- return (
-
-
- Hello World
-
-
- {'Hello ' + this.props.hello}
-
-
+ describe('with old implicit hydration API', () => {
+ function expectDeprecationWarningWithFiber() {
+ if (ReactDOMFeatureFlags.useFiber) {
+ expectDev(console.warn.calls.count()).toBe(1);
+ expectDev(console.warn.calls.argsFor(0)[0]).toContain(
+ 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
+ 'will stop working in React v17. Replace the ReactDOM.render() call ' +
+ 'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
);
+ } else {
+ expectDev(console.warn.calls.count()).toBe(0);
}
}
- var markup = ReactDOMServer.renderToString();
- var testDocument = getTestDocument(markup);
- var body = testDocument.body;
-
- ReactDOM.render(, testDocument);
- expect(testDocument.body.innerHTML).toBe('Hello world');
+ it('should be able to adopt server markup', () => {
+ spyOn(console, 'warn');
+ class Root extends React.Component {
+ render() {
+ return (
+
+
+ Hello World
+
+
+ {'Hello ' + this.props.hello}
+
+
+ );
+ }
+ }
- ReactDOM.render(, testDocument);
- expect(testDocument.body.innerHTML).toBe('Hello moon');
+ var markup = ReactDOMServer.renderToString();
+ var testDocument = getTestDocument(markup);
+ var body = testDocument.body;
- expect(body === testDocument.body).toBe(true);
- });
+ ReactDOM.render(, testDocument);
+ expect(testDocument.body.innerHTML).toBe('Hello world');
- it('should not be able to unmount component from document node', () => {
- class Root extends React.Component {
- render() {
- return (
-
-
- Hello World
-
-
- Hello world
-
-
- );
+ ReactDOM.render(, testDocument);
+ expect(testDocument.body.innerHTML).toBe('Hello moon');
+
+ expect(body === testDocument.body).toBe(true);
+ expectDeprecationWarningWithFiber();
+ });
+
+ it('should not be able to unmount component from document node', () => {
+ spyOn(console, 'warn');
+ class Root extends React.Component {
+ render() {
+ return (
+
+
+ Hello World
+
+
+ Hello world
+
+
+ );
+ }
}
- }
-
- var markup = ReactDOMServer.renderToString();
- var testDocument = getTestDocument(markup);
- ReactDOM.render(, testDocument);
- expect(testDocument.body.innerHTML).toBe('Hello world');
-
- if (ReactDOMFeatureFlags.useFiber) {
- // In Fiber this actually works. It might not be a good idea though.
- ReactDOM.unmountComponentAtNode(testDocument);
- expect(testDocument.firstChild).toBe(null);
- } else {
- expect(function() {
- ReactDOM.unmountComponentAtNode(testDocument);
- }).toThrowError(UNMOUNT_INVARIANT_MESSAGE);
+ var markup = ReactDOMServer.renderToString();
+ var testDocument = getTestDocument(markup);
+ ReactDOM.render(, testDocument);
expect(testDocument.body.innerHTML).toBe('Hello world');
- }
- });
- it('should not be able to switch root constructors', () => {
- class Component extends React.Component {
- render() {
- return (
-
-
- Hello World
-
-
- Hello world
-
-
- );
+ if (ReactDOMFeatureFlags.useFiber) {
+ // In Fiber this actually works. It might not be a good idea though.
+ ReactDOM.unmountComponentAtNode(testDocument);
+ expect(testDocument.firstChild).toBe(null);
+ } else {
+ expect(function() {
+ ReactDOM.unmountComponentAtNode(testDocument);
+ }).toThrowError(UNMOUNT_INVARIANT_MESSAGE);
+
+ expect(testDocument.body.innerHTML).toBe('Hello world');
}
- }
- class Component2 extends React.Component {
- render() {
- return (
-
-
- Hello World
-
-
- Goodbye world
-
-
- );
+ expectDeprecationWarningWithFiber();
+ });
+
+ it('should not be able to switch root constructors', () => {
+ spyOn(console, 'warn');
+ class Component extends React.Component {
+ render() {
+ return (
+
+
+ Hello World
+
+
+ Hello world
+
+
+ );
+ }
}
- }
- var markup = ReactDOMServer.renderToString();
- var testDocument = getTestDocument(markup);
+ class Component2 extends React.Component {
+ render() {
+ return (
+
+
+ Hello World
+
+
+ Goodbye world
+
+
+ );
+ }
+ }
- ReactDOM.render(, testDocument);
+ var markup = ReactDOMServer.renderToString();
+ var testDocument = getTestDocument(markup);
- expect(testDocument.body.innerHTML).toBe('Hello world');
+ ReactDOM.render(, testDocument);
- // Reactive update
- if (ReactDOMFeatureFlags.useFiber) {
- // This works but is probably a bad idea.
- ReactDOM.render(, testDocument);
+ expect(testDocument.body.innerHTML).toBe('Hello world');
- expect(testDocument.body.innerHTML).toBe('Goodbye world');
- } else {
- expect(function() {
+ // Reactive update
+ if (ReactDOMFeatureFlags.useFiber) {
+ // This works but is probably a bad idea.
ReactDOM.render(, testDocument);
- }).toThrowError(UNMOUNT_INVARIANT_MESSAGE);
- expect(testDocument.body.innerHTML).toBe('Hello world');
- }
- });
+ expect(testDocument.body.innerHTML).toBe('Goodbye world');
+ } else {
+ expect(function() {
+ ReactDOM.render(, testDocument);
+ }).toThrowError(UNMOUNT_INVARIANT_MESSAGE);
- it('should be able to mount into document', () => {
- class Component extends React.Component {
- render() {
- return (
-
-
- Hello World
-
-
- {this.props.text}
-
-
- );
+ expect(testDocument.body.innerHTML).toBe('Hello world');
}
- }
- var markup = ReactDOMServer.renderToString(
- ,
- );
- var testDocument = getTestDocument(markup);
+ expectDeprecationWarningWithFiber();
+ });
+
+ it('should be able to mount into document', () => {
+ spyOn(console, 'warn');
+ class Component extends React.Component {
+ render() {
+ return (
+
+
+ Hello World
+
+
+ {this.props.text}
+
+
+ );
+ }
+ }
- ReactDOM.render(, testDocument);
+ var markup = ReactDOMServer.renderToString(
+ ,
+ );
+ var testDocument = getTestDocument(markup);
- expect(testDocument.body.innerHTML).toBe('Hello world');
- });
+ ReactDOM.render(, testDocument);
- it('renders over an existing text child without throwing', () => {
- const container = document.createElement('div');
- container.textContent = 'potato';
- ReactDOM.render(parsnip
, container);
- expect(container.textContent).toBe('parsnip');
- });
+ expect(testDocument.body.innerHTML).toBe('Hello world');
+ expectDeprecationWarningWithFiber();
+ });
+
+ it('renders over an existing text child without throwing', () => {
+ const container = document.createElement('div');
+ container.textContent = 'potato';
+ ReactDOM.render(parsnip
, container);
+ expect(container.textContent).toBe('parsnip');
+ // We don't expect a warning about new hydration API here because
+ // we aren't sure if the user meant to hydrate or replace a stub node.
+ // We would see a warning if the container had React-rendered HTML in it.
+ });
+
+ it('should give helpful errors on state desync', () => {
+ class Component extends React.Component {
+ render() {
+ return (
+
+
+ Hello World
+
+
+ {this.props.text}
+
+
+ );
+ }
+ }
- it('should give helpful errors on state desync', () => {
- class Component extends React.Component {
- render() {
- return (
-
-
- Hello World
-
-
- {this.props.text}
-
-
+ var markup = ReactDOMServer.renderToString(
+ ,
+ );
+ var testDocument = getTestDocument(markup);
+
+ if (ReactDOMFeatureFlags.useFiber) {
+ spyOn(console, 'warn');
+ spyOn(console, 'error');
+ ReactDOM.render(, testDocument);
+ expect(testDocument.body.innerHTML).toBe('Hello world');
+ expectDev(console.warn.calls.count()).toBe(1);
+ expectDev(console.warn.calls.argsFor(0)[0]).toContain(
+ 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
+ 'will stop working in React v17. Replace the ReactDOM.render() call ' +
+ 'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
+ );
+ expectDev(console.error.calls.count()).toBe(1);
+ expectDev(console.error.calls.argsFor(0)[0]).toContain(
+ 'Warning: Text content did not match.',
+ );
+ } else {
+ expect(function() {
+ // Notice the text is different!
+ ReactDOM.render(, testDocument);
+ }).toThrowError(
+ "You're trying to render a component to the document using " +
+ 'server rendering but the checksum was invalid. This usually ' +
+ 'means you rendered a different component type or props on ' +
+ 'the client from the one on the server, or your render() methods ' +
+ 'are impure. React cannot handle this case due to cross-browser ' +
+ 'quirks by rendering at the document root. You should look for ' +
+ 'environment dependent code in your components and ensure ' +
+ 'the props are the same client and server side:\n' +
+ ' (client) dy data-reactid="4">Hello worldGoodbye world