Disallow passing a DOM component to findAllInRenderedTree

We won't be able to support this after DOM-components-as-refs but we don't expect many people to be passing DOM components to this function anyway, and it should be fairly straightforward for people to clean up failing unit tests using this function.
facebook · Jun 16, 2015 · 4070c4c · 4070c4c
1 parent c9b0c26
commit 4070c4c
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 27 deletions.
diff --git a/src/renderers/shared/reconciler/__tests__/ReactMockedComponent-test.js b/src/renderers/shared/reconciler/__tests__/ReactMockedComponent-test.js
@@ -73,23 +73,20 @@ describe('ReactMockedComponent', function() {
       },
 
       render: function() {
-        return <AutoMockedComponent prop={this.state.foo} />;
+        return <div><AutoMockedComponent prop={this.state.foo} /></div>;
       },
 
     });
+
     var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
-    instance.update();
-  });
 
-  it('should find an implicitly mocked component in the tree', function() {
-    var instance = ReactTestUtils.renderIntoDocument(
-      <div><span><AutoMockedComponent prop="1" /></span></div>
-    );
     var found = ReactTestUtils.findRenderedComponentWithType(
       instance,
       AutoMockedComponent
     );
     expect(typeof found).toBe('object');
+
+    instance.update();
   });
 
   it('has custom methods on the implicitly mocked component', () => {
@@ -113,23 +110,19 @@ describe('ReactMockedComponent', function() {
       },
 
       render: function() {
-        return <MockedComponent prop={this.state.foo} />;
+        return <div><MockedComponent prop={this.state.foo} /></div>;
       },
 
     });
     var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
-    instance.update();
-  });
 
-  it('should find an explicitly mocked component in the tree', function() {
-    var instance = ReactTestUtils.renderIntoDocument(
-      <div><span><MockedComponent prop="1" /></span></div>
-    );
     var found = ReactTestUtils.findRenderedComponentWithType(
       instance,
       MockedComponent
     );
     expect(typeof found).toBe('object');
+
+    instance.update();
   });
 
   it('has custom methods on the explicitly mocked component', () => {

diff --git a/src/test/ReactTestUtils.js b/src/test/ReactTestUtils.js
@@ -28,6 +28,7 @@ var SyntheticEvent = require('SyntheticEvent');
 var assign = require('Object.assign');
 var emptyObject = require('emptyObject');
 var findDOMNode = require('findDOMNode');
+var invariant = require('invariant');
 
 var topLevelTypes = EventConstants.topLevelTypes;
 
@@ -159,6 +160,10 @@ var ReactTestUtils = {
     if (!inst) {
       return [];
     }
+    invariant(
+      ReactTestUtils.isCompositeComponent(inst),
+      'findAllInRenderedTree(...): instance must be a composite component'
+    );
     return findAllInRenderedTreeInternal(ReactInstanceMap.get(inst), test);
   },
 

diff --git a/src/test/__tests__/ReactTestUtils-test.js b/src/test/__tests__/ReactTestUtils-test.js
@@ -177,20 +177,28 @@ describe('ReactTestUtils', function() {
     expect(result).toEqual(<div>foo</div>);
   });
 
-  it('Test scryRenderedDOMComponentsWithClass with TextComponent', function() {
-    var renderedComponent = ReactTestUtils.renderIntoDocument(<div>Hello <span>Jim</span></div>);
+  it('can scryRenderedDOMComponentsWithClass with TextComponent', function() {
+    var Wrapper = React.createClass({
+      render: function() {
+        return <div>Hello <span>Jim</span></div>;
+      },
+    });
+    var renderedComponent = ReactTestUtils.renderIntoDocument(<Wrapper />);
     var scryResults = ReactTestUtils.scryRenderedDOMComponentsWithClass(
       renderedComponent,
-      'NonExistantClass'
+      'NonExistentClass'
     );
     expect(scryResults.length).toBe(0);
 
   });
 
-  it('Test scryRenderedDOMComponentsWithClass with className contains \\n', function() {
-    var renderedComponent = ReactTestUtils.renderIntoDocument(
-      <div>Hello <span className={'x\ny'}>Jim</span></div>
-    );
+  it('can scryRenderedDOMComponentsWithClass with className contains \\n', function() {
+    var Wrapper = React.createClass({
+      render: function() {
+        return <div>Hello <span className={'x\ny'}>Jim</span></div>;
+      },
+    });
+    var renderedComponent = ReactTestUtils.renderIntoDocument(<Wrapper />);
     var scryResults = ReactTestUtils.scryRenderedDOMComponentsWithClass(
       renderedComponent,
       'x'
@@ -199,26 +207,33 @@ describe('ReactTestUtils', function() {
   });
 
   it('traverses children in the correct order', function() {
-    var container = document.createElement('div');
+    var Wrapper = React.createClass({
+      render: function() {
+        return <div>{this.props.children}</div>;
+      },
+    });
 
+    var container = document.createElement('div');
     React.render(
-      <div>
+      <Wrapper>
         {null}
         <div>purple</div>
-      </div>,
+      </Wrapper>,
       container
     );
     var tree = React.render(
-      <div>
+      <Wrapper>
         <div>orange</div>
         <div>purple</div>
-      </div>,
+      </Wrapper>,
       container
     );
 
     var log = [];
     ReactTestUtils.findAllInRenderedTree(tree, function(child) {
-      log.push(React.findDOMNode(child).textContent);
+      if (ReactTestUtils.isDOMComponent(child)) {
+        log.push(React.findDOMNode(child).textContent);
+      }
     });
 
     // Should be document order, not mount order (which would be purple, orange)