ReactFiberHydrationWarning in react-reconciler: fix special characters

printQuotedStringValue should have been used instead of naive
quoted string printing.

Author: sompylasar

packages/react-dom/src/__tests__/ReactMount-test.js

@@ -1065,7 +1065,7 @@ describe('ReactMount', () => {
       // TODO: Currently, the special characters in the JSX string output are not escaped, the output looks invalid.
       'Warning: Expected server HTML to contain a matching <span> in <div>.\n\n' +
         '  <div data-reactroot="">\n' +
-        "-   {'SSRMismatchTest special characters: '\"\t\n'}\n" +
+        "-   {'SSRMismatchTest special characters: \\'\"\\t\\n'}\n" +
         '+   <span />\n' +
         '  </div>\n\n' +
         '    in span (at **)\n' +
@@ -1095,7 +1095,7 @@ describe('ReactMount', () => {
       'Warning: Expected server HTML to contain a matching <span> in <div>.\n\n' +
         `  <div data-ssr-mismatch-attribute-with-special-characters={'"'} data-reactroot="">\n` +
         '-   <div>SSRMismatchTest text</div>\n' +
-        "+   <span>{' — <div>'}</span>\n" +
+        "+   <span>{'\\xa0\\u2014 <div>'}</span>\n" +
         '  </div>\n\n' +
         '    in span (at **)\n' +
         '    in div (at **)',

packages/react-reconciler/src/ReactFiberHydrationWarning.js

@@ -92,17 +92,54 @@ function clipStringWithEllipsis(str: string, clipAtLength: number): string {
   );
 }
 
+function escapeNonPrintableCharacters(str: string, quote: "'" | '"'): string {
+  return str.replace(/[\s\S]/g, character => {
+    switch (character) {
+      case quote:
+        return '\\' + character;
+      case '\n':
+        return '\\n';
+      case '\t':
+        return '\\t';
+      default: {
+        const charCode = character.charCodeAt(0);
+        // Do not escape if the character is within the ASCII printable range:
+        if (charCode >= 0x20 && charCode <= 0x7e) {
+          return character;
+        }
+        const charCodeHex = charCode.toString(16);
+        const longhand = charCodeHex.length > 2;
+        return (
+          '\\' +
+          (longhand ? 'u' : 'x') +
+          ('0000' + charCodeHex).slice(longhand ? -4 : -2)
+        );
+      }
+    }
+  });
+}
+
+function printQuotedStringValue(str: string, quote: "'" | '"'): string {
+  return (
+    quote +
+    escapeNonPrintableCharacters(
+      clipStringWithEllipsis(str, PRINT_MAX_STRING_LENGTH),
+      quote,
+    ) +
+    quote
+  );
+}
+
 function printValue(value: mixed): string {
   try {
     if (value === null) {
       return 'null';
     } else if (value === undefined) {
       return 'undefined';
     } else if (typeof value === 'string') {
-      return "'" + clipStringWithEllipsis(value, PRINT_MAX_STRING_LENGTH) + "'";
+      return printQuotedStringValue(value, "'");
     } else if (Array.isArray(value)) {
       let ret = '[';
-
       const ic = value.length;
       for (let i = 0; i < ic; ++i) {
         ret += i > 0 ? ', ' : '';
@@ -145,44 +182,6 @@ function printValue(value: mixed): string {
   }
 }
 
-function escapeNonPrintableCharacters(str: string, quote: "'" | '"'): string {
-  return str.replace(/[\s\S]/g, character => {
-    switch (character) {
-      case quote:
-        return '\\' + character;
-      case '\n':
-        return '\\n';
-      case '\t':
-        return '\\t';
-      default: {
-        const charCode = character.charCodeAt(0);
-        // Do not escape if the character is within the ASCII printable range:
-        if (charCode >= 0x20 && charCode <= 0x7e) {
-          return character;
-        }
-        const charCodeHex = charCode.toString(16);
-        const longhand = charCodeHex.length > 2;
-        return (
-          '\\' +
-          (longhand ? 'u' : 'x') +
-          ('0000' + charCodeHex).slice(longhand ? -4 : -2)
-        );
-      }
-    }
-  });
-}
-
-function printQuotedStringValue(str: string, quote: "'" | '"'): string {
-  return (
-    quote +
-    escapeNonPrintableCharacters(
-      clipStringWithEllipsis(str, PRINT_MAX_STRING_LENGTH),
-      quote,
-    ) +
-    quote
-  );
-}
-
 function printCurlyValue(value: mixed): string {
   return '{' + printValue(value) + '}';
 }