From d7ca7f6476c9da11a60f76400b8b7a8f68b95b40 Mon Sep 17 00:00:00 2001
From: Geoff Hayes <hayesgm@gmail.com>
Date: Tue, 15 Dec 2015 01:04:04 -0800
Subject: [PATCH] Have `defaultValue` reach DOM node for html input box for
 #4618

---
 .../dom/client/wrappers/ReactDOMInput.js      |  17 +-
 .../dom/client/wrappers/ReactDOMTextarea.js   |  90 +++++-----
 .../wrappers/__tests__/ReactDOMInput-test.js  |  57 ++++++-
 .../__tests__/ReactDOMTextarea-test.js        | 159 +++++++++++++-----
 .../dom/shared/HTMLDOMPropertyConfig.js       |   4 +-
 .../__tests__/ReactDOMComponent-test.js       |  19 +--
 6 files changed, 232 insertions(+), 114 deletions(-)

diff --git a/src/renderers/dom/client/wrappers/ReactDOMInput.js b/src/renderers/dom/client/wrappers/ReactDOMInput.js
index e52c199b24a15..126bad84f8b29 100644
--- a/src/renderers/dom/client/wrappers/ReactDOMInput.js
+++ b/src/renderers/dom/client/wrappers/ReactDOMInput.js
@@ -76,7 +76,7 @@ var ReactDOMInput = {
     }, props, {
       defaultChecked: undefined,
       defaultValue: undefined,
-      value: value != null ? value : inst._wrapperState.initialValue,
+      value: value != null ? value : props.defaultValue,
       checked: checked != null ? checked : inst._wrapperState.initialChecked,
       onChange: inst._wrapperState.onChange,
     });
@@ -139,10 +139,8 @@ var ReactDOMInput = {
       warnIfValueIsNull(props);
     }
 
-    var defaultValue = props.defaultValue;
     inst._wrapperState = {
       initialChecked: props.defaultChecked || false,
-      initialValue: defaultValue != null ? defaultValue : null,
       listeners: null,
       onChange: _handleChange.bind(inst),
     };
@@ -208,13 +206,16 @@ var ReactDOMInput = {
 
     var value = LinkedValueUtils.getValue(props);
     if (value != null) {
+      var node = ReactDOMComponentTree.getNodeFromInstance(inst);
+
       // Cast `value` to a string to ensure the value is set correctly. While
       // browsers typically do this as necessary, jsdom doesn't.
-      DOMPropertyOperations.setValueForProperty(
-        ReactDOMComponentTree.getNodeFromInstance(inst),
-        'value',
-        '' + value
-      );
+      var newValue = '' + value;
+
+      // To avoid side effects (such as losing text selection), only set value if changed
+      if (newValue !== node.value) {
+        node.value = newValue;
+      }
     }
   },
 };
diff --git a/src/renderers/dom/client/wrappers/ReactDOMTextarea.js b/src/renderers/dom/client/wrappers/ReactDOMTextarea.js
index ed5ac820f30b2..89e71129c5dcc 100644
--- a/src/renderers/dom/client/wrappers/ReactDOMTextarea.js
+++ b/src/renderers/dom/client/wrappers/ReactDOMTextarea.js
@@ -11,7 +11,6 @@
 
 'use strict';
 
-var DOMPropertyOperations = require('DOMPropertyOperations');
 var LinkedValueUtils = require('LinkedValueUtils');
 var ReactDOMComponentTree = require('ReactDOMComponentTree');
 var ReactUpdates = require('ReactUpdates');
@@ -66,12 +65,46 @@ var ReactDOMTextarea = {
       '`dangerouslySetInnerHTML` does not make sense on <textarea>.'
     );
 
-    // Always set children to the same thing. In IE9, the selection range will
-    // get reset if `textContent` is mutated.
+    var value = LinkedValueUtils.getValue(props);
+
+    // only bother fetching default value if we're going to use it
+    if (value == null) {
+      var defaultValue = props.defaultValue;
+      // TODO (yungsters): Remove support for children content in <textarea>.
+      var children = props.children;
+      if (children != null) {
+        if (__DEV__) {
+          warning(
+            false,
+            'Use the `defaultValue` or `value` props instead of setting ' +
+            'children on <textarea>.'
+          );
+        }
+        invariant(
+          defaultValue == null,
+          'If you supply `defaultValue` on a <textarea>, do not pass children.'
+        );
+        if (Array.isArray(children)) {
+          invariant(
+            children.length <= 1,
+            '<textarea> can only have at most one child.'
+          );
+          children = children[0];
+        }
+
+        defaultValue = '' + children;
+      }
+      if (defaultValue == null) {
+        defaultValue = '';
+      }
+    }
+
+    // The value can be a boolean or object so that's why it's
+    // forced to be a string.
     var nativeProps = assign({}, props, {
-      defaultValue: undefined,
+      defaultValue: '' + (value != null ? value : defaultValue),
       value: undefined,
-      children: inst._wrapperState.initialValue,
+      children: undefined,
       onChange: inst._wrapperState.onChange,
     });
 
@@ -110,41 +143,7 @@ var ReactDOMTextarea = {
       warnIfValueIsNull(props);
     }
 
-    var defaultValue = props.defaultValue;
-    // TODO (yungsters): Remove support for children content in <textarea>.
-    var children = props.children;
-    if (children != null) {
-      if (__DEV__) {
-        warning(
-          false,
-          'Use the `defaultValue` or `value` props instead of setting ' +
-          'children on <textarea>.'
-        );
-      }
-      invariant(
-        defaultValue == null,
-        'If you supply `defaultValue` on a <textarea>, do not pass children.'
-      );
-      if (Array.isArray(children)) {
-        invariant(
-          children.length <= 1,
-          '<textarea> can only have at most one child.'
-        );
-        children = children[0];
-      }
-
-      defaultValue = '' + children;
-    }
-    if (defaultValue == null) {
-      defaultValue = '';
-    }
-    var value = LinkedValueUtils.getValue(props);
     inst._wrapperState = {
-      // We save the initial value so that `ReactDOMComponent` doesn't update
-      // `textContent` (unnecessary since we update value).
-      // The initial value can be a boolean or object so that's why it's
-      // forced to be a string.
-      initialValue: '' + (value != null ? value : defaultValue),
       listeners: null,
       onChange: _handleChange.bind(inst),
     };
@@ -159,13 +158,16 @@ var ReactDOMTextarea = {
 
     var value = LinkedValueUtils.getValue(props);
     if (value != null) {
+      var node = ReactDOMComponentTree.getNodeFromInstance(inst);
+
       // Cast `value` to a string to ensure the value is set correctly. While
       // browsers typically do this as necessary, jsdom doesn't.
-      DOMPropertyOperations.setValueForProperty(
-        ReactDOMComponentTree.getNodeFromInstance(inst),
-        'value',
-        '' + value
-      );
+      var newValue = '' + value;
+
+      // To avoid side effects (such as losing text selection), only set value if changed
+      if (newValue !== node.value) {
+        node.value = newValue;
+      }
     }
   },
 };
diff --git a/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js b/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
index a42227bb97155..8b406015773c9 100644
--- a/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
+++ b/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
@@ -38,6 +38,7 @@ describe('ReactDOMInput', function() {
     stub = ReactTestUtils.renderIntoDocument(stub);
     var node = ReactDOM.findDOMNode(stub);
 
+    expect(node.getAttribute('value')).toBe('0');
     expect(node.value).toBe('0');
   });
 
@@ -57,6 +58,30 @@ describe('ReactDOMInput', function() {
     expect(node.value).toBe('false');
   });
 
+  it('should update `defaultValue` for uncontrolled input', function() {
+    var container = document.createElement('div');
+
+    var node = ReactDOM.render(<input type="text" defaultValue="0" />, container);
+
+    expect(node.value).toBe('0');
+
+    ReactDOM.render(<input type="text" defaultValue="1" />, container);
+
+    expect(node.value).toBe('1');
+  });
+
+  it('should take `defaultValue` when changing to uncontrolled input', function() {
+    var container = document.createElement('div');
+
+    var node = ReactDOM.render(<input type="text" value="0" readOnly="true" />, container);
+
+    expect(node.value).toBe('0');
+
+    ReactDOM.render(<input type="text" defaultValue="1" />, container);
+
+    expect(node.value).toBe('1');
+  });
+
   it('should display "foobar" for `defaultValue` of `objToString`', function() {
     var objToString = {
       toString: function() {
@@ -82,8 +107,7 @@ describe('ReactDOMInput', function() {
   it('should allow setting `value` to `true`', function() {
     var container = document.createElement('div');
     var stub = <input type="text" value="yolo" onChange={emptyFunction} />;
-    stub = ReactDOM.render(stub, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = ReactDOM.render(stub, container);
 
     expect(node.value).toBe('yolo');
 
@@ -97,8 +121,7 @@ describe('ReactDOMInput', function() {
   it('should allow setting `value` to `false`', function() {
     var container = document.createElement('div');
     var stub = <input type="text" value="yolo" onChange={emptyFunction} />;
-    stub = ReactDOM.render(stub, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = ReactDOM.render(stub, container);
 
     expect(node.value).toBe('yolo');
 
@@ -112,8 +135,7 @@ describe('ReactDOMInput', function() {
   it('should allow setting `value` to `objToString`', function() {
     var container = document.createElement('div');
     var stub = <input type="text" value="foo" onChange={emptyFunction} />;
-    stub = ReactDOM.render(stub, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = ReactDOM.render(stub, container);
 
     expect(node.value).toBe('foo');
 
@@ -129,6 +151,29 @@ describe('ReactDOMInput', function() {
     expect(node.value).toEqual('foobar');
   });
 
+  it('should not incur unnecessary DOM mutations', function() {
+    var container = document.createElement('div');
+    ReactDOM.render(<input value="a" />, container);
+
+    var node = container.firstChild;
+    var nodeValue = 'a'; // node.value always returns undefined
+    var nodeValueSetter = jest.genMockFn();
+    Object.defineProperty(node, 'value', {
+      get: function() {
+        return nodeValue;
+      },
+      set: nodeValueSetter.mockImplementation(function(newValue) {
+        nodeValue = newValue;
+      }),
+    });
+
+    ReactDOM.render(<input value="a" />, container);
+    expect(nodeValueSetter.mock.calls.length).toBe(0);
+
+    ReactDOM.render(<input value="b"/>, container);
+    expect(nodeValueSetter.mock.calls.length).toBe(1);
+  });
+
   it('should properly control a value of number `0`', function() {
     var stub = <input type="text" value={0} onChange={emptyFunction} />;
     stub = ReactTestUtils.renderIntoDocument(stub);
diff --git a/src/renderers/dom/client/wrappers/__tests__/ReactDOMTextarea-test.js b/src/renderers/dom/client/wrappers/__tests__/ReactDOMTextarea-test.js
index 6a8f4d5d898d8..9117c9330a2c5 100644
--- a/src/renderers/dom/client/wrappers/__tests__/ReactDOMTextarea-test.js
+++ b/src/renderers/dom/client/wrappers/__tests__/ReactDOMTextarea-test.js
@@ -27,43 +27,47 @@ describe('ReactDOMTextarea', function() {
     ReactLink = require('ReactLink');
     ReactTestUtils = require('ReactTestUtils');
 
-    renderTextarea = function(component, container) {
+    renderTextarea = function(component, container, skipReplace) {
       if (!container) {
         container = document.createElement('div');
       }
-      var stub = ReactDOM.render(component, container);
-      var node = ReactDOM.findDOMNode(stub);
-      // Fixing jsdom's quirky behavior -- in reality, the parser should strip
-      // off the leading newline but we need to do it by hand here.
-      node.value = node.innerHTML.replace(/^\n/, '');
-      return stub;
+      var node = ReactDOM.render(component, container);
+
+      if (!skipReplace) {
+        // Fixing jsdom's quirky behavior -- in reality, the parser should strip
+        // off the leading newline but we need to do it by hand here.
+        node.value = node.innerHTML.replace(/^\n/, '');
+      }
+      return node;
     };
   });
 
   it('should allow setting `defaultValue`', function() {
     var container = document.createElement('div');
-    var stub = renderTextarea(<textarea defaultValue="giraffe" />, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(<textarea defaultValue="giraffe" />, container, true);
 
     expect(node.value).toBe('giraffe');
 
-    // Changing `defaultValue` should do nothing.
-    stub = renderTextarea(<textarea defaultValue="gorilla" />, container);
-    expect(node.value).toEqual('giraffe');
+    // Changing `defaultValue` should change if no value set.
+    renderTextarea(<textarea defaultValue="gorilla" />, container, true);
+    expect(node.value).toEqual('gorilla');
+
+    node.value = 'cat';
+
+    renderTextarea(<textarea defaultValue="monkey" />, container, true);
+    expect(node.value).toEqual('cat');
   });
 
   it('should display `defaultValue` of number 0', function() {
     var stub = <textarea defaultValue={0} />;
-    stub = renderTextarea(stub);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub);
 
     expect(node.value).toBe('0');
   });
 
   it('should display "false" for `defaultValue` of `false`', function() {
     var stub = <textarea defaultValue={false} />;
-    stub = renderTextarea(stub);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub);
 
     expect(node.value).toBe('false');
   });
@@ -76,24 +80,21 @@ describe('ReactDOMTextarea', function() {
     };
 
     var stub = <textarea defaultValue={objToString} />;
-    stub = renderTextarea(stub);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub);
 
     expect(node.value).toBe('foobar');
   });
 
   it('should not render value as an attribute', function() {
     var stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    stub = renderTextarea(stub);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub);
 
     expect(node.getAttribute('value')).toBe(null);
   });
 
   it('should display `value` of number 0', function() {
     var stub = <textarea value={0} />;
-    stub = renderTextarea(stub);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub);
 
     expect(node.value).toBe('0');
   });
@@ -101,8 +102,7 @@ describe('ReactDOMTextarea', function() {
   it('should allow setting `value` to `giraffe`', function() {
     var container = document.createElement('div');
     var stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    stub = renderTextarea(stub, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub, container);
 
     expect(node.value).toBe('giraffe');
 
@@ -116,8 +116,7 @@ describe('ReactDOMTextarea', function() {
   it('should allow setting `value` to `true`', function() {
     var container = document.createElement('div');
     var stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    stub = renderTextarea(stub, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub, container);
 
     expect(node.value).toBe('giraffe');
 
@@ -131,8 +130,7 @@ describe('ReactDOMTextarea', function() {
   it('should allow setting `value` to `false`', function() {
     var container = document.createElement('div');
     var stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    stub = renderTextarea(stub, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub, container);
 
     expect(node.value).toBe('giraffe');
 
@@ -146,8 +144,7 @@ describe('ReactDOMTextarea', function() {
   it('should allow setting `value` to `objToString`', function() {
     var container = document.createElement('div');
     var stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    stub = renderTextarea(stub, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub, container);
 
     expect(node.value).toBe('giraffe');
 
@@ -163,10 +160,58 @@ describe('ReactDOMTextarea', function() {
     expect(node.value).toEqual('foo');
   });
 
+  it('should take updates to `defaultValue` for uncontrolled textarea', function() {
+    var container = document.createElement('div');
+
+    var node = ReactDOM.render(<textarea type="text" defaultValue="0" />, container);
+
+    expect(node.value).toBe('0');
+
+    ReactDOM.render(<textarea type="text" defaultValue="1" />, container);
+
+    expect(node.value).toBe('1');
+  });
+
+  it('should take updates to children in lieu of `defaultValue` for uncontrolled textarea', function() {
+    var container = document.createElement('div');
+
+    var node = ReactDOM.render(<textarea type="text" defaultValue="0" />, container);
+
+    expect(node.value).toBe('0');
+
+    spyOn(console, 'error'); // deprecation warning for `children` content
+
+    ReactDOM.render(<textarea type="text">1</textarea>, container);
+
+    expect(node.value).toBe('1');
+  });
+
+  it('should not incur unnecessary DOM mutations', function() {
+    var container = document.createElement('div');
+    ReactDOM.render(<textarea value="a" onChange={emptyFunction} />, container);
+
+    var node = container.firstChild;
+    var nodeValue = 'a'; // node.value always returns undefined
+    var nodeValueSetter = jest.genMockFn();
+    Object.defineProperty(node, 'value', {
+      get: function() {
+        return nodeValue;
+      },
+      set: nodeValueSetter.mockImplementation(function(newValue) {
+        nodeValue = newValue;
+      }),
+    });
+
+    ReactDOM.render(<textarea value="a" onChange={emptyFunction} />, container);
+    expect(nodeValueSetter.mock.calls.length).toBe(0);
+
+    ReactDOM.render(<textarea value="b" onChange={emptyFunction} />, container);
+    expect(nodeValueSetter.mock.calls.length).toBe(1);
+  });
+
   it('should properly control a value of number `0`', function() {
     var stub = <textarea value={0} onChange={emptyFunction} />;
-    stub = renderTextarea(stub);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub);
 
     node.value = 'giraffe';
     ReactTestUtils.Simulate.change(node);
@@ -178,27 +223,54 @@ describe('ReactDOMTextarea', function() {
 
     var container = document.createElement('div');
     var stub = <textarea>giraffe</textarea>;
-    stub = renderTextarea(stub, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub, container, true);
 
     expect(console.error.argsForCall.length).toBe(1);
     expect(node.value).toBe('giraffe');
 
-    // Changing children should do nothing, it functions like `defaultValue`.
+    // Changing children should cause value to change (new behavior of `defaultValue`)
     stub = ReactDOM.render(<textarea>gorilla</textarea>, container);
-    expect(node.value).toEqual('giraffe');
+    expect(node.value).toEqual('gorilla');
+  });
+
+  it('should not keep value when switching to uncontrolled element if not changed', function() {
+    var container = document.createElement('div');
+
+    var node = renderTextarea(<textarea value="kitten" onChange={emptyFunction} />, container, true);
+
+    expect(node.value).toBe('kitten');
+
+    ReactDOM.render(<textarea defaultValue="gorilla"></textarea>, container);
+
+    expect(node.value).toEqual('gorilla');
+  });
+
+  it('should keep value when switching to uncontrolled element if changed', function() {
+    var container = document.createElement('div');
+
+    var node = renderTextarea(<textarea value="kitten" onChange={emptyFunction} />, container, true);
+
+    expect(node.value).toBe('kitten');
+
+    ReactDOM.render(<textarea value="puppies" onChange={emptyFunction}></textarea>, container);
+
+    expect(node.value).toBe('puppies');
+
+    ReactDOM.render(<textarea defaultValue="gorilla"></textarea>, container);
+
+    expect(node.value).toEqual('puppies');
   });
 
   it('should allow numbers as children', function() {
     spyOn(console, 'error');
-    var node = ReactDOM.findDOMNode(renderTextarea(<textarea>{17}</textarea>));
+    var node = renderTextarea(<textarea>{17}</textarea>);
     expect(console.error.argsForCall.length).toBe(1);
     expect(node.value).toBe('17');
   });
 
   it('should allow booleans as children', function() {
     spyOn(console, 'error');
-    var node = ReactDOM.findDOMNode(renderTextarea(<textarea>{false}</textarea>));
+    var node = renderTextarea(<textarea>{false}</textarea>);
     expect(console.error.argsForCall.length).toBe(1);
     expect(node.value).toBe('false');
   });
@@ -210,7 +282,7 @@ describe('ReactDOMTextarea', function() {
         return 'sharkswithlasers';
       },
     };
-    var node = ReactDOM.findDOMNode(renderTextarea(<textarea>{obj}</textarea>));
+    var node = renderTextarea(<textarea>{obj}</textarea>);
     expect(console.error.argsForCall.length).toBe(1);
     expect(node.value).toBe('sharkswithlasers');
   });
@@ -228,7 +300,7 @@ describe('ReactDOMTextarea', function() {
 
     var node;
     expect(function() {
-      node = ReactDOM.findDOMNode(renderTextarea(<textarea><strong /></textarea>));
+      node = renderTextarea(<textarea><strong /></textarea>);
     }).not.toThrow();
 
     expect(node.value).toBe('[object Object]');
@@ -248,12 +320,12 @@ describe('ReactDOMTextarea', function() {
     );
 
 
-    expect(ReactDOM.findDOMNode(instance).value).toBe('yolo');
+    expect(instance.value).toBe('yolo');
     expect(link.value).toBe('yolo');
     expect(link.requestChange.mock.calls.length).toBe(0);
 
-    ReactDOM.findDOMNode(instance).value = 'test';
-    ReactTestUtils.Simulate.change(ReactDOM.findDOMNode(instance));
+    instance.value = 'test';
+    ReactTestUtils.Simulate.change(instance);
 
     expect(link.requestChange.mock.calls.length).toBe(1);
     expect(link.requestChange.mock.calls[0][0]).toEqual('test');
@@ -297,4 +369,5 @@ describe('ReactDOMTextarea', function() {
     );
     expect(console.error.argsForCall.length).toBe(1);
   });
+
 });
diff --git a/src/renderers/dom/shared/HTMLDOMPropertyConfig.js b/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
index ce5e93cea6e1a..60f87e2586238 100644
--- a/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
+++ b/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
@@ -15,7 +15,6 @@ var DOMProperty = require('DOMProperty');
 
 var MUST_USE_PROPERTY = DOMProperty.injection.MUST_USE_PROPERTY;
 var HAS_BOOLEAN_VALUE = DOMProperty.injection.HAS_BOOLEAN_VALUE;
-var HAS_SIDE_EFFECTS = DOMProperty.injection.HAS_SIDE_EFFECTS;
 var HAS_NUMERIC_VALUE = DOMProperty.injection.HAS_NUMERIC_VALUE;
 var HAS_POSITIVE_NUMERIC_VALUE =
   DOMProperty.injection.HAS_POSITIVE_NUMERIC_VALUE;
@@ -62,6 +61,7 @@ var HTMLDOMPropertyConfig = {
     data: 0, // For `<object />` acts as `src`.
     dateTime: 0,
     default: HAS_BOOLEAN_VALUE,
+    defaultValue: MUST_USE_PROPERTY,
     defer: HAS_BOOLEAN_VALUE,
     dir: 0,
     disabled: HAS_BOOLEAN_VALUE,
@@ -153,7 +153,7 @@ var HTMLDOMPropertyConfig = {
     // Setting .type throws on non-<input> tags
     type: 0,
     useMap: 0,
-    value: MUST_USE_PROPERTY | HAS_SIDE_EFFECTS,
+    value: 0,
     width: 0,
     wmode: 0,
     wrap: 0,
diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
index 2fb18a526323b..b935b511f9f7f 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
@@ -487,16 +487,13 @@ describe('ReactDOMComponent', function() {
       ReactDOM.render(<div value="" />, container);
 
       var node = container.firstChild;
-      var nodeValue = ''; // node.value always returns undefined
       var nodeValueSetter = jest.genMockFn();
-      Object.defineProperty(node, 'value', {
-        get: function() {
-          return nodeValue;
-        },
-        set: nodeValueSetter.mockImplementation(function(newValue) {
-          nodeValue = newValue;
-        }),
-      });
+
+      var oldSetAttribute = node.setAttribute.bind(node);
+      node.setAttribute = function(key, value) {
+        oldSetAttribute(key, value);
+        nodeValueSetter(key, value);
+      }
 
       ReactDOM.render(<div value="" />, container);
       expect(nodeValueSetter.mock.calls.length).toBe(0);
@@ -508,10 +505,10 @@ describe('ReactDOMComponent', function() {
       expect(nodeValueSetter.mock.calls.length).toBe(1);
 
       ReactDOM.render(<div />, container);
-      expect(nodeValueSetter.mock.calls.length).toBe(2);
+      expect(nodeValueSetter.mock.calls.length).toBe(1);
 
       ReactDOM.render(<div value={null} />, container);
-      expect(nodeValueSetter.mock.calls.length).toBe(2);
+      expect(nodeValueSetter.mock.calls.length).toBe(1);
 
       ReactDOM.render(<div value="" />, container);
       expect(nodeValueSetter.mock.calls.length).toBe(2);