Handle escaping when comparing server/client markup

src/renderers/dom/client/ReactMount.js

@@ -880,9 +880,13 @@ var ReactMount = {
           checksum
         );
 
-        var diffIndex = firstDifferenceIndex(markup, rootMarkup);
+        var normalizer = document.createElement('div');
+        normalizer.innerHTML = markup;
+        var normalizedMarkup = normalizer.innerHTML;
+
+        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

@@ -16,6 +16,7 @@ var mocks = require('mocks');
 describe('ReactMount', function() {
   var React = require('React');
   var ReactMount = require('ReactMount');
+  var ReactMarkupChecksum = require('ReactMarkupChecksum');
   var ReactTestUtils = require('ReactTestUtils');
   var WebComponents = WebComponents;
 
@@ -156,6 +157,22 @@ 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 html entity: &amp; server text</div>);
+    div.innerHTML = markup;
+
+    spyOn(console, 'error');
+    React.render(
+      <div>This markup contains an html entity: &amp; client text</div>, div);
+    expect(console.error.calls.length).toBe(1);
+    expect(console.error.calls[0].args[0]).toContain(
+      ' (client)  html entity: &amp; client text</div>\n' +
+      ' (server)  html entity: &amp; server text</div>'
+    )
+  });
+
   if (WebComponents !== undefined) {
     it('should allow mounting/unmounting to document fragment container',
         function() {