Update to Jest 22

package.json

@@ -11,7 +11,7 @@
     "babel-code-frame": "^6.26.0",
     "babel-core": "^6.0.0",
     "babel-eslint": "^7.1.0",
-    "babel-jest": "^21.3.0-beta.4",
+    "babel-jest": "^22.0.4",
     "babel-plugin-check-es2015-constants": "^6.5.0",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-syntax-trailing-function-commas": "^6.5.0",
@@ -67,10 +67,7 @@
     "gzip-js": "~0.3.2",
     "gzip-size": "^3.0.0",
     "jasmine-check": "^1.0.0-rc.0",
-    "jest": "^21.3.0-beta.4",
-    "jest-config": "^21.3.0-beta.4",
-    "jest-jasmine2": "^21.3.0-beta.4",
-    "jest-runtime": "^21.3.0-beta.4",
+    "jest": "^22.0.4",
     "merge-stream": "^1.0.0",
     "minimatch": "^3.0.4",
     "minimist": "^1.2.0",

packages/react-art/src/__tests__/ReactART-test.js

@@ -54,7 +54,12 @@ function testDOMNodeStructure(domNode, expectedStructure) {
 }
 
 describe('ReactART', () => {
+  let container;
+
   beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
     ARTCurrentMode.setCurrent(ARTSVGMode);
 
     Group = ReactART.Group;
@@ -104,6 +109,11 @@ describe('ReactART', () => {
     };
   });
 
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
   it('should have the correct lifecycle state', () => {
     let instance = <TestComponent />;
     instance = ReactTestUtils.renderIntoDocument(instance);
@@ -142,7 +152,6 @@ describe('ReactART', () => {
   });
 
   it('should be able to reorder components', () => {
-    const container = document.createElement('div');
     const instance = ReactDOM.render(
       <TestComponent flipped={false} />,
       container,
@@ -189,8 +198,6 @@ describe('ReactART', () => {
   });
 
   it('should be able to reorder many components', () => {
-    const container = document.createElement('div');
-
     class Component extends React.Component {
       render() {
         const chars = this.props.chars.split('');
@@ -296,17 +303,13 @@ describe('ReactART', () => {
         );
       }
     }
-
-    const container = document.createElement('div');
     ReactDOM.render(<Outer />, container);
     expect(ref).not.toBeDefined();
     ReactDOM.render(<Outer mountCustomShape={true} />, container);
     expect(ref.constructor).toBe(CustomShape);
   });
 
   it('adds and updates event handlers', () => {
-    const container = document.createElement('div');
-
     function render(onClick) {
       return ReactDOM.render(
         <Surface>
@@ -319,8 +322,11 @@ describe('ReactART', () => {
     function doClick(instance) {
       const path = ReactDOM.findDOMNode(instance).querySelector('path');
 
-      // ReactTestUtils.Simulate.click doesn't work with SVG elements
-      path.click();
+      path.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+        }),
+      );
     }
 
     const onClick1 = jest.fn();

packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap

@@ -3,7 +3,7 @@
 exports[`ReactARTComponents should generate a <Shape> with props for drawing the Circle 1`] = `
 <Shape
   d={
-     {
+    Object {
       "_pivotX": 0,
       "_pivotY": -10,
       "path": Array [
@@ -28,7 +28,7 @@ exports[`ReactARTComponents should generate a <Shape> with props for drawing the
 exports[`ReactARTComponents should generate a <Shape> with props for drawing the Rectangle 1`] = `
 <Shape
   d={
-     {
+    Object {
       "_pivotX": 0,
       "_pivotY": 0,
       "path": Array [
@@ -54,7 +54,7 @@ exports[`ReactARTComponents should generate a <Shape> with props for drawing the
 exports[`ReactARTComponents should generate a <Shape> with props for drawing the Wedge 1`] = `
 <Shape
   d={
-     {
+    Object {
       "_pivotX": 0,
       "_pivotY": 50,
       "path": Array [

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

@@ -34,7 +34,10 @@ describe('DOMPropertyOperations', () => {
     });
 
     it('should set values as namespace attributes if necessary', () => {
-      const container = document.createElement('svg');
+      const container = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'svg',
+      );
       ReactDOM.render(<image xlinkHref="about:blank" />, container);
       expect(
         container.firstChild.getAttributeNS(
@@ -113,22 +116,6 @@ describe('DOMPropertyOperations', () => {
       ReactDOM.render(<div hidden={false} />, container);
       expect(container.firstChild.hasAttribute('hidden')).toBe(false);
     });
-  });
-
-  describe('value mutation method', function() {
-    it('should update an empty attribute to zero', function() {
-      const container = document.createElement('div');
-      ReactDOM.render(
-        <input type="radio" value="" onChange={function() {}} />,
-        container,
-      );
-      spyOnDevAndProd(container.firstChild, 'setAttribute');
-      ReactDOM.render(
-        <input type="radio" value={0} onChange={function() {}} />,
-        container,
-      );
-      expect(container.firstChild.setAttribute.calls.count()).toBe(1);
-    });
 
     it('should always assign the value attribute for non-inputs', function() {
       const container = document.createElement('div');

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

@@ -261,6 +261,34 @@ describe('ReactDOMInput', () => {
     expect(node.value).toEqual('0');
   });
 
+  it('updates the value on radio buttons from "" to 0', function() {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <input type="radio" value="" onChange={function() {}} />,
+      container,
+    );
+    ReactDOM.render(
+      <input type="radio" value={0} onChange={function() {}} />,
+      container,
+    );
+    expect(container.firstChild.value).toBe('0');
+    expect(container.firstChild.getAttribute('value')).toBe('0');
+  });
+
+  it('updates the value on checkboxes from "" to 0', function() {
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <input type="checkbox" value="" onChange={function() {}} />,
+      container,
+    );
+    ReactDOM.render(
+      <input type="checkbox" value={0} onChange={function() {}} />,
+      container,
+    );
+    expect(container.firstChild.value).toBe('0');
+    expect(container.firstChild.getAttribute('value')).toBe('0');
+  });
+
   it('distinguishes precision for extra zeroes in string number values', () => {
     class Stub extends React.Component {
       state = {

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(() => {
@@ -488,21 +492,49 @@ describe('ReactDOMServerIntegration', () => {
       );
 
       itRenders('badly cased SVG attribute with a warning', async render => {
-        const e = await render(<text textlength="10" />, 1);
-        expect(e.getAttribute('textLength')).toBe('10');
+        const e = await render(
+          <svg>
+            <text textlength="10" />
+          </svg>,
+          1,
+        );
+        // 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 => {
-        const e = await render(<text strokedasharray="10 10" />, 1);
-        expect(e.hasAttribute('stroke-dasharray')).toBe(false);
-        expect(e.getAttribute('strokedasharray')).toBe('10 10');
+        const e = await render(
+          <svg>
+            <text strokedasharray="10 10" />
+          </svg>,
+          1,
+        );
+        expect(e.firstChild.hasAttribute('stroke-dasharray')).toBe(false);
+        expect(e.firstChild.getAttribute('strokedasharray')).toBe('10 10');
       });
 
       itRenders(
         'no badly cased original SVG attribute that is aliased',
         async render => {
-          const e = await render(<text stroke-dasharray="10 10" />, 1);
-          expect(e.getAttribute('stroke-dasharray')).toBe('10 10');
+          const e = await render(
+            <svg>
+              <text stroke-dasharray="10 10" />
+            </svg>,
+            1,
+          );
+          expect(e.firstChild.getAttribute('stroke-dasharray')).toBe('10 10');
         },
       );
     });
@@ -558,6 +590,16 @@ describe('ReactDOMServerIntegration', () => {
       );
 
       itRenders('custom attributes for non-standard elements', async render => {
+        // This test suite generally assumes that we get exactly
+        // the same warnings (or none) for all scenarios including
+        // SSR + innerHTML, hydration, and client-side rendering.
+        // However this particular warning fires only when creating
+        // DOM nodes on the client side. We force it to fire early
+        // so that it gets deduplicated later, and doesn't fail the test.
+        expect(() => {
+          ReactDOM.render(<nonstandard />, document.createElement('div'));
+        }).toWarnDev('The tag <nonstandard> is unrecognized in this browser.');
+
         const e = await render(<nonstandard foo="bar" />);
         expect(e.getAttribute('foo')).toBe('bar');
       });

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

@@ -134,6 +134,16 @@ describe('ReactDOMServerIntegration', () => {
       });
 
       itRenders('a non-standard element with text', async render => {
+        // This test suite generally assumes that we get exactly
+        // the same warnings (or none) for all scenarios including
+        // SSR + innerHTML, hydration, and client-side rendering.
+        // However this particular warning fires only when creating
+        // DOM nodes on the client side. We force it to fire early
+        // so that it gets deduplicated later, and doesn't fail the test.
+        expect(() => {
+          ReactDOM.render(<nonstandard />, document.createElement('div'));
+        }).toWarnDev('The tag <nonstandard> is unrecognized in this browser.');
+
         const e = await render(<nonstandard>Text</nonstandard>);
         expect(e.tagName).toBe('NONSTANDARD');
         expect(e.childNodes.length).toBe(1);

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/__tests__/validateDOMNesting-test.js

@@ -17,7 +17,12 @@ function expectWarnings(tags, warnings = []) {
   warnings = [...warnings];
 
   let element = null;
-  const container = document.createElement(tags.splice(0, 1));
+  const containerTag = tags.shift();
+  const container =
+    containerTag === 'svg'
+      ? document.createElementNS('http://www.w3.org/2000/svg', containerTag)
+      : document.createElement(containerTag);
+
   while (tags.length) {
     const Tag = tags.pop();
     element = <Tag>{element}</Tag>;
@@ -108,7 +113,6 @@ describe('validateDOMNesting', () => {
         'validateDOMNesting(...): <body> cannot appear as a child of <foreignObject>.\n' +
           '    in body (at **)\n' +
           '    in foreignObject (at **)',
-        '<foreignObject /> is using uppercase HTML',
       ],
     );
   });

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);
         }
       }

packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.js

@@ -379,10 +379,10 @@ describe('ChangeEventPlugin', () => {
       container,
     );
 
-    setUntrackedValue.call(input, 'foo');
+    setUntrackedValue.call(input, 10);
     input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
 
-    setUntrackedValue.call(input, 'bar');
+    setUntrackedValue.call(input, 20);
     input.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));
 
     expect(called).toBe(2);