Improve validateDOMNesting message for whitespace

For #5071.

Author: sophiebits

src/renderers/dom/client/validateDOMNesting.js

@@ -322,11 +322,24 @@ if (__DEV__) {
 
   var didWarn = {};
 
-  validateDOMNesting = function(childTag, childInstance, ancestorInfo) {
+  validateDOMNesting = function(
+    childTag,
+    childText,
+    childInstance,
+    ancestorInfo
+  ) {
     ancestorInfo = ancestorInfo || emptyAncestorInfo;
     var parentInfo = ancestorInfo.current;
     var parentTag = parentInfo && parentInfo.tag;
 
+    if (childText != null) {
+      warning(
+        childTag == null,
+        'validateDOMNesting: when childText is passed, childTag should be null'
+      );
+      childTag = '#text';
+    }
+
     var invalidParent =
       isTagValidWithParent(childTag, parentTag) ? null : parentInfo;
     var invalidAncestor =
@@ -385,7 +398,17 @@ if (__DEV__) {
       didWarn[warnKey] = true;
 
       var tagDisplayName = childTag;
-      if (childTag !== '#text') {
+      var whitespaceInfo = '';
+      if (childTag === '#text') {
+        if (/\S/.test(childText)) {
+          tagDisplayName = 'Text nodes';
+        } else {
+          tagDisplayName = 'Whitespace text nodes';
+          whitespaceInfo =
+            ' Make sure you don\'t have any extra whitespace between tags on ' +
+            'each line of your source code.';
+        }
+      } else {
         tagDisplayName = '<' + childTag + '>';
       }
 
@@ -398,10 +421,11 @@ if (__DEV__) {
         }
         warning(
           false,
-          'validateDOMNesting(...): %s cannot appear as a child of <%s>. ' +
+          'validateDOMNesting(...): %s cannot appear as a child of <%s>.%s ' +
           'See %s.%s',
           tagDisplayName,
           ancestorTag,
+          whitespaceInfo,
           ownerInfo,
           info
         );

src/renderers/dom/shared/ReactDOMComponent.js

@@ -270,6 +270,7 @@ if (__DEV__) {
       return;
     }
 
+    validateDOMNesting(null, String(content), this, this._ancestorInfo);
     this._contentDebugID = contentDebugID;
     if (hasExistingContent) {
       ReactInstrumentation.debugTool.onBeforeUpdateComponent(contentDebugID, content);
@@ -605,7 +606,7 @@ ReactDOMComponent.Mixin = {
       if (parentInfo) {
         // parentInfo should always be present except for the top-level
         // component when server rendering
-        validateDOMNesting(this._tag, this, parentInfo);
+        validateDOMNesting(this._tag, null, this, parentInfo);
       }
       this._ancestorInfo =
         validateDOMNesting.updatedAncestorInfo(parentInfo, this._tag, this);

src/renderers/dom/shared/ReactDOMTextComponent.js

@@ -75,7 +75,7 @@ Object.assign(ReactDOMTextComponent.prototype, {
       if (parentInfo) {
         // parentInfo should always be present except for the top-level
         // component when server rendering
-        validateDOMNesting('#text', this, parentInfo);
+        validateDOMNesting(null, this._stringText, this, parentInfo);
       }
     }
 

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js

@@ -736,7 +736,7 @@ describe('ReactDOMComponent', function() {
     });
 
     it('should work error event on <source> element', function() {
-      spyOn(console, 'error');  
+      spyOn(console, 'error');
       var container = document.createElement('div');
       ReactDOM.render(
         <video>
@@ -1225,7 +1225,7 @@ describe('ReactDOMComponent', function() {
 
       class Row extends React.Component {
         render() {
-          return <tr />;
+          return <tr>x</tr>;
         }
       }
 
@@ -1237,15 +1237,21 @@ describe('ReactDOMComponent', function() {
 
       ReactTestUtils.renderIntoDocument(<Foo />);
 
-      expect(console.error.calls.count()).toBe(2);
+      expect(console.error.calls.count()).toBe(3);
       expect(console.error.calls.argsFor(0)[0]).toBe(
         'Warning: validateDOMNesting(...): <tr> cannot appear as a child of ' +
         '<table>. See Foo > table > Row > tr. Add a <tbody> to your code to ' +
         'match the DOM tree generated by the browser.'
       );
       expect(console.error.calls.argsFor(1)[0]).toBe(
-        'Warning: validateDOMNesting(...): #text cannot appear as a child ' +
-        'of <table>. See Foo > table > #text.'
+        'Warning: validateDOMNesting(...): Text nodes cannot appear as a ' +
+        'child of <tr>. See Row > tr > #text.'
+      );
+      expect(console.error.calls.argsFor(2)[0]).toBe(
+        'Warning: validateDOMNesting(...): Whitespace text nodes cannot ' +
+        'appear as a child of <table>. Make sure you don\'t have any extra ' +
+        'whitespace between tags on each line of your source code. See Foo > ' +
+        'table > #text.'
       );
     });