Warn when accessing .props, .setProps on DOM components

Author: sophiebits

src/isomorphic/children/__tests__/sliceChildren-test.js

@@ -15,45 +15,16 @@ describe('sliceChildren', function() {
 
   var React;
   var ReactFragment;
-  var ReactTestUtils;
 
   var sliceChildren;
-  var reactComponentExpect;
-
-  var Partial;
 
   beforeEach(function() {
     React = require('React');
     ReactFragment = require('ReactFragment');
-    ReactTestUtils = require('ReactTestUtils');
 
     sliceChildren = require('sliceChildren');
-    reactComponentExpect = require('reactComponentExpect');
-
-    Partial = React.createClass({
-      render: function() {
-        return (
-          <div>
-            {sliceChildren(
-              this.props.children,
-              this.props.start,
-              this.props.end
-            )}
-          </div>
-        );
-      },
-    });
   });
 
-  function renderAndSlice(set, start, end) {
-    var instance = <Partial start={start} end={end}>{set}</Partial>;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    var rendered = reactComponentExpect(instance)
-      .expectRenderedChild()
-      .instance();
-    return rendered.props.children;
-  }
-
   function testKeyValuePairs(children, expectedPairs) {
     var obj = ReactFragment.extract(children);
     expect(obj).toEqual(expectedPairs);
@@ -65,7 +36,7 @@ describe('sliceChildren', function() {
       <div key="B" />,
       <div key="C" />,
     ];
-    var children = renderAndSlice(fullSet, 0);
+    var children = sliceChildren(fullSet, 0);
     testKeyValuePairs(children, {
       '.$A': fullSet[0],
       '.$B': fullSet[1],
@@ -79,7 +50,7 @@ describe('sliceChildren', function() {
       <div key="B" />,
       <div key="C" />,
     ];
-    var children = renderAndSlice(fullSet, 1);
+    var children = sliceChildren(fullSet, 1);
     testKeyValuePairs(children, {
       '.$B': fullSet[1],
       '.$C': fullSet[2],
@@ -93,7 +64,7 @@ describe('sliceChildren', function() {
       <div key="C" />,
       <div key="D" />,
     ];
-    var children = renderAndSlice(fullSet, 1, 2);
+    var children = sliceChildren(fullSet, 1, 2);
     testKeyValuePairs(children, {
       '.$B': fullSet[1],
     });
@@ -104,13 +75,9 @@ describe('sliceChildren', function() {
     var b = <div />;
     var c = <div />;
 
-    var instance = <Partial start={1} end={2}>{a}{b}{c}</Partial>;
-    instance = ReactTestUtils.renderIntoDocument(instance);
-    var rendered = reactComponentExpect(instance)
-      .expectRenderedChild()
-      .instance();
-
-    testKeyValuePairs(rendered.props.children, {
+    var el = <div>{a}{b}{c}</div>;
+    var children = sliceChildren(el.props.children, 1, 2);
+    testKeyValuePairs(children, {
       '.1': b,
     });
   });

src/renderers/dom/client/__tests__/ReactDOM-test.js

@@ -79,32 +79,32 @@ describe('ReactDOM', function() {
       </div>
     );
     // Warm the cache with theDog
-    myDiv.setProps({
-      children: [
+    myDiv = ReactTestUtils.renderIntoDocument(
+      <div>
         <div key="theDog" className="dogbeforedelete" />,
         <div key="theBird" className="bird" />,
-      ],
-    });
+      </div>
+    );
     // Remove theDog - this should purge the cache
-    myDiv.setProps({
-      children: [
+    myDiv = ReactTestUtils.renderIntoDocument(
+      <div>
         <div key="theBird" className="bird" />,
-      ],
-    });
+      </div>
+    );
     // Now, put theDog back. It's now a different DOM node.
-    myDiv.setProps({
-      children: [
+    myDiv = ReactTestUtils.renderIntoDocument(
+      <div>
         <div key="theDog" className="dog" />,
         <div key="theBird" className="bird" />,
-      ],
-    });
+      </div>
+    );
     // Change the className of theDog. It will use the same element
-    myDiv.setProps({
-      children: [
+    myDiv = ReactTestUtils.renderIntoDocument(
+      <div>
         <div key="theDog" className="bigdog" />,
         <div key="theBird" className="bird" />,
-      ],
-    });
+      </div>
+    );
     var root = React.findDOMNode(myDiv);
     var dog = root.childNodes[0];
     expect(dog.className).toBe('bigdog');

src/renderers/dom/client/wrappers/__tests__/ReactDOMButton-test.js

@@ -53,27 +53,41 @@ describe('ReactDOMButton', function() {
   });
 
   it('should forward clicks when it becomes not disabled', function() {
-    var btn = mounted(<button disabled={true} onClick={onClick} />);
-    btn.setProps({disabled: false});
+    var container = document.createElement('div');
+    var btn = React.render(
+      <button disabled={true} onClick={onClick} />,
+      container
+    );
+    btn = React.render(
+      <button onClick={onClick} />,
+      container
+    );
     expectClickThru(btn);
   });
 
   it('should not forward clicks when it becomes disabled', function() {
-    var btn = mounted(<button onClick={onClick} />);
-    btn.setProps({disabled: true});
+    var container = document.createElement('div');
+    var btn = React.render(
+      <button onClick={onClick} />,
+      container
+    );
+    btn = React.render(
+      <button disabled={true} onClick={onClick} />,
+      container
+    );
     expectNoClickThru(btn);
   });
 
   it('should work correctly if the listener is changed', function() {
-    var btn = mounted(
-      <button disabled={true} onClick={function() {}} />
+    var container = document.createElement('div');
+    var btn = React.render(
+      <button disabled={true} onClick={function() {}} />,
+      container
+    );
+    btn = React.render(
+      <button disabled={false} onClick={onClick} />,
+      container
     );
-
-    btn.setProps({
-      disabled: false,
-      onClick: onClick,
-    });
-
     expectClickThru(btn);
   });
 });

src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js

@@ -75,30 +75,39 @@ 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 = ReactTestUtils.renderIntoDocument(stub);
+    stub = React.render(stub, container);
     var node = React.findDOMNode(stub);
 
     expect(node.value).toBe('yolo');
 
-    stub.replaceProps({value: true, onChange: emptyFunction});
+    stub = React.render(
+      <input type="text" value={true} onChange={emptyFunction} />,
+      container
+    );
     expect(node.value).toEqual('true');
   });
 
   it('should allow setting `value` to `false`', function() {
+    var container = document.createElement('div');
     var stub = <input type="text" value="yolo" onChange={emptyFunction} />;
-    stub = ReactTestUtils.renderIntoDocument(stub);
+    stub = React.render(stub, container);
     var node = React.findDOMNode(stub);
 
     expect(node.value).toBe('yolo');
 
-    stub.replaceProps({value: false});
+    stub = React.render(
+      <input type="text" value={false} onChange={emptyFunction} />,
+      container
+    );
     expect(node.value).toEqual('false');
   });
 
   it('should allow setting `value` to `objToString`', function() {
+    var container = document.createElement('div');
     var stub = <input type="text" value="foo" onChange={emptyFunction} />;
-    stub = ReactTestUtils.renderIntoDocument(stub);
+    stub = React.render(stub, container);
     var node = React.findDOMNode(stub);
 
     expect(node.value).toBe('foo');
@@ -108,8 +117,10 @@ describe('ReactDOMInput', function() {
         return 'foobar';
       },
     };
-
-    stub.replaceProps({value: objToString, onChange: emptyFunction});
+    stub = React.render(
+      <input type="text" value={objToString} onChange={emptyFunction} />,
+      container
+    );
     expect(node.value).toEqual('foobar');
   });