Merge pull request #4324 from drd/improve-warning-in-react-mount

Improve warning in react mount

Author: jimfb

src/renderers/dom/client/ReactMount.js

@@ -880,9 +880,29 @@ var ReactMount = {
           checksum
         );
 
-        var diffIndex = firstDifferenceIndex(markup, rootMarkup);
+        var normalizedMarkup = markup;
+        if (__DEV__) {
+          // because rootMarkup is retrieved from the DOM, various normalizations
+          // will have occurred which will not be present in `markup`. Here,
+          // insert markup into a <div> or <iframe> depending on the container
+          // type to perform the same normalizations before comparing.
+          var normalizer;
+          if (container.nodeType === ELEMENT_NODE_TYPE) {
+            normalizer = document.createElement('div');
+            normalizer.innerHTML = markup;
+            normalizedMarkup = normalizer.innerHTML;
+          } else {
+            normalizer = document.createElement('iframe');
+            document.body.appendChild(normalizer);
+            normalizer.contentDocument.write(markup);
+            normalizedMarkup = normalizer.contentDocument.documentElement.outerHTML;
+            document.body.removeChild(normalizer);
+          }
+        }
+
+        var diffIndex = firstDifferenceIndex(normalizedMarkup, rootMarkup);
         var difference = ' (client) ' +
-          markup.substring(diffIndex - 20, diffIndex + 20) +
+          normalizedMarkup.substring(diffIndex - 20, diffIndex + 20) +
           '\n (server) ' + rootMarkup.substring(diffIndex - 20, diffIndex + 20);
 
         invariant(

src/renderers/dom/client/__tests__/ReactMount-test.js

@@ -156,6 +156,24 @@ describe('ReactMount', function() {
     );
   });
 
+  it('should account for escaping on a checksum mismatch', function () {
+    var div = document.createElement('div');
+    var markup = React.renderToString(
+      <div>This markup contains an nbsp entity: &nbsp; server text</div>);
+    div.innerHTML = markup;
+
+    spyOn(console, 'error');
+    React.render(
+      <div>This markup contains an nbsp entity: &nbsp; client text</div>,
+      div
+    );
+    expect(console.error.calls.length).toBe(1);
+    expect(console.error.calls[0].args[0]).toContain(
+      ' (client) nbsp entity: &nbsp; client text</div>\n' +
+      ' (server) nbsp entity: &nbsp; server text</div>'
+    );
+  });
+
   if (WebComponents !== undefined) {
     it('should allow mounting/unmounting to document fragment container',
         function() {