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.
Ben Alpert committed
Jun 16, 2015 at 16:37 UTC
4070c4ca20b1d08a00fe278d561642e87373c09f
3 files changed
+40
-27
src/renderers/shared/reconciler/__tests__/ReactMockedComponent-test.js
+7
-14
@@ -73,23 +73,20 @@ describe('ReactMockedComponent', function() {
73
},
74
75
render: function() {
76
- return <AutoMockedComponent prop={this.state.foo} />;
76
+ return <div><AutoMockedComponent prop={this.state.foo} /></div>;
77
},
78
79
});
80
+
81
var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
81
- instance.update();
82
- });
82
84
- it('should find an implicitly mocked component in the tree', function() {
85
- var instance = ReactTestUtils.renderIntoDocument(
86
- <div><span><AutoMockedComponent prop="1" /></span></div>
87
- );
83
var found = ReactTestUtils.findRenderedComponentWithType(
84
instance,
85
AutoMockedComponent
86
);
87
expect(typeof found).toBe('object');
88
+
89
+ instance.update();
90
});
91
92
it('has custom methods on the implicitly mocked component', () => {
@@ -113,23 +110,19 @@ describe('ReactMockedComponent', function() {
110
},
111
112
render: function() {
116
- return <MockedComponent prop={this.state.foo} />;
113
+ return <div><MockedComponent prop={this.state.foo} /></div>;
114
},
115
116
});
117
var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
121
- instance.update();
122
- });
118
124
- it('should find an explicitly mocked component in the tree', function() {
125
- var instance = ReactTestUtils.renderIntoDocument(
126
- <div><span><MockedComponent prop="1" /></span></div>
127
- );
119
var found = ReactTestUtils.findRenderedComponentWithType(
120
instance,
121
MockedComponent
122
);
123
expect(typeof found).toBe('object');
124
+
125
+ instance.update();
126
});
127
128
it('has custom methods on the explicitly mocked component', () => {
src/test/ReactTestUtils.js
+5
@@ -28,6 +28,7 @@ var SyntheticEvent = require('SyntheticEvent');
28
var assign = require('Object.assign');
29
var emptyObject = require('emptyObject');
30
var findDOMNode = require('findDOMNode');
31
+var invariant = require('invariant');
32
33
var topLevelTypes = EventConstants.topLevelTypes;
34
@@ -159,6 +160,10 @@ var ReactTestUtils = {
160
if (!inst) {
161
return [];
162
}
163
+ invariant(
164
+ ReactTestUtils.isCompositeComponent(inst),
165
+ 'findAllInRenderedTree(...): instance must be a composite component'
166
+ );
167
return findAllInRenderedTreeInternal(ReactInstanceMap.get(inst), test);
168
},
169
src/test/__tests__/ReactTestUtils-test.js
+28
-13
@@ -177,20 +177,28 @@ describe('ReactTestUtils', function() {
177
expect(result).toEqual(<div>foo</div>);
178
});
179
180
- it('Test scryRenderedDOMComponentsWithClass with TextComponent', function() {
181
- var renderedComponent = ReactTestUtils.renderIntoDocument(<div>Hello <span>Jim</span></div>);
180
+ it('can scryRenderedDOMComponentsWithClass with TextComponent', function() {
181
+ var Wrapper = React.createClass({
182
+ render: function() {
183
+ return <div>Hello <span>Jim</span></div>;
184
+ },
185
+ });
186
+ var renderedComponent = ReactTestUtils.renderIntoDocument(<Wrapper />);
187
var scryResults = ReactTestUtils.scryRenderedDOMComponentsWithClass(
188
renderedComponent,
184
- 'NonExistantClass'
189
+ 'NonExistentClass'
190
);
191
expect(scryResults.length).toBe(0);
192
193
});
194
190
- it('Test scryRenderedDOMComponentsWithClass with className contains \\n', function() {
191
- var renderedComponent = ReactTestUtils.renderIntoDocument(
192
- <div>Hello <span className={'x\ny'}>Jim</span></div>
193
- );
195
+ it('can scryRenderedDOMComponentsWithClass with className contains \\n', function() {
196
+ var Wrapper = React.createClass({
197
+ render: function() {
198
+ return <div>Hello <span className={'x\ny'}>Jim</span></div>;
199
+ },
200
+ });
201
+ var renderedComponent = ReactTestUtils.renderIntoDocument(<Wrapper />);
202
var scryResults = ReactTestUtils.scryRenderedDOMComponentsWithClass(
203
renderedComponent,
204
'x'
@@ -199,26 +207,33 @@ describe('ReactTestUtils', function() {
207
});
208
209
it('traverses children in the correct order', function() {
202
- var container = document.createElement('div');
210
+ var Wrapper = React.createClass({
211
+ render: function() {
212
+ return <div>{this.props.children}</div>;
213
+ },
214
+ });
215
216
+ var container = document.createElement('div');
217
React.render(
205
- <div>
218
+ <Wrapper>
219
{null}
220
<div>purple</div>
208
- </div>,
221
+ </Wrapper>,
222
container
223
);
224
var tree = React.render(
212
- <div>
225
+ <Wrapper>
226
<div>orange</div>
227
<div>purple</div>
215
- </div>,
228
+ </Wrapper>,
229
container
230
);
231
232
var log = [];
233
ReactTestUtils.findAllInRenderedTree(tree, function(child) {
221
- log.push(React.findDOMNode(child).textContent);
234
+ if (ReactTestUtils.isDOMComponent(child)) {
235
+ log.push(React.findDOMNode(child).textContent);
236
+ }
237
});
238
239
// Should be document order, not mount order (which would be purple, orange)