Reassign variable of rendered component
The component that gets passed into renderComponent isn't guaranteed to be the instance that gets mounted. We want to clone the instance. Unit tests need to reason about the mounted instance. The first code mod changes: ReactTestUtils.renderIntoDocument(<identifier>) into <identifier> = ReactTestUtils.renderIntoDocument(<identifier>) Using this scripts: scripts/bin/codemod -m -d ~/www --extensions js \ '^(\s*)ReactTestUtils\.renderIntoDocument\(\s*([$a-zA-Z0-9_]+)\s*\)' \ '\1\2 = ReactTestUtils.renderIntoDocument(\2)' In the second case I do the same for React.renderComponent. However, there are alot more unnecessary matches so I only codemod if the same identifier occurs later in the file. scripts/bin/codemod -m -d ~/www --extensions js \ '^(\s*)React.renderComponent\(\s*([$a-zA-Z0-9_]+)\s*?,(.*?\n?.*?\s\2\b)' \ '\1\2 = React.renderComponent(\2,\3' And one more for ReactMount.renderComponent used by internals. scripts/bin/codemod -m -d ~/www --extensions js \ '^(\s*)ReactMount.renderComponent\(\s*([$a-zA-Z0-9_]+)\s*?,(.*?\n?.*?\s\2\b)' \ '\1\2 = ReactMount.renderComponent(\2,\3' This still matches many unnecessary cases where the second occurance of the identifier is a redeclaration or comment. But this code mod doesn't hurt in those cases. Finally I have to do the same for: this.<identifier> = React.renderComponent(this.<identifier>, This is a common pattern for production code but not tests. Some of these call sites will likely break when we move to true descriptors. scripts/bin/codemod -m -d ~/www --extensions js \ '^(\s*)React.renderComponent\((\s*)this\.([$a-zA-Z0-9\_\.]+)\s*?,' \ '\1this.\3 = React.renderComponent(\2this.\3,'
Sebastian Markbage committed
Mar 13, 2014 at 16:23 UTC
7bbdcdba9615e5a1f6704e9a07a44b2bc5530487
15 files changed
+43
-43
src/browser/ui/__tests__/ReactDOMComponent-test.js
+1
-1
@@ -351,7 +351,7 @@ describe('ReactDOMComponent', function() {
351
352
var callback = function() {};
353
var instance = <div onClick={callback} />;
354
- React.renderComponent(instance, container);
354
+ instance = React.renderComponent(instance, container);
355
356
var rootNode = instance.getDOMNode();
357
var rootNodeID = ReactMount.getID(rootNode);
src/browser/ui/__tests__/ReactEventTopLevelCallback-test.js
+7
-7
@@ -44,8 +44,8 @@ describe('ReactEventTopLevelCallback', function() {
44
var childControl = <div>Child</div>;
45
var parentContainer = document.createElement('div');
46
var parentControl = <div>Parent</div>;
47
- ReactMount.renderComponent(childControl, childContainer);
48
- ReactMount.renderComponent(parentControl, parentContainer);
47
+ childControl = ReactMount.renderComponent(childControl, childContainer);
48
+ parentControl = ReactMount.renderComponent(parentControl, parentContainer);
49
parentControl.getDOMNode().appendChild(childContainer);
50
51
var callback = ReactEventTopLevelCallback.createTopLevelCallback('test');
@@ -66,9 +66,9 @@ describe('ReactEventTopLevelCallback', function() {
66
var parentControl = <div>Parent</div>;
67
var grandParentContainer = document.createElement('div');
68
var grandParentControl = <div>Parent</div>;
69
- ReactMount.renderComponent(childControl, childContainer);
70
- ReactMount.renderComponent(parentControl, parentContainer);
71
- ReactMount.renderComponent(grandParentControl, grandParentContainer);
69
+ childControl = ReactMount.renderComponent(childControl, childContainer);
70
+ parentControl = ReactMount.renderComponent(parentControl, parentContainer);
71
+ grandParentControl = ReactMount.renderComponent(grandParentControl, grandParentContainer);
72
parentControl.getDOMNode().appendChild(childContainer);
73
grandParentControl.getDOMNode().appendChild(parentContainer);
74
@@ -90,8 +90,8 @@ describe('ReactEventTopLevelCallback', function() {
90
var childControl = <div>Child</div>;
91
var parentContainer = document.createElement('div');
92
var parentControl = <div>Parent</div>;
93
- ReactMount.renderComponent(childControl, childContainer);
94
- ReactMount.renderComponent(parentControl, parentContainer);
93
+ childControl = ReactMount.renderComponent(childControl, childContainer);
94
+ parentControl = ReactMount.renderComponent(parentControl, parentContainer);
95
parentControl.getDOMNode().appendChild(childContainer);
96
97
// ReactEventEmitter.handleTopLevel might remove the target from the DOM.
src/browser/ui/dom/__tests__/CSSPropertyOperations-test.js
+1
-1
@@ -86,7 +86,7 @@ describe('CSSPropertyOperations', function() {
86
};
87
var div = <div style={styles} />;
88
var root = document.createElement('div');
89
- React.renderComponent(div, root);
89
+ div = React.renderComponent(div, root);
90
expect(/style=".*"/.test(root.innerHTML)).toBe(true);
91
});
92
src/browser/ui/dom/components/__tests__/ReactDOMButton-test.js
+1
-1
@@ -42,7 +42,7 @@ describe('ReactDOMButton', function() {
42
}
43
44
function mounted(button) {
45
- ReactTestUtils.renderIntoDocument(button);
45
+ button = ReactTestUtils.renderIntoDocument(button);
46
return button;
47
}
48
src/core/__tests__/ReactComponent-test.js
+6
-6
@@ -52,7 +52,7 @@ describe('ReactComponent', function() {
52
it('should throw when supplying a ref outside of render method', function() {
53
var instance = <div ref="badDiv" />;
54
expect(function() {
55
- ReactTestUtils.renderIntoDocument(instance);
55
+ instance = ReactTestUtils.renderIntoDocument(instance);
56
}).toThrow();
57
});
58
@@ -68,7 +68,7 @@ describe('ReactComponent', function() {
68
var instance = <Component child={<span />} />;
69
70
expect(function() {
71
- ReactTestUtils.renderIntoDocument(instance);
71
+ instance = ReactTestUtils.renderIntoDocument(instance);
72
}).toThrow(
73
'Invariant Violation: attachRef(test, ...): Only a component\'s owner ' +
74
'can store a ref to it.'
@@ -91,7 +91,7 @@ describe('ReactComponent', function() {
91
});
92
93
var instance = <Component child={<span />} />;
94
- ReactTestUtils.renderIntoDocument(instance);
94
+ instance = ReactTestUtils.renderIntoDocument(instance);
95
});
96
97
it('should not have refs on unmounted components', function() {
@@ -110,7 +110,7 @@ describe('ReactComponent', function() {
110
});
111
112
var instance = <Parent child={<span />} />;
113
- ReactTestUtils.renderIntoDocument(instance);
113
+ instance = ReactTestUtils.renderIntoDocument(instance);
114
});
115
116
it('should correctly determine if a component is mounted', function() {
@@ -146,7 +146,7 @@ describe('ReactComponent', function() {
146
});
147
148
var instance = <Owner />;
149
- ReactTestUtils.renderIntoDocument(instance);
149
+ instance = ReactTestUtils.renderIntoDocument(instance);
150
expect(instance._mountDepth).toBe(0);
151
expect(instance.refs.child._mountDepth).toBe(1);
152
});
@@ -197,7 +197,7 @@ describe('ReactComponent', function() {
197
});
198
199
var root = <App />;
200
- ReactTestUtils.renderIntoDocument(root);
200
+ root = ReactTestUtils.renderIntoDocument(root);
201
202
expect(root._mountDepth).toBe(0);
203
expect(root.refs.switcher._mountDepth).toBe(1);
src/core/__tests__/ReactCompositeComponentDOMMinimalism-test.js
+3
-3
@@ -78,7 +78,7 @@ describe('ReactCompositeComponentDOMMinimalism', function() {
78
A string child
79
</MyCompositeComponent>
80
);
81
- ReactTestUtils.renderIntoDocument(instance);
81
+ instance = ReactTestUtils.renderIntoDocument(instance);
82
expectSingleChildlessDiv(instance);
83
});
84
@@ -88,7 +88,7 @@ describe('ReactCompositeComponentDOMMinimalism', function() {
88
{'Interpolated String Child'}
89
</MyCompositeComponent>
90
);
91
- ReactTestUtils.renderIntoDocument(instance);
91
+ instance = ReactTestUtils.renderIntoDocument(instance);
92
expectSingleChildlessDiv(instance);
93
});
94
@@ -100,7 +100,7 @@ describe('ReactCompositeComponentDOMMinimalism', function() {
100
</ul>
101
</MyCompositeComponent>
102
);
103
- ReactTestUtils.renderIntoDocument(instance);
103
+ instance = ReactTestUtils.renderIntoDocument(instance);
104
reactComponentExpect(instance)
105
.expectRenderedChild()
106
.toBeCompositeComponentWithType(LowerLevelComposite)
src/core/__tests__/ReactCompositeComponentError-test.js
+1
-1
@@ -35,7 +35,7 @@ describe('ReactCompositeComponent-error', function() {
35
});
36
37
var instance = <Component />;
38
- ReactTestUtils.renderIntoDocument(instance);
38
+ instance = ReactTestUtils.renderIntoDocument(instance);
39
expect(ReactErrorUtils.guard.mostRecentCall.args[1])
40
.toEqual('Component.someHandler');
41
});
src/core/__tests__/ReactCompositeComponentMixin-test.js
+2
-2
@@ -103,7 +103,7 @@ describe('ReactCompositeComponent-mixin', function() {
103
it('should support merging propTypes and statics', function() {
104
var listener = mocks.getMockFunction();
105
var instance = <TestComponent listener={listener} />;
106
- ReactTestUtils.renderIntoDocument(instance);
106
+ instance = ReactTestUtils.renderIntoDocument(instance);
107
108
var instancePropTypes = instance.constructor.propTypes;
109
@@ -118,7 +118,7 @@ describe('ReactCompositeComponent-mixin', function() {
118
it('should support chaining delegate functions', function() {
119
var listener = mocks.getMockFunction();
120
var instance = <TestComponent listener={listener} />;
121
- ReactTestUtils.renderIntoDocument(instance);
121
+ instance = ReactTestUtils.renderIntoDocument(instance);
122
123
expect(listener.mock.calls).toEqual([
124
['MixinA didMount'],
src/core/__tests__/ReactCompositeComponentState-test.js
+1
-1
@@ -109,7 +109,7 @@ describe('ReactCompositeComponent-state', function() {
109
it('should support setting state', function() {
110
var stateListener = mocks.getMockFunction();
111
var instance = <TestComponent stateListener={stateListener} />;
112
- ReactTestUtils.renderIntoDocument(instance);
112
+ instance = ReactTestUtils.renderIntoDocument(instance);
113
instance.setProps({nextColor: 'green'});
114
instance.setFavoriteColor('blue');
115
instance.forceUpdate();
src/core/__tests__/ReactIdentity-test.js
+4
-4
@@ -52,7 +52,7 @@ describe('ReactIdentity', function() {
52
}}
53
</div>;
54
55
- React.renderComponent(instance, document.createElement('div'));
55
+ instance = React.renderComponent(instance, document.createElement('div'));
56
var node = instance.getDOMNode();
57
reactComponentExpect(instance).toBeDOMComponentWithChildCount(2);
58
checkId(node.childNodes[0], '.0.$first:0');
@@ -68,7 +68,7 @@ describe('ReactIdentity', function() {
68
<div key={123} />
69
</div>;
70
71
- React.renderComponent(instance, document.createElement('div'));
71
+ instance = React.renderComponent(instance, document.createElement('div'));
72
var node = instance.getDOMNode();
73
reactComponentExpect(instance).toBeDOMComponentWithChildCount(4);
74
checkId(node.childNodes[0], '.0.$apple');
@@ -92,7 +92,7 @@ describe('ReactIdentity', function() {
92
<Wrapper><span key="chipmunk" /></Wrapper>
93
</div>;
94
95
- React.renderComponent(instance, document.createElement('div'));
95
+ instance = React.renderComponent(instance, document.createElement('div'));
96
var node = instance.getDOMNode();
97
reactComponentExpect(instance).toBeDOMComponentWithChildCount(3);
98
@@ -282,7 +282,7 @@ describe('ReactIdentity', function() {
282
283
var wrapped = <TestContainer first={instance0} second={instance1} />;
284
285
- React.renderComponent(wrapped, document.createElement('div'));
285
+ wrapped = React.renderComponent(wrapped, document.createElement('div'));
286
287
var beforeID = ReactMount.getID(wrapped.getDOMNode().firstChild);
288
src/core/__tests__/ReactPropTransferer-test.js
+4
-4
@@ -48,7 +48,7 @@ describe('ReactPropTransferer', function() {
48
49
it('should leave explicitly specified properties intact', function() {
50
var instance = <TestComponent type="radio" />;
51
- ReactTestUtils.renderIntoDocument(instance);
51
+ instance = ReactTestUtils.renderIntoDocument(instance);
52
53
reactComponentExpect(instance)
54
.expectRenderedChild()
@@ -63,7 +63,7 @@ describe('ReactPropTransferer', function() {
63
64
it('should transfer unspecified properties', function() {
65
var instance = <TestComponent placeholder="Type here..." />;
66
- ReactTestUtils.renderIntoDocument(instance);
66
+ instance = ReactTestUtils.renderIntoDocument(instance);
67
68
reactComponentExpect(instance)
69
.expectRenderedChild()
@@ -77,7 +77,7 @@ describe('ReactPropTransferer', function() {
77
className="hidden_elem"
78
style={{width: '100%'}}
79
/>;
80
- ReactTestUtils.renderIntoDocument(instance);
80
+ instance = ReactTestUtils.renderIntoDocument(instance);
81
82
reactComponentExpect(instance)
83
.expectRenderedChild()
@@ -103,7 +103,7 @@ describe('ReactPropTransferer', function() {
103
<span>Hello!</span>
104
</ChildrenTestComponent>;
105
106
- ReactTestUtils.renderIntoDocument(instance);
106
+ instance = ReactTestUtils.renderIntoDocument(instance);
107
reactComponentExpect(instance)
108
.expectRenderedChild()
109
.toBeDOMComponentWithTag('div')
src/core/__tests__/ReactPropTypes-test.js
+2
-2
@@ -455,7 +455,7 @@ describe('Component Type', function() {
455
456
it('should be able to define a single child as label', () => {
457
var instance = <Component label={<div />} />;
458
- ReactTestUtils.renderIntoDocument(instance);
458
+ instance = ReactTestUtils.renderIntoDocument(instance);
459
460
// No warnings should have been logged.
461
expect(console.warn.mock.calls.length).toBe(0);
@@ -463,7 +463,7 @@ describe('Component Type', function() {
463
464
it('should warn when passing no label and isRequired is set', () => {
465
var instance = <Component />;
466
- ReactTestUtils.renderIntoDocument(instance);
466
+ instance = ReactTestUtils.renderIntoDocument(instance);
467
468
expect(console.warn.mock.calls.length).toBe(1);
469
});
src/core/__tests__/ReactStateSetters-test.js
+6
-6
@@ -55,7 +55,7 @@ describe('ReactStateSetters', function() {
55
56
it('createStateSetter should update state', function() {
57
var instance = <TestComponent />;
58
- ReactTestUtils.renderIntoDocument(instance);
58
+ instance = ReactTestUtils.renderIntoDocument(instance);
59
expect(instance.state).toEqual({foo: 'foo'});
60
61
var setter = ReactStateSetters.createStateSetter(
@@ -78,7 +78,7 @@ describe('ReactStateSetters', function() {
78
79
it('createStateKeySetter should update state', function() {
80
var instance = <TestComponent />;
81
- ReactTestUtils.renderIntoDocument(instance);
81
+ instance = ReactTestUtils.renderIntoDocument(instance);
82
expect(instance.state).toEqual({foo: 'foo'});
83
84
var setter = ReactStateSetters.createStateKeySetter(instance, 'foo');
@@ -94,7 +94,7 @@ describe('ReactStateSetters', function() {
94
95
it('createStateKeySetter is memoized', function() {
96
var instance = <TestComponent />;
97
- ReactTestUtils.renderIntoDocument(instance);
97
+ instance = ReactTestUtils.renderIntoDocument(instance);
98
expect(instance.state).toEqual({foo: 'foo'});
99
100
var foo1 = ReactStateSetters.createStateKeySetter(instance, 'foo');
@@ -109,7 +109,7 @@ describe('ReactStateSetters', function() {
109
110
it('createStateSetter should update state from mixin', function() {
111
var instance = <TestComponentWithMixin />;
112
- ReactTestUtils.renderIntoDocument(instance);
112
+ instance = ReactTestUtils.renderIntoDocument(instance);
113
expect(instance.state).toEqual({foo: 'foo'});
114
115
var setter = instance.createStateSetter(
@@ -131,7 +131,7 @@ describe('ReactStateSetters', function() {
131
132
it('createStateKeySetter should update state with mixin', function() {
133
var instance = <TestComponentWithMixin />;
134
- ReactTestUtils.renderIntoDocument(instance);
134
+ instance = ReactTestUtils.renderIntoDocument(instance);
135
expect(instance.state).toEqual({foo: 'foo'});
136
137
var setter = instance.createStateKeySetter('foo');
@@ -147,7 +147,7 @@ describe('ReactStateSetters', function() {
147
148
it('createStateKeySetter is memoized with mixin', function() {
149
var instance = <TestComponentWithMixin />;
150
- ReactTestUtils.renderIntoDocument(instance);
150
+ instance = ReactTestUtils.renderIntoDocument(instance);
151
expect(instance.state).toEqual({foo: 'foo'});
152
153
var foo1 = instance.createStateKeySetter('foo');
src/core/__tests__/ReactUpdates-test.js
+2
-2
@@ -318,7 +318,7 @@ describe('ReactUpdates', function() {
318
expect(childRenderCount).toBe(0);
319
320
var instance = <Parent />;
321
- ReactTestUtils.renderIntoDocument(instance);
321
+ instance = ReactTestUtils.renderIntoDocument(instance);
322
323
expect(parentRenderCount).toBe(1);
324
expect(childRenderCount).toBe(1);
@@ -437,7 +437,7 @@ describe('ReactUpdates', function() {
437
});
438
439
var root = <App />;
440
- ReactTestUtils.renderIntoDocument(root);
440
+ root = ReactTestUtils.renderIntoDocument(root);
441
442
function expectUpdates(desiredWillUpdates, desiredDidUpdates) {
443
expect(willUpdates).toEqual(desiredWillUpdates);
src/utils/__tests__/sliceChildren-test.js
+2
-2
@@ -53,7 +53,7 @@ describe('sliceChildren', function() {
53
54
function renderAndSlice(set, start, end) {
55
var instance = <Partial start={start} end={end}>{set}</Partial>;
56
- ReactTestUtils.renderIntoDocument(instance);
56
+ instance = ReactTestUtils.renderIntoDocument(instance);
57
var rendered = reactComponentExpect(instance)
58
.expectRenderedChild()
59
.instance();
@@ -106,7 +106,7 @@ describe('sliceChildren', function() {
106
var c = <div />;
107
108
var instance = <Partial start={1} end={2}>{a}{b}{c}</Partial>;
109
- ReactTestUtils.renderIntoDocument(instance);
109
+ instance = ReactTestUtils.renderIntoDocument(instance);
110
var rendered = reactComponentExpect(instance)
111
.expectRenderedChild()
112
.instance();