Update to Jest 22

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

@@ -29,7 +29,11 @@ function initModules() {
   };
 }
 
-const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+const {
+  resetModules,
+  itRenders,
+  clientCleanRender,
+} = ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerIntegration', () => {
   beforeEach(() => {
@@ -494,7 +498,20 @@ describe('ReactDOMServerIntegration', () => {
           </svg>,
           1,
         );
-        expect(e.firstChild.getAttribute('textLength')).toBe('10');
+        // The discrepancy is expected as long as we emit a warning
+        // both on the client and the server.
+        if (render === clientCleanRender) {
+          // On the client, "textlength" is treated as a case-sensitive
+          // SVG attribute so the wrong attribute ("textlength") gets set.
+          expect(e.firstChild.getAttribute('textlength')).toBe('10');
+          expect(e.firstChild.hasAttribute('textLength')).toBe(false);
+        } else {
+          // When parsing HTML (including the hydration case), the browser
+          // correctly maps "textlength" to "textLength" SVG attribute.
+          // So it happens to work on the initial render.
+          expect(e.firstChild.getAttribute('textLength')).toBe('10');
+          expect(e.firstChild.hasAttribute('textlength')).toBe(false);
+        }
       });
 
       itRenders('no badly cased aliased SVG attribute alias', async render => {

packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js

@@ -321,6 +321,7 @@ module.exports = function(initModules) {
     itThrowsWhenRendering,
     asyncReactDOMRender,
     serverRender,
+    clientCleanRender,
     clientRenderOnServerString,
     renderIntoDom,
     streamRender,

packages/react-dom/src/client/ReactDOMFiberComponent.js

@@ -32,6 +32,7 @@ import {
 import assertValidProps from '../shared/assertValidProps';
 import {DOCUMENT_NODE, DOCUMENT_FRAGMENT_NODE} from '../shared/HTMLNodeType';
 import isCustomComponent from '../shared/isCustomComponent';
+import possibleStandardNames from '../shared/possibleStandardNames';
 import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
@@ -813,6 +814,17 @@ export function updateProperties(
   }
 }
 
+function getPossibleStandardName(propName: string): string | null {
+  if (__DEV__) {
+    const lowerCasedName = propName.toLowerCase();
+    if (!possibleStandardNames.hasOwnProperty(lowerCasedName)) {
+      return null;
+    }
+    return possibleStandardNames[lowerCasedName] || null;
+  }
+  return null;
+}
+
 export function diffHydratedProperties(
   domElement: Element,
   tag: string,
@@ -1017,6 +1029,7 @@ export function diffHydratedProperties(
           isCustomComponentTag,
         )
       ) {
+        let isMismatchDueToBadCasing = false;
         if (propertyInfo !== null) {
           // $FlowFixMe - Should be inferred as not undefined.
           extraAttributeNames.delete(propertyInfo.attributeName);
@@ -1035,6 +1048,17 @@ export function diffHydratedProperties(
             // $FlowFixMe - Should be inferred as not undefined.
             extraAttributeNames.delete(propKey.toLowerCase());
           } else {
+            const standardName = getPossibleStandardName(propKey);
+            if (standardName !== null && standardName !== propKey) {
+              // If an SVG prop is supplied with bad casing, it will
+              // be successfully parsed from HTML, but will produce a mismatch
+              // (and would be incorrectly rendered on the client).
+              // However, we already warn about bad casing elsewhere.
+              // So we'll skip the misleading extra mismatch warning in this case.
+              isMismatchDueToBadCasing = true;
+              // $FlowFixMe - Should be inferred as not undefined.
+              extraAttributeNames.delete(standardName);
+            }
             // $FlowFixMe - Should be inferred as not undefined.
             extraAttributeNames.delete(propKey);
           }
@@ -1045,7 +1069,7 @@ export function diffHydratedProperties(
           );
         }
 
-        if (nextProp !== serverValue) {
+        if (nextProp !== serverValue && !isMismatchDueToBadCasing) {
           warnForPropDifference(propKey, serverValue, nextProp);
         }
       }