@samitouri / QOS-React / commits / 4d8a5bcd5c

codemodded tests from createClass to ES2015 classes

- reverted more files under classic

Keyan Zhang committed Jul 21, 2016 at 00:23 UTC 4d8a5bcd5cf736de988aa8c161fb956c9af8e04d
43 files changed +2044 -1880
src/addons/__tests__/renderSubtreeIntoContainer-test.js
+70 -72
@@ -21,37 +21,37 @@ describe('renderSubtreeIntoContainer', function() {
21 it('should pass context when rendering subtree elsewhere', function() {
22 var portal = document.createElement('div');
23
24 - var Component = React.createClass({
25 - contextTypes: {
24 + class Component extends React.Component {
25 + static contextTypes = {
26 foo: React.PropTypes.string.isRequired,
27 - },
27 + };
28
29 - render: function() {
29 + render() {
30 return <div>{this.context.foo}</div>;
31 - },
32 - });
31 + }
32 + }
33
34 - var Parent = React.createClass({
35 - childContextTypes: {
34 + class Parent extends React.Component {
35 + static childContextTypes = {
36 foo: React.PropTypes.string.isRequired,
37 - },
37 + };
38
39 - getChildContext: function() {
39 + getChildContext() {
40 return {
41 foo: 'bar',
42 };
43 - },
43 + }
44
45 - render: function() {
45 + render() {
46 return null;
47 - },
47 + }
48
49 - componentDidMount: function() {
49 + componentDidMount() {
50 expect(function() {
51 renderSubtreeIntoContainer(this, <Component />, portal);
52 }.bind(this)).not.toThrow();
53 - },
54 - });
53 + }
54 + }
55
56 ReactTestUtils.renderIntoDocument(<Parent />);
57 expect(portal.firstChild.innerHTML).toBe('bar');
@@ -60,37 +60,37 @@ describe('renderSubtreeIntoContainer', function() {
60 it('should throw if parentComponent is invalid', function() {
61 var portal = document.createElement('div');
62
63 - var Component = React.createClass({
64 - contextTypes: {
63 + class Component extends React.Component {
64 + static contextTypes = {
65 foo: React.PropTypes.string.isRequired,
66 - },
66 + };
67
68 - render: function() {
68 + render() {
69 return <div>{this.context.foo}</div>;
70 - },
71 - });
70 + }
71 + }
72
73 - var Parent = React.createClass({
74 - childContextTypes: {
73 + class Parent extends React.Component {
74 + static childContextTypes = {
75 foo: React.PropTypes.string.isRequired,
76 - },
76 + };
77
78 - getChildContext: function() {
78 + getChildContext() {
79 return {
80 foo: 'bar',
81 };
82 - },
82 + }
83
84 - render: function() {
84 + render() {
85 return null;
86 - },
86 + }
87
88 - componentDidMount: function() {
88 + componentDidMount() {
89 expect(function() {
90 renderSubtreeIntoContainer(<Parent />, <Component />, portal);
91 }).toThrowError('parentComponentmust be a valid React Component');
92 - },
93 - });
92 + }
93 + }
94 });
95
96 it('should update context if it changes due to setState', function() {
@@ -98,48 +98,46 @@ describe('renderSubtreeIntoContainer', function() {
98 document.body.appendChild(container);
99 var portal = document.createElement('div');
100
101 - var Component = React.createClass({
102 - contextTypes: {
101 + class Component extends React.Component {
102 + static contextTypes = {
103 foo: React.PropTypes.string.isRequired,
104 getFoo: React.PropTypes.func.isRequired,
105 - },
105 + };
106
107 - render: function() {
107 + render() {
108 return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
109 - },
110 - });
109 + }
110 + }
111
112 - var Parent = React.createClass({
113 - childContextTypes: {
112 + class Parent extends React.Component {
113 + static childContextTypes = {
114 foo: React.PropTypes.string.isRequired,
115 getFoo: React.PropTypes.func.isRequired,
116 - },
116 + };
117
118 - getChildContext: function() {
118 + state = {
119 + bar: 'initial',
120 + };
121 +
122 + getChildContext() {
123 return {
124 foo: this.state.bar,
125 getFoo: () => this.state.bar,
126 };
123 - },
124 -
125 - getInitialState: function() {
126 - return {
127 - bar: 'initial',
128 - };
129 - },
127 + }
128
131 - render: function() {
129 + render() {
130 return null;
133 - },
131 + }
132
135 - componentDidMount: function() {
133 + componentDidMount() {
134 renderSubtreeIntoContainer(this, <Component />, portal);
137 - },
135 + }
136
137 componentDidUpdate() {
138 renderSubtreeIntoContainer(this, <Component />, portal);
141 - },
142 - });
139 + }
140 + }
141
142 var instance = ReactDOM.render(<Parent />, container);
143 expect(portal.firstChild.innerHTML).toBe('initial-initial');
@@ -152,42 +150,42 @@ describe('renderSubtreeIntoContainer', function() {
150 document.body.appendChild(container);
151 var portal = document.createElement('div');
152
155 - var Component = React.createClass({
156 - contextTypes: {
153 + class Component extends React.Component {
154 + static contextTypes = {
155 foo: React.PropTypes.string.isRequired,
156 getFoo: React.PropTypes.func.isRequired,
159 - },
157 + };
158
161 - render: function() {
159 + render() {
160 return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
163 - },
164 - });
161 + }
162 + }
163
166 - var Parent = React.createClass({
167 - childContextTypes: {
164 + class Parent extends React.Component {
165 + static childContextTypes = {
166 foo: React.PropTypes.string.isRequired,
167 getFoo: React.PropTypes.func.isRequired,
170 - },
168 + };
169
172 - getChildContext: function() {
170 + getChildContext() {
171 return {
172 foo: this.props.bar,
173 getFoo: () => this.props.bar,
174 };
177 - },
175 + }
176
179 - render: function() {
177 + render() {
178 return null;
181 - },
179 + }
180
183 - componentDidMount: function() {
181 + componentDidMount() {
182 renderSubtreeIntoContainer(this, <Component />, portal);
185 - },
183 + }
184
185 componentDidUpdate() {
186 renderSubtreeIntoContainer(this, <Component />, portal);
189 - },
190 - });
187 + }
188 + }
189
190 ReactDOM.render(<Parent bar="initial" />, container);
191 expect(portal.firstChild.innerHTML).toBe('initial-initial');
src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js
+12 -14
@@ -271,8 +271,8 @@ describe('ReactCSSTransitionGroup', function() {
271 });
272
273 it('should clear transition timeouts when unmounted', function() {
274 - var Component = React.createClass({
275 - render: function() {
274 + class Component extends React.Component {
275 + render() {
276 return (
277 <ReactCSSTransitionGroup
278 transitionName="yolo"
@@ -280,8 +280,8 @@ describe('ReactCSSTransitionGroup', function() {
280 {this.props.children}
281 </ReactCSSTransitionGroup>
282 );
283 - },
284 - });
283 + }
284 + }
285
286 ReactDOM.render(<Component/>, container);
287 ReactDOM.render(<Component><span key="yolo" id="yolo"/></Component>, container);
@@ -293,23 +293,21 @@ describe('ReactCSSTransitionGroup', function() {
293 });
294
295 it('should handle unmounted elements properly', function() {
296 - var Child = React.createClass({
296 + class Child extends React.Component {
297 render() {
298 if (!this.props.show) {
299 return null;
300 }
301 return <div />;
302 - },
303 - });
302 + }
303 + }
304
305 - var Component = React.createClass({
306 - getInitialState() {
307 - return { showChild: true };
308 - },
305 + class Component extends React.Component {
306 + state = { showChild: true };
307
308 componentDidMount() {
309 this.setState({ showChild: false });
312 - },
310 + }
311
312 render() {
313 return (
@@ -321,8 +319,8 @@ describe('ReactCSSTransitionGroup', function() {
319 <Child show={this.state.showChild} />
320 </ReactCSSTransitionGroup>
321 );
324 - },
325 - });
322 + }
323 + }
324
325 ReactDOM.render(<Component/>, container);
326
src/addons/transitions/__tests__/ReactTransitionGroup-test.js
+122 -100
@@ -36,51 +36,58 @@ describe('ReactTransitionGroup', function() {
36 it('should handle willEnter correctly', function() {
37 var log = [];
38
39 - var Child = React.createClass({
40 - componentDidMount: function() {
39 + class Child extends React.Component {
40 + componentDidMount() {
41 log.push('didMount');
42 - },
43 - componentWillAppear: function(cb) {
42 + }
43 +
44 + componentWillAppear = (cb) => {
45 log.push('willAppear');
46 cb();
46 - },
47 - componentDidAppear: function() {
47 + };
48 +
49 + componentDidAppear = () => {
50 log.push('didAppear');
49 - },
50 - componentWillEnter: function(cb) {
51 + };
52 +
53 + componentWillEnter = (cb) => {
54 log.push('willEnter');
55 cb();
53 - },
54 - componentDidEnter: function() {
56 + };
57 +
58 + componentDidEnter = () => {
59 log.push('didEnter');
56 - },
57 - componentWillLeave: function(cb) {
60 + };
61 +
62 + componentWillLeave = (cb) => {
63 log.push('willLeave');
64 cb();
60 - },
61 - componentDidLeave: function() {
65 + };
66 +
67 + componentDidLeave = () => {
68 log.push('didLeave');
63 - },
64 - componentWillUnmount: function() {
69 + };
70 +
71 + componentWillUnmount() {
72 log.push('willUnmount');
66 - },
67 - render: function() {
73 + }
74 +
75 + render() {
76 return <span />;
69 - },
70 - });
77 + }
78 + }
79 +
80 + class Component extends React.Component {
81 + state = {count: 1};
82
72 - var Component = React.createClass({
73 - getInitialState: function() {
74 - return {count: 1};
75 - },
76 - render: function() {
83 + render() {
84 var children = [];
85 for (var i = 0; i < this.state.count; i++) {
86 children.push(<Child key={i} />);
87 }
88 return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
82 - },
83 - });
89 + }
90 + }
91
92 var instance = ReactDOM.render(<Component />, container);
93 expect(log).toEqual(['didMount', 'willAppear', 'didAppear']);
@@ -100,44 +107,49 @@ describe('ReactTransitionGroup', function() {
107 var log = [];
108 var willEnterCb;
109
103 - var Child = React.createClass({
104 - componentDidMount: function() {
110 + class Child extends React.Component {
111 + componentDidMount() {
112 log.push('didMount');
106 - },
107 - componentWillEnter: function(cb) {
113 + }
114 +
115 + componentWillEnter = (cb) => {
116 log.push('willEnter');
117 willEnterCb = cb;
110 - },
111 - componentDidEnter: function() {
118 + };
119 +
120 + componentDidEnter = () => {
121 log.push('didEnter');
113 - },
114 - componentWillLeave: function(cb) {
122 + };
123 +
124 + componentWillLeave = (cb) => {
125 log.push('willLeave');
126 cb();
117 - },
118 - componentDidLeave: function() {
127 + };
128 +
129 + componentDidLeave = () => {
130 log.push('didLeave');
120 - },
121 - componentWillUnmount: function() {
131 + };
132 +
133 + componentWillUnmount() {
134 log.push('willUnmount');
123 - },
124 - render: function() {
135 + }
136 +
137 + render() {
138 return <span />;
126 - },
127 - });
139 + }
140 + }
141
129 - var Component = React.createClass({
130 - getInitialState: function() {
131 - return {count: 1};
132 - },
133 - render: function() {
142 + class Component extends React.Component {
143 + state = {count: 1};
144 +
145 + render() {
146 var children = [];
147 for (var i = 0; i < this.state.count; i++) {
148 children.push(<Child key={i} />);
149 }
150 return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
139 - },
140 - });
151 + }
152 + }
153
154 var instance = ReactDOM.render(<Component />, container);
155 expect(log).toEqual(['didMount']);
@@ -160,44 +172,49 @@ describe('ReactTransitionGroup', function() {
172 var log = [];
173 var willEnterCb;
174
163 - var Child = React.createClass({
164 - componentDidMount: function() {
175 + class Child extends React.Component {
176 + componentDidMount() {
177 log.push('didMount');
166 - },
167 - componentWillEnter: function(cb) {
178 + }
179 +
180 + componentWillEnter = (cb) => {
181 log.push('willEnter');
182 willEnterCb = cb;
170 - },
171 - componentDidEnter: function() {
183 + };
184 +
185 + componentDidEnter = () => {
186 log.push('didEnter');
173 - },
174 - componentWillLeave: function(cb) {
187 + };
188 +
189 + componentWillLeave = (cb) => {
190 log.push('willLeave');
191 cb();
177 - },
178 - componentDidLeave: function() {
192 + };
193 +
194 + componentDidLeave = () => {
195 log.push('didLeave');
180 - },
181 - componentWillUnmount: function() {
196 + };
197 +
198 + componentWillUnmount() {
199 log.push('willUnmount');
183 - },
184 - render: function() {
200 + }
201 +
202 + render() {
203 return <span />;
186 - },
187 - });
204 + }
205 + }
206 +
207 + class Component extends React.Component {
208 + state = {count: 1};
209
189 - var Component = React.createClass({
190 - getInitialState: function() {
191 - return {count: 1};
192 - },
193 - render: function() {
210 + render() {
211 var children = [];
212 for (var i = 0; i < this.state.count; i++) {
213 children.push(<Child key={i} />);
214 }
215 return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
199 - },
200 - });
216 + }
217 + }
218
219 var instance = ReactDOM.render(<Component />, container);
220 expect(log).toEqual(['didMount']);
@@ -217,44 +234,49 @@ describe('ReactTransitionGroup', function() {
234 it('should handle entering/leaving several elements at once', function() {
235 var log = [];
236
220 - var Child = React.createClass({
221 - componentDidMount: function() {
237 + class Child extends React.Component {
238 + componentDidMount() {
239 log.push('didMount' + this.props.id);
223 - },
224 - componentWillEnter: function(cb) {
240 + }
241 +
242 + componentWillEnter = (cb) => {
243 log.push('willEnter' + this.props.id);
244 cb();
227 - },
228 - componentDidEnter: function() {
245 + };
246 +
247 + componentDidEnter = () => {
248 log.push('didEnter' + this.props.id);
230 - },
231 - componentWillLeave: function(cb) {
249 + };
250 +
251 + componentWillLeave = (cb) => {
252 log.push('willLeave' + this.props.id);
253 cb();
234 - },
235 - componentDidLeave: function() {
254 + };
255 +
256 + componentDidLeave = () => {
257 log.push('didLeave' + this.props.id);
237 - },
238 - componentWillUnmount: function() {
258 + };
259 +
260 + componentWillUnmount() {
261 log.push('willUnmount' + this.props.id);
240 - },
241 - render: function() {
262 + }
263 +
264 + render() {
265 return <span />;
243 - },
244 - });
266 + }
267 + }
268 +
269 + class Component extends React.Component {
270 + state = {count: 1};
271
246 - var Component = React.createClass({
247 - getInitialState: function() {
248 - return {count: 1};
249 - },
250 - render: function() {
272 + render() {
273 var children = [];
274 for (var i = 0; i < this.state.count; i++) {
275 children.push(<Child key={i} id={i} />);
276 }
277 return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
256 - },
257 - });
278 + }
279 + }
280
281 var instance = ReactDOM.render(<Component />, container);
282 expect(log).toEqual(['didMount0']);
@@ -277,12 +299,12 @@ describe('ReactTransitionGroup', function() {
299 it('should warn for duplicated keys with component stack info', function() {
300 spyOn(console, 'error');
301
280 - var Component = React.createClass({
281 - render: function() {
302 + class Component extends React.Component {
303 + render() {
304 var children = [<div key="1"/>, <div key="1" />];
305 return <ReactTransitionGroup>{children}</ReactTransitionGroup>;
284 - },
285 - });
306 + }
307 + }
308
309 ReactDOM.render(<Component />, container);
310
src/isomorphic/children/__tests__/onlyChild-test.js
+4 -4
@@ -22,15 +22,15 @@ describe('onlyChild', function() {
22 React = require('React');
23 ReactFragment = require('ReactFragment');
24 onlyChild = require('onlyChild');
25 - WrapComponent = React.createClass({
26 - render: function() {
25 + WrapComponent = class extends React.Component {
26 + render() {
27 return (
28 <div>
29 {onlyChild(this.props.children, this.props.mapFn, this)}
30 </div>
31 );
32 - },
33 - });
32 + }
33 + };
34 });
35
36 it('should fail when passed two children', function() {
src/isomorphic/classic/types/__tests__/ReactPropTypes-test.js
+30 -30
@@ -340,15 +340,15 @@ describe('ReactPropTypes', function() {
340
341 describe('Component Type', function() {
342 beforeEach(function() {
343 - Component = React.createClass({
344 - propTypes: {
343 + Component = class extends React.Component {
344 + static propTypes = {
345 label: PropTypes.element.isRequired,
346 - },
346 + };
347
348 - render: function() {
348 + render() {
349 return <div>{this.props.label}</div>;
350 - },
351 - });
350 + }
351 + };
352 });
353
354 it('should support components', () => {
@@ -513,11 +513,11 @@ describe('ReactPropTypes', function() {
513
514 describe('React Component Types', function() {
515 beforeEach(function() {
516 - MyComponent = React.createClass({
517 - render: function() {
516 + MyComponent = class extends React.Component {
517 + render() {
518 return <div />;
519 - },
520 - });
519 + }
520 + };
521 });
522
523 it('should warn for invalid values', function() {
@@ -1048,13 +1048,13 @@ describe('ReactPropTypes', function() {
1048
1049 it('should have been called with the right params', function() {
1050 var spy = jasmine.createSpy();
1051 - Component = React.createClass({
1052 - propTypes: {num: spy},
1051 + Component = class extends React.Component {
1052 + static propTypes = {num: spy};
1053
1054 - render: function() {
1054 + render() {
1055 return <div />;
1056 - },
1057 - });
1056 + }
1057 + };
1058
1059 var instance = <Component num={5} />;
1060 instance = ReactTestUtils.renderIntoDocument(instance);
@@ -1065,13 +1065,13 @@ describe('ReactPropTypes', function() {
1065
1066 it('should have been called even if the prop is not present', function() {
1067 var spy = jasmine.createSpy();
1068 - Component = React.createClass({
1069 - propTypes: {num: spy},
1068 + Component = class extends React.Component {
1069 + static propTypes = {num: spy};
1070
1071 - render: function() {
1071 + render() {
1072 return <div />;
1073 - },
1074 - });
1073 + }
1074 + };
1075
1076 var instance = <Component bla={5} />;
1077 instance = ReactTestUtils.renderIntoDocument(instance);
@@ -1089,13 +1089,13 @@ describe('ReactPropTypes', function() {
1089 }
1090 }
1091 );
1092 - Component = React.createClass({
1093 - propTypes: {num: spy},
1092 + Component = class extends React.Component {
1093 + static propTypes = {num: spy};
1094
1095 - render: function() {
1095 + render() {
1096 return <div />;
1097 - },
1098 - });
1097 + }
1098 + };
1099
1100 var instance = <Component num={6} />;
1101 instance = ReactTestUtils.renderIntoDocument(instance);
@@ -1116,13 +1116,13 @@ describe('ReactPropTypes', function() {
1116 return null;
1117 }
1118 );
1119 - Component = React.createClass({
1120 - propTypes: {num: spy},
1119 + Component = class extends React.Component {
1120 + static propTypes = {num: spy};
1121
1122 - render: function() {
1122 + render() {
1123 return <div />;
1124 - },
1125 - });
1124 + }
1125 + };
1126
1127 var instance = <Component num={5} />;
1128 instance = ReactTestUtils.renderIntoDocument(instance);
src/renderers/art/__tests__/ReactART-test.js
+42 -30
@@ -60,8 +60,8 @@ describe('ReactART', function() {
60 Shape = ReactART.Shape;
61 Surface = ReactART.Surface;
62
63 - TestComponent = React.createClass({
64 - render: function() {
63 + TestComponent = class extends React.Component {
64 + render() {
65
66 var a =
67 <Shape
@@ -96,7 +96,7 @@ describe('ReactART', function() {
96 </Surface>
97 );
98 }
99 - });
99 + };
100 });
101
102 it('should have the correct lifecycle state', function() {
@@ -185,16 +185,16 @@ describe('ReactART', function() {
185 it('should be able to reorder many components', function() {
186 var container = document.createElement('div');
187
188 - var Component = React.createClass({
189 - render: function() {
188 + class Component extends React.Component {
189 + render() {
190 var chars = this.props.chars.split('');
191 return (
192 <Surface>
193 {chars.map((text) => <Shape key={text} title={text} />)}
194 </Surface>
195 );
196 - },
197 - });
196 + }
197 + }
198
199 // Mini multi-child stress test: lots of reorders, some adds, some removes.
200 var before = 'abcdefghijklmnopqrst';
@@ -212,14 +212,17 @@ describe('ReactART', function() {
212
213 it('renders composite with lifecycle inside group', function() {
214 var mounted = false;
215 - var CustomShape = React.createClass({
216 - render: function() {
215 +
216 + class CustomShape extends React.Component {
217 + render() {
218 return <Shape />;
218 - },
219 - componentDidMount: function() {
219 + }
220 +
221 + componentDidMount() {
222 mounted = true;
223 }
222 - });
224 + }
225 +
226 ReactTestUtils.renderIntoDocument(
227 <Surface>
228 <Group>
@@ -231,17 +234,20 @@ describe('ReactART', function() {
234 });
235
236 it('resolves refs before componentDidMount', function() {
234 - var CustomShape = React.createClass({
235 - render: function() {
237 + class CustomShape extends React.Component {
238 + render() {
239 return <Shape />;
240 }
238 - });
241 + }
242 +
243 var ref = null;
240 - var Outer = React.createClass({
241 - componentDidMount: function() {
244 +
245 + class Outer extends React.Component {
246 + componentDidMount() {
247 ref = this.refs.test;
243 - },
244 - render: function() {
248 + }
249 +
250 + render() {
251 return (
252 <Surface>
253 <Group>
@@ -250,26 +256,31 @@ describe('ReactART', function() {
256 </Surface>
257 );
258 }
253 - });
259 + }
260 +
261 ReactTestUtils.renderIntoDocument(<Outer />);
262 expect(ref.constructor).toBe(CustomShape);
263 });
264
265 it('resolves refs before componentDidUpdate', function() {
259 - var CustomShape = React.createClass({
260 - render: function() {
266 + class CustomShape extends React.Component {
267 + render() {
268 return <Shape />;
269 }
263 - });
270 + }
271 +
272 var ref = {};
265 - var Outer = React.createClass({
266 - componentDidMount: function() {
273 +
274 + class Outer extends React.Component {
275 + componentDidMount() {
276 ref = this.refs.test;
268 - },
269 - componentDidUpdate: function() {
277 + }
278 +
279 + componentDidUpdate() {
280 ref = this.refs.test;
271 - },
272 - render: function() {
281 + }
282 +
283 + render() {
284 return (
285 <Surface>
286 <Group>
@@ -278,7 +289,8 @@ describe('ReactART', function() {
289 </Surface>
290 );
291 }
281 - });
292 + }
293 +
294 var container = document.createElement('div');
295 ReactDOM.render(<Outer />, container);
296 expect(ref).not.toBeDefined();
src/renderers/dom/__tests__/ReactDOMProduction-test.js
+9 -8
@@ -49,11 +49,11 @@ describe('ReactDOMProduction', function() {
49 });
50
51 it('should handle a simple flow', function() {
52 - var Component = React.createClass({
53 - render: function() {
52 + class Component extends React.Component {
53 + render() {
54 return <span>{this.props.children}</span>;
55 - },
56 - });
55 + }
56 + }
57
58 var container = document.createElement('div');
59 var inst = ReactDOM.render(
@@ -88,11 +88,12 @@ describe('ReactDOMProduction', function() {
88
89 it('should throw with an error code in production', function() {
90 expect(function() {
91 - var Component = React.createClass({
92 - render: function() {
91 + class Component extends React.Component {
92 + render() {
93 return ['this is wrong'];
94 - },
95 - });
94 + }
95 + }
96 +
97 var container = document.createElement('div');
98 ReactDOM.render(<Component />, container);
99 }).toThrowError(
src/renderers/dom/client/__tests__/ReactDOM-test.js
+14 -14
@@ -123,14 +123,14 @@ describe('ReactDOM', function() {
123 this.a = 1;
124 this.b = 2;
125 }
126 - var A = React.createClass({
127 - getInitialState: function() {
128 - return {};
129 - },
130 - render: function() {
126 +
127 + class A extends React.Component {
128 + state = {};
129 +
130 + render() {
131 return <div />;
132 - },
133 - });
132 + }
133 + }
134
135 var myDiv = document.createElement('div');
136 expect(() => ReactDOM.render(<A />, myDiv, 'no')).toThrowError(
@@ -152,14 +152,14 @@ describe('ReactDOM', function() {
152 this.a = 1;
153 this.b = 2;
154 }
155 - var A = React.createClass({
156 - getInitialState: function() {
157 - return {};
158 - },
159 - render: function() {
155 +
156 + class A extends React.Component {
157 + state = {};
158 +
159 + render() {
160 return <div />;
161 - },
162 - });
161 + }
162 + }
163
164 var myDiv = document.createElement('div');
165 ReactDOM.render(<A />, myDiv);
src/renderers/dom/client/__tests__/ReactDOMComponentTree-test.js
+8 -8
@@ -35,8 +35,8 @@ describe('ReactDOMComponentTree', function() {
35 // This is a little hard to test directly. But refs rely on it -- so we
36 // check that we can find a ref at arbitrary points in the tree, even if
37 // other nodes don't have a ref.
38 - var Component = React.createClass({
39 - render: function() {
38 + class Component extends React.Component {
39 + render() {
40 var toRef = this.props.toRef;
41 return (
42 <div ref={toRef === 'div' ? 'target' : null}>
@@ -47,8 +47,8 @@ describe('ReactDOMComponentTree', function() {
47 goodbye.
48 </div>
49 );
50 - },
51 - });
50 + }
51 + }
52
53 function renderAndGetRef(toRef) {
54 var inst = renderMarkupIntoDocument(<Component toRef={toRef} />);
@@ -62,8 +62,8 @@ describe('ReactDOMComponentTree', function() {
62 });
63
64 it('finds instances for nodes', function() {
65 - var Component = React.createClass({
66 - render: function() {
65 + class Component extends React.Component {
66 + render() {
67 return (
68 <div>
69 <h1>hello</h1>
@@ -74,8 +74,8 @@ describe('ReactDOMComponentTree', function() {
74 <main dangerouslySetInnerHTML={{__html: '<b><img></b>'}} />
75 </div>
76 );
77 - },
78 - });
77 + }
78 + }
79
80 function renderAndQuery(sel) {
81 var root = renderMarkupIntoDocument(<section><Component /></section>);
src/renderers/dom/client/__tests__/ReactDOMTreeTraversal-test.js
+8 -8
@@ -21,19 +21,19 @@ var ReactTestUtils = require('ReactTestUtils');
21 var ARG = {arg: true};
22 var ARG2 = {arg2: true};
23
24 -var ChildComponent = React.createClass({
25 - render: function() {
24 +class ChildComponent extends React.Component {
25 + render() {
26 return (
27 <div ref="DIV">
28 <div ref="DIV_1" />
29 <div ref="DIV_2" />
30 </div>
31 );
32 - },
33 -});
32 + }
33 +}
34
35 -var ParentComponent = React.createClass({
36 - render: function() {
35 +class ParentComponent extends React.Component {
36 + render() {
37 return (
38 <div ref="P">
39 <div ref="P_P1">
@@ -43,8 +43,8 @@ var ParentComponent = React.createClass({
43 <div ref="P_OneOff" />
44 </div>
45 );
46 - },
47 -});
46 + }
47 +}
48
49 function renderParentIntoDocument() {
50 return ReactTestUtils.renderIntoDocument(<ParentComponent />);
src/renderers/dom/client/__tests__/ReactEventListener-test.js
+6 -8
@@ -184,18 +184,16 @@ describe('ReactEventListener', function() {
184 });
185
186 it('should not fire duplicate events for a React DOM tree', function() {
187 - var Wrapper = React.createClass({
188 -
189 - getInner: function() {
187 + class Wrapper extends React.Component {
188 + getInner = () => {
189 return this.refs.inner;
191 - },
190 + };
191
193 - render: function() {
192 + render() {
193 var inner = <div ref="inner">Inner</div>;
194 return <div><div id="outer">{inner}</div></div>;
196 - },
197 -
198 - });
195 + }
196 + }
197
198 var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
199
src/renderers/dom/client/__tests__/ReactMount-test.js
+19 -16
@@ -60,11 +60,12 @@ describe('ReactMount', function() {
60 });
61
62 it('throws when given a factory', function() {
63 - var Component = React.createClass({
64 - render: function() {
63 + class Component extends React.Component {
64 + render() {
65 return <div />;
66 - },
67 - });
66 + }
67 + }
68 +
69 expect(function() {
70 ReactTestUtils.renderIntoDocument(Component);
71 }).toThrowError(
@@ -206,11 +207,13 @@ describe('ReactMount', function() {
207
208 it('should warn if render removes React-rendered children', function() {
209 var container = document.createElement('container');
209 - var Component = React.createClass({
210 - render: function() {
210 +
211 + class Component extends React.Component {
212 + render() {
213 return <div><div /></div>;
212 - },
213 - });
214 + }
215 + }
216 +
217 ReactDOM.render(<Component />, container);
218
219 // Test that blasting away children throws a warning
@@ -281,17 +284,17 @@ describe('ReactMount', function() {
284 it('marks top-level mounts', function() {
285 var ReactFeatureFlags = require('ReactFeatureFlags');
286
284 - var Foo = React.createClass({
285 - render: function() {
287 + class Foo extends React.Component {
288 + render() {
289 return <Bar />;
287 - },
288 - });
290 + }
291 + }
292
290 - var Bar = React.createClass({
291 - render: function() {
293 + class Bar extends React.Component {
294 + render() {
295 return <div />;
293 - },
294 - });
296 + }
297 + }
298
299 try {
300 ReactFeatureFlags.logTopLevelRenders = true;
src/renderers/dom/client/__tests__/ReactRenderDocument-test.js
+28 -28
@@ -41,8 +41,8 @@ describe('rendering React components at document', function() {
41 it('should be able to adopt server markup', function() {
42 expect(testDocument).not.toBeUndefined();
43
44 - var Root = React.createClass({
45 - render: function() {
44 + class Root extends React.Component {
45 + render() {
46 return (
47 <html>
48 <head>
@@ -53,8 +53,8 @@ describe('rendering React components at document', function() {
53 </body>
54 </html>
55 );
56 - },
57 - });
56 + }
57 + }
58
59 var markup = ReactDOMServer.renderToString(<Root hello="world" />);
60 testDocument = getTestDocument(markup);
@@ -72,8 +72,8 @@ describe('rendering React components at document', function() {
72 it('should not be able to unmount component from document node', function() {
73 expect(testDocument).not.toBeUndefined();
74
75 - var Root = React.createClass({
76 - render: function() {
75 + class Root extends React.Component {
76 + render() {
77 return (
78 <html>
79 <head>
@@ -84,8 +84,8 @@ describe('rendering React components at document', function() {
84 </body>
85 </html>
86 );
87 - },
88 - });
87 + }
88 + }
89
90 var markup = ReactDOMServer.renderToString(<Root />);
91 testDocument = getTestDocument(markup);
@@ -102,8 +102,8 @@ describe('rendering React components at document', function() {
102 it('should not be able to switch root constructors', function() {
103 expect(testDocument).not.toBeUndefined();
104
105 - var Component = React.createClass({
106 - render: function() {
105 + class Component extends React.Component {
106 + render() {
107 return (
108 <html>
109 <head>
@@ -114,11 +114,11 @@ describe('rendering React components at document', function() {
114 </body>
115 </html>
116 );
117 - },
118 - });
117 + }
118 + }
119
120 - var Component2 = React.createClass({
121 - render: function() {
120 + class Component2 extends React.Component {
121 + render() {
122 return (
123 <html>
124 <head>
@@ -129,8 +129,8 @@ describe('rendering React components at document', function() {
129 </body>
130 </html>
131 );
132 - },
133 - });
132 + }
133 + }
134
135 var markup = ReactDOMServer.renderToString(<Component />);
136 testDocument = getTestDocument(markup);
@@ -150,8 +150,8 @@ describe('rendering React components at document', function() {
150 it('should be able to mount into document', function() {
151 expect(testDocument).not.toBeUndefined();
152
153 - var Component = React.createClass({
154 - render: function() {
153 + class Component extends React.Component {
154 + render() {
155 return (
156 <html>
157 <head>
@@ -162,8 +162,8 @@ describe('rendering React components at document', function() {
162 </body>
163 </html>
164 );
165 - },
166 - });
165 + }
166 + }
167
168 var markup = ReactDOMServer.renderToString(
169 <Component text="Hello world" />
@@ -178,8 +178,8 @@ describe('rendering React components at document', function() {
178 it('should give helpful errors on state desync', function() {
179 expect(testDocument).not.toBeUndefined();
180
181 - var Component = React.createClass({
182 - render: function() {
181 + class Component extends React.Component {
182 + render() {
183 return (
184 <html>
185 <head>
@@ -190,8 +190,8 @@ describe('rendering React components at document', function() {
190 </body>
191 </html>
192 );
193 - },
194 - });
193 + }
194 + }
195
196 var markup = ReactDOMServer.renderToString(
197 <Component text="Goodbye world" />
@@ -220,8 +220,8 @@ describe('rendering React components at document', function() {
220
221 var container = testDocument;
222
223 - var Component = React.createClass({
224 - render: function() {
223 + class Component extends React.Component {
224 + render() {
225 return (
226 <html>
227 <head>
@@ -232,8 +232,8 @@ describe('rendering React components at document', function() {
232 </body>
233 </html>
234 );
235 - },
236 - });
235 + }
236 + }
237
238 expect(function() {
239 ReactDOM.render(<Component />, container);
src/renderers/dom/client/__tests__/findDOMNode-test.js
+15 -14
@@ -21,11 +21,11 @@ describe('findDOMNode', function() {
21 });
22
23 it('findDOMNode should find dom element', function() {
24 - var MyNode = React.createClass({
25 - render: function() {
24 + class MyNode extends React.Component {
25 + render() {
26 return <div><span>Noise</span></div>;
27 - },
28 - });
27 + }
28 + }
29
30 var myNode = ReactTestUtils.renderIntoDocument(<MyNode />);
31 var myDiv = ReactDOM.findDOMNode(myNode);
@@ -43,11 +43,11 @@ describe('findDOMNode', function() {
43 });
44
45 it('findDOMNode should reject unmounted objects with render func', function() {
46 - var Foo = React.createClass({
47 - render: function() {
46 + class Foo extends React.Component {
47 + render() {
48 return <div />;
49 - },
50 - });
49 + }
50 + }
51
52 var container = document.createElement('div');
53 var inst = ReactDOM.render(<Foo />, container);
@@ -59,14 +59,15 @@ describe('findDOMNode', function() {
59 });
60
61 it('findDOMNode should not throw an error when called within a component that is not mounted', function() {
62 - var Bar = React.createClass({
63 - componentWillMount: function() {
62 + class Bar extends React.Component {
63 + componentWillMount() {
64 expect(ReactDOM.findDOMNode(this)).toBeNull();
65 - },
66 - render: function() {
65 + }
66 +
67 + render() {
68 return <div/>;
68 - },
69 - });
69 + }
70 + }
71
72 expect(() => ReactTestUtils.renderIntoDocument(<Bar/>)).not.toThrow();
73 });
src/renderers/dom/client/eventPlugins/__tests__/SelectEventPlugin-test.js
+8 -8
@@ -42,11 +42,11 @@ describe('SelectEventPlugin', function() {
42 });
43
44 it('should skip extraction if no listeners are present', function() {
45 - var WithoutSelect = React.createClass({
46 - render: function() {
45 + class WithoutSelect extends React.Component {
46 + render() {
47 return <input type="text" />;
48 - },
49 - });
48 + }
49 + }
50
51 var rendered = ReactTestUtils.renderIntoDocument(<WithoutSelect />);
52 var node = ReactDOM.findDOMNode(rendered);
@@ -60,11 +60,11 @@ describe('SelectEventPlugin', function() {
60 });
61
62 it('should extract if an `onSelect` listener is present', function() {
63 - var WithSelect = React.createClass({
64 - render: function() {
63 + class WithSelect extends React.Component {
64 + render() {
65 return <input type="text" onSelect={this.props.onSelect} />;
66 - },
67 - });
66 + }
67 + }
68
69 var cb = jest.fn();
70
src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
+4 -4
@@ -281,8 +281,8 @@ describe('ReactDOMInput', function() {
281 });
282
283 it('should control radio buttons', function() {
284 - var RadioGroup = React.createClass({
285 - render: function() {
284 + class RadioGroup extends React.Component {
285 + render() {
286 return (
287 <div>
288 <input
@@ -310,8 +310,8 @@ describe('ReactDOMInput', function() {
310 </form>
311 </div>
312 );
313 - },
314 - });
313 + }
314 + }
315
316 var stub = ReactTestUtils.renderIntoDocument(<RadioGroup />);
317 var aNode = ReactDOM.findDOMNode(stub.refs.a);
src/renderers/dom/server/__tests__/ReactServerRendering-test.js
+127 -98
@@ -75,11 +75,12 @@ describe('ReactServerRendering', function() {
75 });
76
77 it('should generate comment markup for component returns null', function() {
78 - var NullComponent = React.createClass({
79 - render: function() {
78 + class NullComponent extends React.Component {
79 + render() {
80 return null;
81 - },
82 - });
81 + }
82 + }
83 +
84 var response = ReactServerRendering.renderToString(<NullComponent />);
85 expect(response).toBe('<!-- react-empty: 1 -->');
86 });
@@ -95,16 +96,18 @@ describe('ReactServerRendering', function() {
96 });
97
98 it('should render composite components', function() {
98 - var Parent = React.createClass({
99 - render: function() {
99 + class Parent extends React.Component {
100 + render() {
101 return <div><Child name="child" /></div>;
101 - },
102 - });
103 - var Child = React.createClass({
104 - render: function() {
102 + }
103 + }
104 +
105 + class Child extends React.Component {
106 + render() {
107 return <span>My name is {this.props.name}</span>;
106 - },
107 - });
108 + }
109 + }
110 +
111 var response = ReactServerRendering.renderToString(
112 <Parent />
113 );
@@ -123,37 +126,47 @@ describe('ReactServerRendering', function() {
126 it('should only execute certain lifecycle methods', function() {
127 function runTest() {
128 var lifecycle = [];
126 - var TestComponent = React.createClass({
127 - componentWillMount: function() {
129 +
130 + class TestComponent extends React.Component {
131 + constructor(props) {
132 + super(props);
133 + lifecycle.push('getInitialState');
134 + this.state = {name: 'TestComponent'};
135 + }
136 +
137 + componentWillMount() {
138 lifecycle.push('componentWillMount');
129 - },
130 - componentDidMount: function() {
139 + }
140 +
141 + componentDidMount() {
142 lifecycle.push('componentDidMount');
132 - },
133 - getInitialState: function() {
134 - lifecycle.push('getInitialState');
135 - return {name: 'TestComponent'};
136 - },
137 - render: function() {
143 + }
144 +
145 + render() {
146 lifecycle.push('render');
147 return <span>Component name: {this.state.name}</span>;
140 - },
141 - componentWillUpdate: function() {
148 + }
149 +
150 + componentWillUpdate() {
151 lifecycle.push('componentWillUpdate');
143 - },
144 - componentDidUpdate: function() {
152 + }
153 +
154 + componentDidUpdate() {
155 lifecycle.push('componentDidUpdate');
146 - },
147 - shouldComponentUpdate: function() {
156 + }
157 +
158 + shouldComponentUpdate() {
159 lifecycle.push('shouldComponentUpdate');
149 - },
150 - componentWillReceiveProps: function() {
160 + }
161 +
162 + componentWillReceiveProps() {
163 lifecycle.push('componentWillReceiveProps');
152 - },
153 - componentWillUnmount: function() {
164 + }
165 +
166 + componentWillUnmount() {
167 lifecycle.push('componentWillUnmount');
155 - },
156 - });
168 + }
169 + }
170
171 var response = ReactServerRendering.renderToString(
172 <TestComponent />
@@ -186,19 +199,21 @@ describe('ReactServerRendering', function() {
199 var mountCount = 0;
200 var numClicks = 0;
201
189 - var TestComponent = React.createClass({
190 - componentDidMount: function() {
202 + class TestComponent extends React.Component {
203 + componentDidMount() {
204 mountCount++;
192 - },
193 - click: function() {
205 + }
206 +
207 + click = () => {
208 numClicks++;
195 - },
196 - render: function() {
209 + };
210 +
211 + render() {
212 return (
213 <span ref="span" onClick={this.click}>Name: {this.props.name}</span>
214 );
200 - },
201 - });
215 + }
216 + }
217
218 var element = document.createElement('div');
219 ReactDOM.render(<TestComponent />, element);
@@ -274,17 +289,17 @@ describe('ReactServerRendering', function() {
289
290 describe('renderToStaticMarkup', function() {
291 it('should not put checksum and React ID on components', function() {
277 - var NestedComponent = React.createClass({
278 - render: function() {
292 + class NestedComponent extends React.Component {
293 + render() {
294 return <div>inner text</div>;
280 - },
281 - });
295 + }
296 + }
297
283 - var TestComponent = React.createClass({
284 - render: function() {
298 + class TestComponent extends React.Component {
299 + render() {
300 return <span><NestedComponent /></span>;
286 - },
287 - });
301 + }
302 + }
303
304 var response = ReactServerRendering.renderToStaticMarkup(
305 <TestComponent />
@@ -294,11 +309,11 @@ describe('ReactServerRendering', function() {
309 });
310
311 it('should not put checksum and React ID on text components', function() {
297 - var TestComponent = React.createClass({
298 - render: function() {
312 + class TestComponent extends React.Component {
313 + render() {
314 return <span>{'hello'} {'world'}</span>;
300 - },
301 - });
315 + }
316 + }
317
318 var response = ReactServerRendering.renderToStaticMarkup(
319 <TestComponent />
@@ -320,37 +335,47 @@ describe('ReactServerRendering', function() {
335 it('should only execute certain lifecycle methods', function() {
336 function runTest() {
337 var lifecycle = [];
323 - var TestComponent = React.createClass({
324 - componentWillMount: function() {
338 +
339 + class TestComponent extends React.Component {
340 + constructor(props) {
341 + super(props);
342 + lifecycle.push('getInitialState');
343 + this.state = {name: 'TestComponent'};
344 + }
345 +
346 + componentWillMount() {
347 lifecycle.push('componentWillMount');
326 - },
327 - componentDidMount: function() {
348 + }
349 +
350 + componentDidMount() {
351 lifecycle.push('componentDidMount');
329 - },
330 - getInitialState: function() {
331 - lifecycle.push('getInitialState');
332 - return {name: 'TestComponent'};
333 - },
334 - render: function() {
352 + }
353 +
354 + render() {
355 lifecycle.push('render');
356 return <span>Component name: {this.state.name}</span>;
337 - },
338 - componentWillUpdate: function() {
357 + }
358 +
359 + componentWillUpdate() {
360 lifecycle.push('componentWillUpdate');
340 - },
341 - componentDidUpdate: function() {
361 + }
362 +
363 + componentDidUpdate() {
364 lifecycle.push('componentDidUpdate');
343 - },
344 - shouldComponentUpdate: function() {
365 + }
366 +
367 + shouldComponentUpdate() {
368 lifecycle.push('shouldComponentUpdate');
346 - },
347 - componentWillReceiveProps: function() {
369 + }
370 +
371 + componentWillReceiveProps() {
372 lifecycle.push('componentWillReceiveProps');
349 - },
350 - componentWillUnmount: function() {
373 + }
374 +
375 + componentWillUnmount() {
376 lifecycle.push('componentWillUnmount');
352 - },
353 - });
377 + }
378 + }
379
380 var response = ReactServerRendering.renderToStaticMarkup(
381 <TestComponent />
@@ -381,14 +406,15 @@ describe('ReactServerRendering', function() {
406 });
407
408 it('allows setState in componentWillMount without using DOM', function() {
384 - var Component = React.createClass({
385 - componentWillMount: function() {
409 + class Component extends React.Component {
410 + componentWillMount() {
411 this.setState({text: 'hello, world'});
387 - },
388 - render: function() {
412 + }
413 +
414 + render() {
415 return <div>{this.state.text}</div>;
390 - },
391 - });
416 + }
417 + }
418
419 ReactReconcileTransaction.prototype.perform = function() {
420 // We shouldn't ever be calling this on the server
@@ -401,25 +427,27 @@ describe('ReactServerRendering', function() {
427 });
428
429 it('renders components with different batching strategies', function() {
404 - var StaticComponent = React.createClass({
405 - render: function() {
430 + class StaticComponent extends React.Component {
431 + render() {
432 const staticContent = ReactServerRendering.renderToStaticMarkup(
433 <div>
434 <img src="foo-bar.jpg" />
435 </div>
436 );
437 return <div dangerouslySetInnerHTML={{__html: staticContent}} />;
412 - },
413 - });
438 + }
439 + }
440
415 - var Component = React.createClass({
416 - componentWillMount: function() {
441 + class Component extends React.Component {
442 + componentWillMount() {
443 this.setState({text: 'hello, world'});
418 - },
419 - render: function() {
444 + }
445 +
446 + render() {
447 return <div>{this.state.text}</div>;
421 - },
422 - });
448 + }
449 + }
450 +
451 expect(
452 ReactServerRendering.renderToString.bind(
453 ReactServerRendering,
@@ -485,17 +513,18 @@ describe('ReactServerRendering', function() {
513 });
514
515 it('warns with a no-op when an async forceUpdate is triggered', function() {
488 - var Baz = React.createClass({
489 - componentWillMount: function() {
516 + class Baz extends React.Component {
517 + componentWillMount() {
518 this.forceUpdate();
519 setTimeout(() => {
520 this.forceUpdate();
521 });
494 - },
495 - render: function() {
522 + }
523 +
524 + render() {
525 return <div onClick={() => {}}></div>;
497 - },
498 - });
526 + }
527 + }
528
529 spyOn(console, 'error');
530 ReactServerRendering.renderToString(<Baz />);
src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
+35 -25
@@ -108,12 +108,14 @@ describe('CSSPropertyOperations', function() {
108 });
109
110 it('should warn when using hyphenated style names', function() {
111 - var Comp = React.createClass({
112 - displayName: 'Comp',
113 - render: function() {
111 + class Comp extends React.Component {
112 + static displayName = 'Comp';
113 +
114 + render() {
115 return <div style={{ 'background-color': 'crimson' }}/>;
115 - },
116 - });
116 + }
117 + }
118 +
119 spyOn(console, 'error');
120 var root = document.createElement('div');
121 ReactDOM.render(<Comp />, root);
@@ -125,12 +127,14 @@ describe('CSSPropertyOperations', function() {
127 });
128
129 it('should warn when updating hyphenated style names', function() {
128 - var Comp = React.createClass({
129 - displayName: 'Comp',
130 - render: function() {
130 + class Comp extends React.Component {
131 + static displayName = 'Comp';
132 +
133 + render() {
134 return <div style={this.props.style} />;
132 - },
133 - });
135 + }
136 + }
137 +
138 spyOn(console, 'error');
139 var styles = {
140 '-ms-transform': 'translate3d(0, 0, 0)',
@@ -152,16 +156,18 @@ describe('CSSPropertyOperations', function() {
156 });
157
158 it('warns when miscapitalizing vendored style names', function() {
155 - var Comp = React.createClass({
156 - displayName: 'Comp',
157 - render: function() {
159 + class Comp extends React.Component {
160 + static displayName = 'Comp';
161 +
162 + render() {
163 return (<div style={{
164 msTransform: 'translate3d(0, 0, 0)',
165 oTransform: 'translate3d(0, 0, 0)',
166 webkitTransform: 'translate3d(0, 0, 0)',
167 }} />);
163 - },
164 - });
168 + }
169 + }
170 +
171 spyOn(console, 'error');
172 var root = document.createElement('div');
173 ReactDOM.render(<Comp />, root);
@@ -178,17 +184,19 @@ describe('CSSPropertyOperations', function() {
184 });
185
186 it('should warn about style having a trailing semicolon', function() {
181 - var Comp = React.createClass({
182 - displayName: 'Comp',
183 - render: function() {
187 + class Comp extends React.Component {
188 + static displayName = 'Comp';
189 +
190 + render() {
191 return (<div style={{
192 fontFamily: 'Helvetica, arial',
193 backgroundImage: 'url(foo;bar)',
194 backgroundColor: 'blue;',
195 color: 'red; ',
196 }} />);
190 - },
191 - });
197 + }
198 + }
199 +
200 spyOn(console, 'error');
201 var root = document.createElement('div');
202 ReactDOM.render(<Comp />, root);
@@ -204,12 +212,14 @@ describe('CSSPropertyOperations', function() {
212 });
213
214 it('should warn about style containing a NaN value', function() {
207 - var Comp = React.createClass({
208 - displayName: 'Comp',
209 - render: function() {
215 + class Comp extends React.Component {
216 + static displayName = 'Comp';
217 +
218 + render() {
219 return <div style={{ fontSize: NaN }}/>;
211 - },
212 - });
220 + }
221 + }
222 +
223 spyOn(console, 'error');
224 var root = document.createElement('div');
225 ReactDOM.render(<Comp />, root);
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+78 -70
@@ -116,14 +116,14 @@ describe('ReactDOMComponent', function() {
116 spyOn(console, 'error');
117
118 var style = {border: '1px solid black'};
119 - var App = React.createClass({
120 - getInitialState: function() {
121 - return {style: style};
122 - },
123 - render: function() {
119 +
120 + class App extends React.Component {
121 + state = {style: style};
122 +
123 + render() {
124 return <div style={this.state.style}>asd</div>;
125 - },
126 - });
125 + }
126 + }
127
128 var stub = ReactTestUtils.renderIntoDocument(<App />);
129 style.position = 'absolute';
@@ -186,11 +186,12 @@ describe('ReactDOMComponent', function() {
186
187 it('should not warn for "0" as a unitless style value', function() {
188 spyOn(console, 'error');
189 - var Component = React.createClass({
190 - render: function() {
189 +
190 + class Component extends React.Component {
191 + render() {
192 return <div style={{margin: '0'}} />;
192 - },
193 - });
193 + }
194 + }
195
196 ReactTestUtils.renderIntoDocument(<Component />);
197 expect(console.error.calls.count()).toBe(0);
@@ -755,11 +756,12 @@ describe('ReactDOMComponent', function() {
756 });
757
758 it('should not duplicate uppercased selfclosing tags', function() {
758 - var Container = React.createClass({
759 - render: function() {
759 + class Container extends React.Component {
760 + render() {
761 return React.createElement('BR', null);
761 - },
762 - });
762 + }
763 + }
764 +
765 var returnedValue = ReactDOMServer.renderToString(<Container/>);
766 expect(returnedValue).not.toContain('</BR>');
767 });
@@ -944,11 +946,11 @@ describe('ReactDOMComponent', function() {
946 });
947
948 it('should warn for children on void elements', function() {
947 - var X = React.createClass({
948 - render: function() {
949 + class X extends React.Component {
950 + render() {
951 return <input>moo</input>;
950 - },
951 - });
952 + }
953 + }
954
955 var container = document.createElement('div');
956 expect(function() {
@@ -1039,11 +1041,11 @@ describe('ReactDOMComponent', function() {
1041 });
1042
1043 it('should report component containing invalid styles', function() {
1042 - var Animal = React.createClass({
1043 - render: function() {
1044 + class Animal extends React.Component {
1045 + render() {
1046 return <div style={1}></div>;
1045 - },
1046 - });
1047 + }
1048 + }
1049
1050 expect(function() {
1051 ReactDOM.render(<Animal/>, container);
@@ -1123,15 +1125,16 @@ describe('ReactDOMComponent', function() {
1125 });
1126
1127 it('unmounts children before unsetting DOM node info', function() {
1126 - var Inner = React.createClass({
1127 - render: function() {
1128 + class Inner extends React.Component {
1129 + render() {
1130 return <span />;
1129 - },
1130 - componentWillUnmount: function() {
1131 + }
1132 +
1133 + componentWillUnmount() {
1134 // Should not throw
1135 expect(ReactDOM.findDOMNode(this).nodeName).toBe('SPAN');
1133 - },
1134 - });
1136 + }
1137 + }
1138
1139 var container = document.createElement('div');
1140 ReactDOM.render(<div><Inner /></div>, container);
@@ -1219,16 +1222,19 @@ describe('ReactDOMComponent', function() {
1222
1223 it('warns nicely for table rows', () => {
1224 spyOn(console, 'error');
1222 - var Row = React.createClass({
1223 - render: function() {
1225 +
1226 + class Row extends React.Component {
1227 + render() {
1228 return <tr />;
1225 - },
1226 - });
1227 - var Foo = React.createClass({
1228 - render: function() {
1229 + }
1230 + }
1231 +
1232 + class Foo extends React.Component {
1233 + render() {
1234 return <table><Row /> </table>;
1230 - },
1231 - });
1235 + }
1236 + }
1237 +
1238 ReactTestUtils.renderIntoDocument(<Foo />);
1239
1240 expect(console.error.calls.count()).toBe(2);
@@ -1251,16 +1257,18 @@ describe('ReactDOMComponent', function() {
1257 var FancyRow = React.createClass({
1258 render: () => <Row />,
1259 });
1254 - var Table = React.createClass({
1255 - render: function() {
1260 +
1261 + class Table extends React.Component {
1262 + render() {
1263 return <table>{this.props.children}</table>;
1257 - },
1258 - });
1259 - var FancyTable = React.createClass({
1260 - render: function() {
1264 + }
1265 + }
1266 +
1267 + class FancyTable extends React.Component {
1268 + render() {
1269 return <Table>{this.props.children}</Table>;
1262 - },
1263 - });
1270 + }
1271 + }
1272
1273 var Viz1 = React.createClass({
1274 render: () => <table><FancyRow /></table>,
@@ -1304,11 +1312,12 @@ describe('ReactDOMComponent', function() {
1312 'See FancyTable > Table > table > tr.'
1313 );
1314
1307 - var Link = React.createClass({
1308 - render: function() {
1315 + class Link extends React.Component {
1316 + render() {
1317 return <a>{this.props.children}</a>;
1310 - },
1311 - });
1318 + }
1319 + }
1320 +
1321 ReactTestUtils.renderIntoDocument(<Link><div><Link /></div></Link>);
1322 expect(console.error.calls.count()).toBe(6);
1323 expect(console.error.calls.argsFor(5)[0]).toContain(
@@ -1434,35 +1443,35 @@ describe('ReactDOMComponent', function() {
1443 spyOn(console, 'error');
1444 var container = document.createElement('div');
1445
1437 - var Parent = React.createClass({
1438 - render: function() {
1446 + class Parent extends React.Component {
1447 + render() {
1448 return <div><Child1 /><Child2 /><Child3 /><Child4 /></div>;
1440 - },
1441 - });
1449 + }
1450 + }
1451
1443 - var Child1 = React.createClass({
1444 - render: function() {
1452 + class Child1 extends React.Component {
1453 + render() {
1454 return <div class="paladin">Child1</div>;
1446 - },
1447 - });
1455 + }
1456 + }
1457
1449 - var Child2 = React.createClass({
1450 - render: function() {
1458 + class Child2 extends React.Component {
1459 + render() {
1460 return <div>Child2</div>;
1452 - },
1453 - });
1461 + }
1462 + }
1463
1455 - var Child3 = React.createClass({
1456 - render: function() {
1464 + class Child3 extends React.Component {
1465 + render() {
1466 return <div onclick="1">Child3</div>;
1458 - },
1459 - });
1467 + }
1468 + }
1469
1461 - var Child4 = React.createClass({
1462 - render: function() {
1470 + class Child4 extends React.Component {
1471 + render() {
1472 return <div>Child4</div>;
1464 - },
1465 - });
1473 + }
1474 + }
1475
1476 ReactDOMServer.renderToString(<Parent />, container);
1477
@@ -1479,7 +1488,6 @@ describe('ReactDOMComponent', function() {
1488 //verify line number has a proper relative difference,
1489 //since hard coding the line number would make test too brittle
1490 expect(parseInt(previousLine, 10) + 12).toBe(parseInt(currentLine, 10));
1482 -
1491 });
1492 });
1493 });
src/renderers/shared/__tests__/ReactPerf-test.js
+23 -19
@@ -40,24 +40,24 @@ describe('ReactPerf', function() {
40 ReactTestUtils = require('ReactTestUtils');
41 emptyFunction = require('emptyFunction');
42
43 - App = React.createClass({
44 - render: function() {
43 + App = class extends React.Component {
44 + render() {
45 return <div><Box /><Box flip={this.props.flipSecond} /></div>;
46 - },
47 - });
46 + }
47 + };
48
49 - Box = React.createClass({
50 - render: function() {
49 + Box = class extends React.Component {
50 + render() {
51 return <div key={!!this.props.flip}><input /></div>;
52 - },
53 - });
52 + }
53 + };
54
55 // ReactPerf only measures composites, so we put everything in one.
56 - Div = React.createClass({
57 - render: function() {
56 + Div = class extends React.Component {
57 + render() {
58 return <div {...this.props} />;
59 - },
60 - });
59 + }
60 + };
61
62 LifeCycle = React.createClass({
63 shouldComponentUpdate: emptyFunction.thatReturnsTrue,
@@ -471,24 +471,28 @@ describe('ReactPerf', function() {
471
472 it('should work when measurement starts during reconciliation', () => {
473 // https://github.com/facebook/react/issues/6949#issuecomment-230371009
474 - var Measurer = React.createClass({
474 + class Measurer extends React.Component {
475 componentWillMount() {
476 ReactPerf.start();
477 - },
477 + }
478 +
479 componentDidMount() {
480 ReactPerf.stop();
480 - },
481 + }
482 +
483 componentWillUpdate() {
484 ReactPerf.start();
483 - },
485 + }
486 +
487 componentDidUpdate() {
488 ReactPerf.stop();
486 - },
489 + }
490 +
491 render() {
492 // Force reconciliation despite constant element
493 return React.cloneElement(this.props.children);
490 - },
491 - });
494 + }
495 + }
496
497 var container = document.createElement('div');
498 ReactDOM.render(<Measurer><App /></Measurer>, container);
src/renderers/shared/devtools/__tests__/ReactComponentTreeDevtool-test.js
+50 -45
@@ -103,22 +103,26 @@ describe('ReactComponentTreeDevtool', () => {
103
104 describe('mount', () => {
105 it('uses displayName or Unknown for classic components', () => {
106 - var Foo = React.createClass({
106 + class Foo extends React.Component {
107 render() {
108 return null;
109 - },
110 - });
109 + }
110 + }
111 +
112 Foo.displayName = 'Bar';
112 - var Baz = React.createClass({
113 +
114 + class Baz extends React.Component {
115 render() {
116 return null;
115 - },
116 - });
117 - var Qux = React.createClass({
117 + }
118 + }
119 +
120 + class Qux extends React.Component {
121 render() {
122 return null;
120 - },
121 - });
123 + }
124 + }
125 +
126 delete Qux.displayName;
127
128 var element = <div><Foo /><Baz /><Qux /></div>;
@@ -306,11 +310,12 @@ describe('ReactComponentTreeDevtool', () => {
310 });
311
312 it('reports a tree with composites correctly', () => {
309 - var Qux = React.createClass({
313 + class Qux extends React.Component {
314 render() {
315 return null;
312 - },
313 - });
316 + }
317 + }
318 +
319 function Foo() {
320 return {
321 render() {
@@ -1361,11 +1366,11 @@ describe('ReactComponentTreeDevtool', () => {
1366
1367 describe('class component', () => {
1368 it('updates with a host child', () => {
1364 - var Foo = React.createClass({
1369 + class Foo extends React.Component {
1370 render() {
1371 return this.props.children;
1367 - },
1368 - });
1372 + }
1373 + }
1374
1375 var elementBefore = <Foo><div /></Foo>;
1376 var treeBefore = {
@@ -1392,11 +1397,11 @@ describe('ReactComponentTreeDevtool', () => {
1397 });
1398
1399 it('updates from null to a host child', () => {
1395 - var Foo = React.createClass({
1400 + class Foo extends React.Component {
1401 render() {
1402 return this.props.children;
1398 - },
1399 - });
1403 + }
1404 + }
1405
1406 var elementBefore = <Foo>{null}</Foo>;
1407 var treeBefore = {
@@ -1420,11 +1425,11 @@ describe('ReactComponentTreeDevtool', () => {
1425 });
1426
1427 it('updates from a host child to null', () => {
1423 - var Foo = React.createClass({
1428 + class Foo extends React.Component {
1429 render() {
1430 return this.props.children;
1426 - },
1427 - });
1431 + }
1432 + }
1433
1434 var elementBefore = <Foo><div /></Foo>;
1435 var treeBefore = {
@@ -1448,17 +1453,17 @@ describe('ReactComponentTreeDevtool', () => {
1453 });
1454
1455 it('updates from a host child to a composite child', () => {
1451 - var Bar = React.createClass({
1456 + class Bar extends React.Component {
1457 render() {
1458 return null;
1454 - },
1455 - });
1459 + }
1460 + }
1461
1457 - var Foo = React.createClass({
1462 + class Foo extends React.Component {
1463 render() {
1464 return this.props.children;
1460 - },
1461 - });
1465 + }
1466 + }
1467
1468 var elementBefore = <Foo><div /></Foo>;
1469 var treeBefore = {
@@ -1485,17 +1490,17 @@ describe('ReactComponentTreeDevtool', () => {
1490 });
1491
1492 it('updates from a composite child to a host child', () => {
1488 - var Bar = React.createClass({
1493 + class Bar extends React.Component {
1494 render() {
1495 return null;
1491 - },
1492 - });
1496 + }
1497 + }
1498
1494 - var Foo = React.createClass({
1499 + class Foo extends React.Component {
1500 render() {
1501 return this.props.children;
1497 - },
1498 - });
1502 + }
1503 + }
1504
1505 var elementBefore = <Foo><Bar /></Foo>;
1506 var treeBefore = {
@@ -1522,17 +1527,17 @@ describe('ReactComponentTreeDevtool', () => {
1527 });
1528
1529 it('updates from null to a composite child', () => {
1525 - var Bar = React.createClass({
1530 + class Bar extends React.Component {
1531 render() {
1532 return null;
1528 - },
1529 - });
1533 + }
1534 + }
1535
1531 - var Foo = React.createClass({
1536 + class Foo extends React.Component {
1537 render() {
1538 return this.props.children;
1534 - },
1535 - });
1539 + }
1540 + }
1541
1542 var elementBefore = <Foo>{null}</Foo>;
1543 var treeBefore = {
@@ -1556,17 +1561,17 @@ describe('ReactComponentTreeDevtool', () => {
1561 });
1562
1563 it('updates from a composite child to null', () => {
1559 - var Bar = React.createClass({
1564 + class Bar extends React.Component {
1565 render() {
1566 return null;
1562 - },
1563 - });
1567 + }
1568 + }
1569
1565 - var Foo = React.createClass({
1570 + class Foo extends React.Component {
1571 render() {
1572 return this.props.children;
1568 - },
1569 - });
1573 + }
1574 + }
1575
1576 var elementBefore = <Foo><Bar /></Foo>;
1577 var treeBefore = {
src/renderers/shared/devtools/__tests__/ReactComponentTreeDevtool-test.native.js
+58 -51
@@ -40,17 +40,19 @@ describe('ReactComponentTreeDevtool', () => {
40 validAttributes: {},
41 uiViewClassName: 'RCText',
42 });
43 - Text = React.createClass({
44 - childContextTypes: {
43 + Text = class extends React.Component {
44 + static childContextTypes = {
45 isInAParentText: React.PropTypes.bool,
46 - },
46 + };
47 +
48 getChildContext() {
49 return {isInAParentText: true};
49 - },
50 + }
51 +
52 render() {
53 return <RCText {...this.props} />;
52 - },
53 - });
54 + }
55 + };
56 });
57
58 function assertTreeMatches(pairs, options) {
@@ -116,22 +118,26 @@ describe('ReactComponentTreeDevtool', () => {
118
119 describe('mount', () => {
120 it('uses displayName or Unknown for classic components', () => {
119 - var Foo = React.createClass({
121 + class Foo extends React.Component {
122 render() {
123 return null;
122 - },
123 - });
124 + }
125 + }
126 +
127 Foo.displayName = 'Bar';
125 - var Baz = React.createClass({
128 +
129 + class Baz extends React.Component {
130 render() {
131 return null;
128 - },
129 - });
130 - var Qux = React.createClass({
132 + }
133 + }
134 +
135 + class Qux extends React.Component {
136 render() {
137 return null;
133 - },
134 - });
138 + }
139 + }
140 +
141 delete Qux.displayName;
142
143 var element = <View><Foo /><Baz /><Qux /></View>;
@@ -318,11 +324,12 @@ describe('ReactComponentTreeDevtool', () => {
324 });
325
326 it('reports a tree with composites correctly', () => {
321 - var Qux = React.createClass({
327 + class Qux extends React.Component {
328 render() {
329 return null;
324 - },
325 - });
330 + }
331 + }
332 +
333 function Foo() {
334 return {
335 render() {
@@ -1323,11 +1330,11 @@ describe('ReactComponentTreeDevtool', () => {
1330
1331 describe('class component', () => {
1332 it('updates with a host child', () => {
1326 - var Foo = React.createClass({
1333 + class Foo extends React.Component {
1334 render() {
1335 return this.props.children;
1329 - },
1330 - });
1336 + }
1337 + }
1338
1339 var elementBefore = <Foo><View /></Foo>;
1340 var treeBefore = {
@@ -1354,11 +1361,11 @@ describe('ReactComponentTreeDevtool', () => {
1361 });
1362
1363 it('updates from null to a host child', () => {
1357 - var Foo = React.createClass({
1364 + class Foo extends React.Component {
1365 render() {
1366 return this.props.children;
1360 - },
1361 - });
1367 + }
1368 + }
1369
1370 var elementBefore = <Foo>{null}</Foo>;
1371 var treeBefore = {
@@ -1382,11 +1389,11 @@ describe('ReactComponentTreeDevtool', () => {
1389 });
1390
1391 it('updates from a host child to null', () => {
1385 - var Foo = React.createClass({
1392 + class Foo extends React.Component {
1393 render() {
1394 return this.props.children;
1388 - },
1389 - });
1395 + }
1396 + }
1397
1398 var elementBefore = <Foo><View /></Foo>;
1399 var treeBefore = {
@@ -1410,17 +1417,17 @@ describe('ReactComponentTreeDevtool', () => {
1417 });
1418
1419 it('updates from a host child to a composite child', () => {
1413 - var Bar = React.createClass({
1420 + class Bar extends React.Component {
1421 render() {
1422 return null;
1416 - },
1417 - });
1423 + }
1424 + }
1425
1419 - var Foo = React.createClass({
1426 + class Foo extends React.Component {
1427 render() {
1428 return this.props.children;
1422 - },
1423 - });
1429 + }
1430 + }
1431
1432 var elementBefore = <Foo><View /></Foo>;
1433 var treeBefore = {
@@ -1447,17 +1454,17 @@ describe('ReactComponentTreeDevtool', () => {
1454 });
1455
1456 it('updates from a composite child to a host child', () => {
1450 - var Bar = React.createClass({
1457 + class Bar extends React.Component {
1458 render() {
1459 return null;
1453 - },
1454 - });
1460 + }
1461 + }
1462
1456 - var Foo = React.createClass({
1463 + class Foo extends React.Component {
1464 render() {
1465 return this.props.children;
1459 - },
1460 - });
1466 + }
1467 + }
1468
1469 var elementBefore = <Foo><Bar /></Foo>;
1470 var treeBefore = {
@@ -1484,17 +1491,17 @@ describe('ReactComponentTreeDevtool', () => {
1491 });
1492
1493 it('updates from null to a composite child', () => {
1487 - var Bar = React.createClass({
1494 + class Bar extends React.Component {
1495 render() {
1496 return null;
1490 - },
1491 - });
1497 + }
1498 + }
1499
1493 - var Foo = React.createClass({
1500 + class Foo extends React.Component {
1501 render() {
1502 return this.props.children;
1496 - },
1497 - });
1503 + }
1504 + }
1505
1506 var elementBefore = <Foo>{null}</Foo>;
1507 var treeBefore = {
@@ -1518,17 +1525,17 @@ describe('ReactComponentTreeDevtool', () => {
1525 });
1526
1527 it('updates from a composite child to null', () => {
1521 - var Bar = React.createClass({
1528 + class Bar extends React.Component {
1529 render() {
1530 return null;
1524 - },
1525 - });
1531 + }
1532 + }
1533
1527 - var Foo = React.createClass({
1534 + class Foo extends React.Component {
1535 render() {
1536 return this.props.children;
1530 - },
1531 - });
1537 + }
1538 + }
1539
1540 var elementBefore = <Foo><Bar /></Foo>;
1541 var treeBefore = {
src/renderers/shared/stack/reconciler/__tests__/ReactChildReconciler-test.js
+15 -15
@@ -32,11 +32,11 @@ describe('ReactChildReconciler', function() {
32 it('warns for duplicated keys', function() {
33 spyOn(console, 'error');
34
35 - var Component = React.createClass({
35 + class Component extends React.Component {
36 render() {
37 return <div>{[<div key="1" />, <div key="1" />]}</div>;
38 - },
39 - });
38 + }
39 + }
40
41 ReactTestUtils.renderIntoDocument(<Component />);
42
@@ -49,23 +49,23 @@ describe('ReactChildReconciler', function() {
49 it('warns for duplicated keys with component stack info', function() {
50 spyOn(console, 'error');
51
52 - var Component = React.createClass({
53 - render: function() {
52 + class Component extends React.Component {
53 + render() {
54 return <div>{[<div key="1" />, <div key="1" />]}</div>;
55 - },
56 - });
55 + }
56 + }
57
58 - var Parent = React.createClass({
59 - render: function() {
58 + class Parent extends React.Component {
59 + render() {
60 return React.cloneElement(this.props.child);
61 - },
62 - });
61 + }
62 + }
63
64 - var GrandParent = React.createClass({
65 - render: function() {
64 + class GrandParent extends React.Component {
65 + render() {
66 return <Parent child={<Component />} />;
67 - },
68 - });
67 + }
68 + }
69
70 ReactTestUtils.renderIntoDocument(<GrandParent />);
71
src/renderers/shared/stack/reconciler/__tests__/ReactComponent-test.js
+84 -70
@@ -79,48 +79,49 @@ describe('ReactComponent', function() {
79 var innerObj = {};
80 var outerObj = {};
81
82 - var Wrapper = React.createClass({
83 -
84 - getObject: function() {
82 + class Wrapper extends React.Component {
83 + getObject = () => {
84 return this.props.object;
86 - },
85 + };
86
88 - render: function() {
87 + render() {
88 return <div>{this.props.children}</div>;
90 - },
91 -
92 - });
89 + }
90 + }
91
94 - var Component = React.createClass({
95 - render: function() {
92 + class Component extends React.Component {
93 + render() {
94 var inner = <Wrapper object={innerObj} ref="inner" />;
95 var outer = <Wrapper object={outerObj} ref="outer">{inner}</Wrapper>;
96 return outer;
99 - },
100 - componentDidMount: function() {
97 + }
98 +
99 + componentDidMount() {
100 expect(this.refs.inner.getObject()).toEqual(innerObj);
101 expect(this.refs.outer.getObject()).toEqual(outerObj);
103 - },
104 - });
102 + }
103 + }
104
105 var instance = <Component />;
106 instance = ReactTestUtils.renderIntoDocument(instance);
107 });
108
109 it('should not have refs on unmounted components', function() {
111 - var Parent = React.createClass({
112 - render: function() {
110 + class Parent extends React.Component {
111 + render() {
112 return <Child><div ref="test" /></Child>;
114 - },
115 - componentDidMount: function() {
113 + }
114 +
115 + componentDidMount() {
116 expect(this.refs && this.refs.test).toEqual(undefined);
117 - },
118 - });
119 - var Child = React.createClass({
120 - render: function() {
117 + }
118 + }
119 +
120 + class Child extends React.Component {
121 + render() {
122 return <div />;
122 - },
123 - });
123 + }
124 + }
125
126 var instance = <Parent child={<span />} />;
127 instance = ReactTestUtils.renderIntoDocument(instance);
@@ -130,18 +131,20 @@ describe('ReactComponent', function() {
131 var innerObj = {};
132 var outerObj = {};
133
133 - var Wrapper = React.createClass({
134 - getObject: function() {
134 + class Wrapper extends React.Component {
135 + getObject = () => {
136 return this.props.object;
136 - },
137 - render: function() {
137 + };
138 +
139 + render() {
140 return <div>{this.props.children}</div>;
139 - },
140 - });
141 + }
142 + }
143
144 var mounted = false;
143 - var Component = React.createClass({
144 - render: function() {
145 +
146 + class Component extends React.Component {
147 + render() {
148 var inner = <Wrapper object={innerObj} ref={(c) => this.innerRef = c} />;
149 var outer = (
150 <Wrapper object={outerObj} ref={(c) => this.outerRef = c}>
@@ -149,13 +152,14 @@ describe('ReactComponent', function() {
152 </Wrapper>
153 );
154 return outer;
152 - },
153 - componentDidMount: function() {
155 + }
156 +
157 + componentDidMount() {
158 expect(this.innerRef.getObject()).toEqual(innerObj);
159 expect(this.outerRef.getObject()).toEqual(outerObj);
160 mounted = true;
157 - },
158 - });
161 + }
162 + }
163
164 var instance = <Component />;
165 instance = ReactTestUtils.renderIntoDocument(instance);
@@ -163,23 +167,26 @@ describe('ReactComponent', function() {
167 });
168
169 it('should support new-style refs with mixed-up owners', function() {
166 - var Wrapper = React.createClass({
167 - getTitle: function() {
170 + class Wrapper extends React.Component {
171 + getTitle = () => {
172 return this.props.title;
169 - },
170 - render: function() {
173 + };
174 +
175 + render() {
176 return this.props.getContent();
172 - },
173 - });
177 + }
178 + }
179
180 var mounted = false;
176 - var Component = React.createClass({
177 - getInner: function() {
181 +
182 + class Component extends React.Component {
183 + getInner = () => {
184 // (With old-style refs, it's impossible to get a ref to this div
185 // because Wrapper is the current owner when this function is called.)
186 return <div title="inner" ref={(c) => this.innerRef = c} />;
181 - },
182 - render: function() {
187 + };
188 +
189 + render() {
190 return (
191 <Wrapper
192 title="wrapper"
@@ -187,14 +194,15 @@ describe('ReactComponent', function() {
194 getContent={this.getInner}
195 />
196 );
190 - },
191 - componentDidMount: function() {
197 + }
198 +
199 + componentDidMount() {
200 // Check .props.title to make sure we got the right elements back
201 expect(this.wrapperRef.getTitle()).toBe('wrapper');
202 expect(ReactDOM.findDOMNode(this.innerRef).title).toBe('inner');
203 mounted = true;
196 - },
197 - });
204 + }
205 + }
206
207 var instance = <Component />;
208 instance = ReactTestUtils.renderIntoDocument(instance);
@@ -204,24 +212,27 @@ describe('ReactComponent', function() {
212 it('should call refs at the correct time', function() {
213 var log = [];
214
207 - var Inner = React.createClass({
208 - render: function() {
215 + class Inner extends React.Component {
216 + render() {
217 log.push(`inner ${this.props.id} render`);
218 return <div />;
211 - },
212 - componentDidMount: function() {
219 + }
220 +
221 + componentDidMount() {
222 log.push(`inner ${this.props.id} componentDidMount`);
214 - },
215 - componentDidUpdate: function() {
223 + }
224 +
225 + componentDidUpdate() {
226 log.push(`inner ${this.props.id} componentDidUpdate`);
217 - },
218 - componentWillUnmount: function() {
227 + }
228 +
229 + componentWillUnmount() {
230 log.push(`inner ${this.props.id} componentWillUnmount`);
220 - },
221 - });
231 + }
232 + }
233
223 - var Outer = React.createClass({
224 - render: function() {
234 + class Outer extends React.Component {
235 + render() {
236 return (
237 <div>
238 <Inner id={1} ref={(c) => {
@@ -232,17 +243,20 @@ describe('ReactComponent', function() {
243 }}/>
244 </div>
245 );
235 - },
236 - componentDidMount: function() {
246 + }
247 +
248 + componentDidMount() {
249 log.push('outer componentDidMount');
238 - },
239 - componentDidUpdate: function() {
250 + }
251 +
252 + componentDidUpdate() {
253 log.push('outer componentDidUpdate');
241 - },
242 - componentWillUnmount: function() {
254 + }
255 +
256 + componentWillUnmount() {
257 log.push('outer componentWillUnmount');
244 - },
245 - });
258 + }
259 + }
260
261 // mount, update, unmount
262 var el = document.createElement('div');
src/renderers/shared/stack/reconciler/__tests__/ReactComponentLifeCycle-test.js
+101 -82
@@ -107,16 +107,17 @@ describe('ReactComponentLifeCycle', function() {
107
108 it('should not reuse an instance when it has been unmounted', function() {
109 var container = document.createElement('div');
110 - var StatefulComponent = React.createClass({
111 - getInitialState: function() {
112 - return {};
113 - },
114 - render: function() {
110 +
111 + class StatefulComponent extends React.Component {
112 + state = {};
113 +
114 + render() {
115 return (
116 <div></div>
117 );
118 - },
119 - });
118 + }
119 + }
120 +
121 var element = <StatefulComponent />;
122 var firstInstance = ReactDOM.render(element, container);
123 ReactDOM.unmountComponentAtNode(container);
@@ -129,31 +130,35 @@ describe('ReactComponentLifeCycle', function() {
130 * that second onDOMReady should not fail.
131 */
132 it('it should fire onDOMReady when already in onDOMReady', function() {
132 -
133 var _testJournal = [];
134
135 - var Child = React.createClass({
136 - componentDidMount: function() {
135 + class Child extends React.Component {
136 + componentDidMount() {
137 _testJournal.push('Child:onDOMReady');
138 - },
139 - render: function() {
138 + }
139 +
140 + render() {
141 return <div></div>;
141 - },
142 - });
142 + }
143 + }
144
144 - var SwitcherParent = React.createClass({
145 - getInitialState: function() {
145 + class SwitcherParent extends React.Component {
146 + constructor(props) {
147 + super(props);
148 _testJournal.push('SwitcherParent:getInitialState');
147 - return {showHasOnDOMReadyComponent: false};
148 - },
149 - componentDidMount: function() {
149 + this.state = {showHasOnDOMReadyComponent: false};
150 + }
151 +
152 + componentDidMount() {
153 _testJournal.push('SwitcherParent:onDOMReady');
154 this.switchIt();
152 - },
153 - switchIt: function() {
155 + }
156 +
157 + switchIt = () => {
158 this.setState({showHasOnDOMReadyComponent: true});
155 - },
156 - render: function() {
159 + };
160 +
161 + render() {
162 return (
163 <div>{
164 this.state.showHasOnDOMReadyComponent ?
@@ -161,8 +166,8 @@ describe('ReactComponentLifeCycle', function() {
166 <div> </div>
167 }</div>
168 );
164 - },
165 - });
169 + }
170 + }
171
172 var instance = <SwitcherParent />;
173 instance = ReactTestUtils.renderIntoDocument(instance);
@@ -176,16 +181,18 @@ describe('ReactComponentLifeCycle', function() {
181 // You could assign state here, but not access members of it, unless you
182 // had provided a getInitialState method.
183 it('throws when accessing state in componentWillMount', function() {
179 - var StatefulComponent = React.createClass({
180 - componentWillMount: function() {
184 + class StatefulComponent extends React.Component {
185 + componentWillMount() {
186 void this.state.yada;
182 - },
183 - render: function() {
187 + }
188 +
189 + render() {
190 return (
191 <div></div>
192 );
187 - },
188 - });
193 + }
194 + }
195 +
196 var instance = <StatefulComponent />;
197 expect(function() {
198 instance = ReactTestUtils.renderIntoDocument(instance);
@@ -193,16 +200,18 @@ describe('ReactComponentLifeCycle', function() {
200 });
201
202 it('should allow update state inside of componentWillMount', function() {
196 - var StatefulComponent = React.createClass({
197 - componentWillMount: function() {
203 + class StatefulComponent extends React.Component {
204 + componentWillMount() {
205 this.setState({stateField: 'something'});
199 - },
200 - render: function() {
206 + }
207 +
208 + render() {
209 return (
210 <div></div>
211 );
204 - },
205 - });
212 + }
213 + }
214 +
215 var instance = <StatefulComponent />;
216 expect(function() {
217 instance = ReactTestUtils.renderIntoDocument(instance);
@@ -211,18 +220,22 @@ describe('ReactComponentLifeCycle', function() {
220
221 it('should not allow update state inside of getInitialState', function() {
222 spyOn(console, 'error');
214 - var StatefulComponent = React.createClass({
215 - getInitialState: function() {
223 +
224 + class StatefulComponent extends React.Component {
225 + constructor(props, context) {
226 + super(props, context);
227 this.setState({stateField: 'something'});
228
218 - return {stateField: 'somethingelse'};
219 - },
220 - render: function() {
229 + this.state = {stateField: 'somethingelse'};
230 + }
231 +
232 + render() {
233 return (
234 <div></div>
235 );
224 - },
225 - });
236 + }
237 + }
238 +
239 ReactTestUtils.renderIntoDocument(<StatefulComponent />);
240 expect(console.error.calls.count()).toBe(1);
241 expect(console.error.calls.argsFor(0)[0]).toBe(
@@ -327,8 +340,9 @@ describe('ReactComponentLifeCycle', function() {
340 });
341
342 it('should carry through each of the phases of setup', function() {
330 - var LifeCycleComponent = React.createClass({
331 - getInitialState: function() {
343 + class LifeCycleComponent extends React.Component {
344 + constructor(props, context) {
345 + super(props, context);
346 this._testJournal = {};
347 var initState = {
348 hasWillMountCompleted: false,
@@ -339,24 +353,24 @@ describe('ReactComponentLifeCycle', function() {
353 this._testJournal.returnedFromGetInitialState = clone(initState);
354 this._testJournal.lifeCycleAtStartOfGetInitialState =
355 getLifeCycleState(this);
342 - return initState;
343 - },
356 + this.state = initState;
357 + }
358
345 - componentWillMount: function() {
359 + componentWillMount() {
360 this._testJournal.stateAtStartOfWillMount = clone(this.state);
361 this._testJournal.lifeCycleAtStartOfWillMount =
362 getLifeCycleState(this);
363 this.state.hasWillMountCompleted = true;
350 - },
364 + }
365
352 - componentDidMount: function() {
366 + componentDidMount() {
367 this._testJournal.stateAtStartOfDidMount = clone(this.state);
368 this._testJournal.lifeCycleAtStartOfDidMount =
369 getLifeCycleState(this);
370 this.setState({hasDidMountCompleted: true});
357 - },
371 + }
372
359 - render: function() {
373 + render() {
374 var isInitialRender = !this.state.hasRenderCompleted;
375 if (isInitialRender) {
376 this._testJournal.stateInInitialRender = clone(this.state);
@@ -372,15 +386,15 @@ describe('ReactComponentLifeCycle', function() {
386 I am the inner DIV
387 </div>
388 );
375 - },
389 + }
390
377 - componentWillUnmount: function() {
391 + componentWillUnmount() {
392 this._testJournal.stateAtStartOfWillUnmount = clone(this.state);
393 this._testJournal.lifeCycleAtStartOfWillUnmount =
394 getLifeCycleState(this);
395 this.state.hasWillUnmountCompleted = true;
382 - },
383 - });
396 + }
397 + }
398
399 // A component that is merely "constructed" (as in "constructor") but not
400 // yet initialized, or rendered.
@@ -445,25 +459,29 @@ describe('ReactComponentLifeCycle', function() {
459 });
460
461 it('should not throw when updating an auxiliary component', function() {
448 - var Tooltip = React.createClass({
449 - render: function() {
462 + class Tooltip extends React.Component {
463 + render() {
464 return <div>{this.props.children}</div>;
451 - },
452 - componentDidMount: function() {
465 + }
466 +
467 + componentDidMount() {
468 this.container = document.createElement('div');
469 this.updateTooltip();
455 - },
456 - componentDidUpdate: function() {
470 + }
471 +
472 + componentDidUpdate() {
473 this.updateTooltip();
458 - },
459 - updateTooltip: function() {
474 + }
475 +
476 + updateTooltip = () => {
477 // Even though this.props.tooltip has an owner, updating it shouldn't
478 // throw here because it's mounted as a root component
479 ReactDOM.render(this.props.tooltip, this.container);
463 - },
464 - });
465 - var Component = React.createClass({
466 - render: function() {
480 + };
481 + }
482 +
483 + class Component extends React.Component {
484 + render() {
485 return (
486 <Tooltip
487 ref="tooltip"
@@ -471,8 +489,8 @@ describe('ReactComponentLifeCycle', function() {
489 {this.props.text}
490 </Tooltip>
491 );
474 - },
475 - });
492 + }
493 + }
494
495 var container = document.createElement('div');
496 ReactDOM.render(
@@ -492,19 +510,20 @@ describe('ReactComponentLifeCycle', function() {
510 /**
511 * calls setState in an componentDidMount.
512 */
495 - var SetStateInComponentDidMount = React.createClass({
496 - getInitialState: function() {
497 - return {
498 - stateField: this.props.valueToUseInitially,
499 - };
500 - },
501 - componentDidMount: function() {
513 + class SetStateInComponentDidMount extends React.Component {
514 + state = {
515 + stateField: this.props.valueToUseInitially,
516 + };
517 +
518 + componentDidMount() {
519 this.setState({stateField: this.props.valueToUseInOnDOMReady});
503 - },
504 - render: function() {
520 + }
521 +
522 + render() {
523 return (<div></div>);
506 - },
507 - });
524 + }
525 + }
526 +
527 var instance =
528 <SetStateInComponentDidMount
529 valueToUseInitially="hello"
src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponent-test.js
+344 -349
@@ -36,38 +36,37 @@ describe('ReactCompositeComponent', function() {
36 ReactServerRendering = require('ReactServerRendering');
37 ReactUpdates = require('ReactUpdates');
38
39 - MorphingComponent = React.createClass({
40 - getInitialState: function() {
41 - return {activated: false};
42 - },
39 + MorphingComponent = class extends React.Component {
40 + state = {activated: false};
41
44 - _toggleActivatedState: function() {
42 + _toggleActivatedState = () => {
43 this.setState({activated: !this.state.activated});
46 - },
44 + };
45
48 - render: function() {
46 + render() {
47 var toggleActivatedState = this._toggleActivatedState;
48 return !this.state.activated ?
49 <a ref="x" onClick={toggleActivatedState} /> :
50 <b ref="x" onClick={toggleActivatedState} />;
53 - },
54 - });
51 + }
52 + };
53
54 /**
55 * We'll use this to ensure that an old version is not cached when it is
56 * reallocated again.
57 */
60 - ChildUpdates = React.createClass({
61 - getAnchor: function() {
58 + ChildUpdates = class extends React.Component {
59 + getAnchor = () => {
60 return this.refs.anch;
63 - },
64 - render: function() {
61 + };
62 +
63 + render() {
64 var className = this.props.anchorClassOn ? 'anchorClass' : '';
65 return this.props.renderAnchor ?
66 <a ref="anch" className={className}></a> :
67 <b></b>;
69 - },
70 - });
68 + }
69 + };
70 });
71
72 it('should support module pattern components', function() {
@@ -105,16 +104,17 @@ describe('ReactCompositeComponent', function() {
104 });
105
106 it('should not thrash a server rendered layout with client side one', () => {
108 - var Child = React.createClass({
109 - render: function() {
107 + class Child extends React.Component {
108 + render() {
109 return null;
111 - },
112 - });
113 - var Parent = React.createClass({
114 - render: function() {
110 + }
111 + }
112 +
113 + class Parent extends React.Component {
114 + render() {
115 return <div><Child /></div>;
116 - },
117 - });
116 + }
117 + }
118
119 var markup = ReactServerRendering.renderToString(<Parent />);
120 var container = document.createElement('div');
@@ -229,14 +229,13 @@ describe('ReactCompositeComponent', function() {
229 });
230
231 it('should use default values for undefined props', function() {
232 - var Component = React.createClass({
233 - getDefaultProps: function() {
234 - return {prop: 'testKey'};
235 - },
236 - render: function() {
232 + class Component extends React.Component {
233 + static defaultProps = {prop: 'testKey'};
234 +
235 + render() {
236 return <span />;
238 - },
239 - });
237 + }
238 + }
239
240 var instance1 = <Component />;
241 instance1 = ReactTestUtils.renderIntoDocument(instance1);
@@ -252,14 +251,13 @@ describe('ReactCompositeComponent', function() {
251 });
252
253 it('should not mutate passed-in props object', function() {
255 - var Component = React.createClass({
256 - getDefaultProps: function() {
257 - return {prop: 'testKey'};
258 - },
259 - render: function() {
254 + class Component extends React.Component {
255 + static defaultProps = {prop: 'testKey'};
256 +
257 + render() {
258 return <span />;
261 - },
262 - });
259 + }
260 + }
261
262 var inputProps = {};
263 var instance1 = <Component {...inputProps} />;
@@ -277,11 +275,11 @@ describe('ReactCompositeComponent', function() {
275 var container = document.createElement('div');
276 document.body.appendChild(container);
277
280 - var Component = React.createClass({
281 - render: function() {
278 + class Component extends React.Component {
279 + render() {
280 return <div />;
283 - },
284 - });
281 + }
282 + }
283
284 var instance = <Component />;
285 expect(instance.forceUpdate).not.toBeDefined();
@@ -311,15 +309,14 @@ describe('ReactCompositeComponent', function() {
309
310 var renders = 0;
311
314 - var Component = React.createClass({
315 - getInitialState: function() {
316 - return {value: 0};
317 - },
318 - render: function() {
312 + class Component extends React.Component {
313 + state = {value: 0};
314 +
315 + render() {
316 renders++;
317 return <div />;
321 - },
322 - });
318 + }
319 + }
320
321 var instance = <Component />;
322 expect(instance.setState).not.toBeDefined();
@@ -353,21 +350,21 @@ describe('ReactCompositeComponent', function() {
350 var container = document.createElement('div');
351 document.body.appendChild(container);
352
356 - var Component = React.createClass({
357 - getInitialState: function() {
358 - return {value: 0};
359 - },
360 - componentWillUnmount: function() {
353 + class Component extends React.Component {
354 + state = {value: 0};
355 +
356 + componentWillUnmount() {
357 expect(() => {
358 this.setState({value: 2}, function() {
359 cbCalled = true;
360 });
361 }).not.toThrow();
366 - },
367 - render: function() {
362 + }
363 +
364 + render() {
365 return <div />;
369 - },
370 - });
366 + }
367 + }
368
369 var instance = ReactDOM.render(<Component />, container);
370 instance.setState({value: 1});
@@ -385,19 +382,18 @@ describe('ReactCompositeComponent', function() {
382 var renderedState = -1;
383 var renderPasses = 0;
384
388 - var Component = React.createClass({
389 - getInitialState: function() {
390 - return {value: 0};
391 - },
392 - render: function() {
385 + class Component extends React.Component {
386 + state = {value: 0};
387 +
388 + render() {
389 renderPasses++;
390 renderedState = this.state.value;
391 if (this.state.value === 0) {
392 this.setState({ value: 1 });
393 }
394 return <div />;
399 - },
400 - });
395 + }
396 + }
397
398 expect(console.error.calls.count()).toBe(0);
399
@@ -433,20 +429,21 @@ describe('ReactCompositeComponent', function() {
429
430 var renderPasses = 0;
431
436 - var Component = React.createClass({
437 - getInitialState: function() {
438 - return {value: 0};
439 - },
440 - getChildContext: function() {
432 + class Component extends React.Component {
433 + state = {value: 0};
434 +
435 + getChildContext() {
436 if (this.state.value === 0) {
437 this.setState({ value: 1 });
438 }
444 - },
445 - render: function() {
439 + }
440 +
441 + render() {
442 renderPasses++;
443 return <div />;
448 - },
449 - });
444 + }
445 + }
446 +
447 expect(console.error.calls.count()).toBe(0);
448 var instance = ReactDOM.render(<Component />, container);
449 expect(renderPasses).toBe(2);
@@ -458,11 +455,12 @@ describe('ReactCompositeComponent', function() {
455 });
456
457 it('should cleanup even if render() fatals', function() {
461 - var BadComponent = React.createClass({
462 - render: function() {
458 + class BadComponent extends React.Component {
459 + render() {
460 throw new Error();
464 - },
465 - });
461 + }
462 + }
463 +
464 var instance = <BadComponent />;
465
466 expect(ReactCurrentOwner.current).toBe(null);
@@ -478,24 +476,26 @@ describe('ReactCompositeComponent', function() {
476 var container = document.createElement('div');
477 var innerUnmounted = false;
478
481 - var Component = React.createClass({
482 - render: function() {
479 + class Component extends React.Component {
480 + render() {
481 return (
482 <div>
483 <Inner />
484 Text
485 </div>
486 );
489 - },
490 - });
491 - var Inner = React.createClass({
492 - componentWillUnmount: function() {
487 + }
488 + }
489 +
490 + class Inner extends React.Component {
491 + componentWillUnmount() {
492 innerUnmounted = true;
494 - },
495 - render: function() {
493 + }
494 +
495 + render() {
496 return <div />;
497 - },
498 - });
497 + }
498 + }
499
500 ReactDOM.render(<Component />, container);
501 ReactDOM.unmountComponentAtNode(container);
@@ -505,19 +505,17 @@ describe('ReactCompositeComponent', function() {
505 it('should warn when shouldComponentUpdate() returns undefined', function() {
506 spyOn(console, 'error');
507
508 - var Component = React.createClass({
509 - getInitialState: function() {
510 - return {bogus: false};
511 - },
508 + class Component extends React.Component {
509 + state = {bogus: false};
510
513 - shouldComponentUpdate: function() {
511 + shouldComponentUpdate() {
512 return undefined;
515 - },
513 + }
514
517 - render: function() {
515 + render() {
516 return <div />;
519 - },
520 - });
517 + }
518 + }
519
520 var instance = ReactTestUtils.renderIntoDocument(<Component />);
521 instance.setState({bogus: true});
@@ -532,14 +530,14 @@ describe('ReactCompositeComponent', function() {
530 it('should warn when componentDidUnmount method is defined', function() {
531 spyOn(console, 'error');
532
535 - var Component = React.createClass({
536 - componentDidUnmount: function() {
537 - },
533 + class Component extends React.Component {
534 + componentDidUnmount = () => {
535 + };
536
539 - render: function() {
537 + render() {
538 return <div />;
541 - },
542 - });
539 + }
540 + }
541
542 ReactTestUtils.renderIntoDocument(<Component />);
543
@@ -552,56 +550,57 @@ describe('ReactCompositeComponent', function() {
550 });
551
552 it('should pass context to children when not owner', function() {
555 - var Parent = React.createClass({
556 - render: function() {
553 + class Parent extends React.Component {
554 + render() {
555 return <Child><Grandchild /></Child>;
558 - },
559 - });
556 + }
557 + }
558
561 - var Child = React.createClass({
562 - childContextTypes: {
559 + class Child extends React.Component {
560 + static childContextTypes = {
561 foo: ReactPropTypes.string,
564 - },
562 + };
563
566 - getChildContext: function() {
564 + getChildContext() {
565 return {
566 foo: 'bar',
567 };
570 - },
568 + }
569
572 - render: function() {
570 + render() {
571 return React.Children.only(this.props.children);
574 - },
575 - });
572 + }
573 + }
574
577 - var Grandchild = React.createClass({
578 - contextTypes: {
575 + class Grandchild extends React.Component {
576 + static contextTypes = {
577 foo: ReactPropTypes.string,
580 - },
578 + };
579
582 - render: function() {
580 + render() {
581 return <div>{this.context.foo}</div>;
584 - },
585 - });
582 + }
583 + }
584
585 var component = ReactTestUtils.renderIntoDocument(<Parent />);
586 expect(ReactDOM.findDOMNode(component).innerHTML).toBe('bar');
587 });
588
589 it('should skip update when rerendering element in container', function() {
592 - var Parent = React.createClass({
593 - render: function() {
590 + class Parent extends React.Component {
591 + render() {
592 return <div>{this.props.children}</div>;
595 - },
596 - });
593 + }
594 + }
595
596 var childRenders = 0;
599 - var Child = React.createClass({
600 - render: function() {
597 +
598 + class Child extends React.Component {
599 + render() {
600 childRenders++;
601 return <div />;
603 - },
604 - });
602 + }
603 + }
604
605 var container = document.createElement('div');
606 var child = <Child />;
@@ -615,47 +614,45 @@ describe('ReactCompositeComponent', function() {
614 var parentInstance = null;
615 var childInstance = null;
616
618 - var Parent = React.createClass({
619 - childContextTypes: {
617 + class Parent extends React.Component {
618 + static childContextTypes = {
619 foo: ReactPropTypes.string,
620 flag: ReactPropTypes.bool,
622 - },
621 + };
622
624 - getChildContext: function() {
623 + state = {
624 + flag: false,
625 + };
626 +
627 + getChildContext() {
628 return {
629 foo: 'bar',
630 flag: this.state.flag,
631 };
629 - },
630 -
631 - getInitialState: function() {
632 - return {
633 - flag: false,
634 - };
635 - },
632 + }
633
637 - render: function() {
634 + render() {
635 return React.Children.only(this.props.children);
639 - },
640 - });
636 + }
637 + }
638
642 - var Middle = React.createClass({
643 - render: function() {
639 + class Middle extends React.Component {
640 + render() {
641 return this.props.children;
645 - },
646 - });
642 + }
643 + }
644
648 - var Child = React.createClass({
649 - contextTypes: {
645 + class Child extends React.Component {
646 + static contextTypes = {
647 foo: ReactPropTypes.string,
648 flag: ReactPropTypes.bool,
652 - },
649 + };
650
654 - render: function() {
651 + render() {
652 childInstance = this;
653 return <span>Child</span>;
657 - },
658 - });
654 + }
655 + }
656
657 parentInstance = ReactTestUtils.renderIntoDocument(
658 <Parent><Middle><Child /></Middle></Parent>
@@ -671,48 +668,45 @@ describe('ReactCompositeComponent', function() {
668 });
669
670 it('should pass context when re-rendered for static child within a composite component', function() {
674 - var Parent = React.createClass({
675 - childContextTypes: {
671 + class Parent extends React.Component {
672 + static childContextTypes = {
673 flag: ReactPropTypes.bool,
677 - },
674 + };
675 +
676 + state = {
677 + flag: true,
678 + };
679
680 getChildContext() {
681 return {
682 flag: this.state.flag,
683 };
683 - },
684 -
685 - getInitialState: function() {
686 - return {
687 - flag: true,
688 - };
689 - },
684 + }
685
686 render() {
687 return <div>{this.props.children}</div>;
693 - },
694 -
695 - });
688 + }
689 + }
690
697 - var Child = React.createClass({
698 - contextTypes: {
691 + class Child extends React.Component {
692 + static contextTypes = {
693 flag: ReactPropTypes.bool,
700 - },
694 + };
695
702 - render: function() {
696 + render() {
697 return <div />;
704 - },
705 - });
698 + }
699 + }
700
707 - var Wrapper = React.createClass({
701 + class Wrapper extends React.Component {
702 render() {
703 return (
704 <Parent ref="parent">
705 <Child ref="child" />
706 </Parent>
707 );
714 - },
715 - });
708 + }
709 + }
710
711
712 var wrapper = ReactTestUtils.renderIntoDocument(
@@ -727,64 +721,63 @@ describe('ReactCompositeComponent', function() {
721
722 expect(wrapper.refs.parent.state.flag).toEqual(false);
723 reactComponentExpect(wrapper.refs.child).scalarContextEqual({flag: false});
730 -
724 });
725
726 it('should pass context transitively', function() {
727 var childInstance = null;
728 var grandchildInstance = null;
729
737 - var Parent = React.createClass({
738 - childContextTypes: {
730 + class Parent extends React.Component {
731 + static childContextTypes = {
732 foo: ReactPropTypes.string,
733 depth: ReactPropTypes.number,
741 - },
734 + };
735
743 - getChildContext: function() {
736 + getChildContext() {
737 return {
738 foo: 'bar',
739 depth: 0,
740 };
748 - },
741 + }
742
750 - render: function() {
743 + render() {
744 return <Child />;
752 - },
753 - });
745 + }
746 + }
747
755 - var Child = React.createClass({
756 - contextTypes: {
748 + class Child extends React.Component {
749 + static contextTypes = {
750 foo: ReactPropTypes.string,
751 depth: ReactPropTypes.number,
759 - },
752 + };
753
761 - childContextTypes: {
754 + static childContextTypes = {
755 depth: ReactPropTypes.number,
763 - },
756 + };
757
765 - getChildContext: function() {
758 + getChildContext() {
759 return {
760 depth: this.context.depth + 1,
761 };
769 - },
762 + }
763
771 - render: function() {
764 + render() {
765 childInstance = this;
766 return <Grandchild />;
774 - },
775 - });
767 + }
768 + }
769
777 - var Grandchild = React.createClass({
778 - contextTypes: {
770 + class Grandchild extends React.Component {
771 + static contextTypes = {
772 foo: ReactPropTypes.string,
773 depth: ReactPropTypes.number,
781 - },
774 + };
775
783 - render: function() {
776 + render() {
777 grandchildInstance = this;
778 return <div />;
786 - },
787 - });
779 + }
780 + }
781
782 ReactTestUtils.renderIntoDocument(<Parent />);
783 reactComponentExpect(childInstance).scalarContextEqual({foo: 'bar', depth: 0});
@@ -795,45 +788,43 @@ describe('ReactCompositeComponent', function() {
788 var parentInstance = null;
789 var childInstance = null;
790
798 - var Parent = React.createClass({
799 - childContextTypes: {
791 + class Parent extends React.Component {
792 + static childContextTypes = {
793 foo: ReactPropTypes.string,
794 depth: ReactPropTypes.number,
802 - },
795 + };
796 +
797 + state = {
798 + flag: false,
799 + };
800
804 - getChildContext: function() {
801 + getChildContext() {
802 return {
803 foo: 'bar',
804 depth: 0,
805 };
809 - },
810 -
811 - getInitialState: function() {
812 - return {
813 - flag: false,
814 - };
815 - },
806 + }
807
817 - render: function() {
808 + render() {
809 var output = <Child />;
810 if (!this.state.flag) {
811 output = <span>Child</span>;
812 }
813 return output;
823 - },
824 - });
814 + }
815 + }
816
826 - var Child = React.createClass({
827 - contextTypes: {
817 + class Child extends React.Component {
818 + static contextTypes = {
819 foo: ReactPropTypes.string,
820 depth: ReactPropTypes.number,
830 - },
821 + };
822
832 - render: function() {
823 + render() {
824 childInstance = this;
825 return <span>Child</span>;
835 - },
836 - });
826 + }
827 + }
828
829 parentInstance = ReactTestUtils.renderIntoDocument(<Parent />);
830 expect(childInstance).toBeNull();
@@ -848,65 +839,63 @@ describe('ReactCompositeComponent', function() {
839 });
840
841 it('unmasked context propagates through updates', function() {
851 -
852 - var Leaf = React.createClass({
853 - contextTypes: {
842 + class Leaf extends React.Component {
843 + static contextTypes = {
844 foo: ReactPropTypes.string.isRequired,
855 - },
845 + };
846
857 - componentWillReceiveProps: function(nextProps, nextContext) {
847 + componentWillReceiveProps(nextProps, nextContext) {
848 expect('foo' in nextContext).toBe(true);
859 - },
849 + }
850
861 - componentDidUpdate: function(prevProps, prevState, prevContext) {
851 + componentDidUpdate(prevProps, prevState, prevContext) {
852 expect('foo' in prevContext).toBe(true);
863 - },
853 + }
854
865 - shouldComponentUpdate: function(nextProps, nextState, nextContext) {
855 + shouldComponentUpdate(nextProps, nextState, nextContext) {
856 expect('foo' in nextContext).toBe(true);
857 return true;
868 - },
858 + }
859
870 - render: function() {
860 + render() {
861 return <span>{this.context.foo}</span>;
872 - },
873 - });
874 -
875 - var Intermediary = React.createClass({
862 + }
863 + }
864
877 - componentWillReceiveProps: function(nextProps, nextContext) {
865 + class Intermediary extends React.Component {
866 + componentWillReceiveProps(nextProps, nextContext) {
867 expect('foo' in nextContext).toBe(false);
879 - },
868 + }
869
881 - componentDidUpdate: function(prevProps, prevState, prevContext) {
870 + componentDidUpdate(prevProps, prevState, prevContext) {
871 expect('foo' in prevContext).toBe(false);
883 - },
872 + }
873
885 - shouldComponentUpdate: function(nextProps, nextState, nextContext) {
874 + shouldComponentUpdate(nextProps, nextState, nextContext) {
875 expect('foo' in nextContext).toBe(false);
876 return true;
888 - },
877 + }
878
890 - render: function() {
879 + render() {
880 return <Leaf />;
892 - },
893 - });
881 + }
882 + }
883
895 - var Parent = React.createClass({
896 - childContextTypes: {
884 + class Parent extends React.Component {
885 + static childContextTypes = {
886 foo: ReactPropTypes.string,
898 - },
887 + };
888
900 - getChildContext: function() {
889 + getChildContext() {
890 return {
891 foo: this.props.cntxt,
892 };
904 - },
893 + }
894
906 - render: function() {
895 + render() {
896 return <Intermediary />;
908 - },
909 - });
897 + }
898 + }
899
900 var div = document.createElement('div');
901 ReactDOM.render(<Parent cntxt="noise" />, div);
@@ -924,12 +913,12 @@ describe('ReactCompositeComponent', function() {
913 var contextChanges = 0;
914 var propChanges = 0;
915
927 - var GrandChild = React.createClass({
928 - contextTypes: {
916 + class GrandChild extends React.Component {
917 + static contextTypes = {
918 foo: ReactPropTypes.string.isRequired,
930 - },
919 + };
920
932 - componentWillReceiveProps: function(nextProps, nextContext) {
921 + componentWillReceiveProps(nextProps, nextContext) {
922 expect('foo' in nextContext).toBe(true);
923
924 if (nextProps !== this.props) {
@@ -939,19 +928,19 @@ describe('ReactCompositeComponent', function() {
928 if (nextContext !== this.context) {
929 contextChanges++;
930 }
942 - },
931 + }
932
944 - render: function() {
933 + render() {
934 return <span className="grand-child">{this.props.children}</span>;
946 - },
947 - });
935 + }
936 + }
937
949 - var ChildWithContext = React.createClass({
950 - contextTypes: {
938 + class ChildWithContext extends React.Component {
939 + static contextTypes = {
940 foo: ReactPropTypes.string.isRequired,
952 - },
941 + };
942
954 - componentWillReceiveProps: function(nextProps, nextContext) {
943 + componentWillReceiveProps(nextProps, nextContext) {
944 expect('foo' in nextContext).toBe(true);
945
946 if (nextProps !== this.props) {
@@ -961,15 +950,15 @@ describe('ReactCompositeComponent', function() {
950 if (nextContext !== this.context) {
951 contextChanges++;
952 }
964 - },
953 + }
954
966 - render: function() {
955 + render() {
956 return <div className="child-with">{this.props.children}</div>;
968 - },
969 - });
957 + }
958 + }
959
971 - var ChildWithoutContext = React.createClass({
972 - componentWillReceiveProps: function(nextProps, nextContext) {
960 + class ChildWithoutContext extends React.Component {
961 + componentWillReceiveProps(nextProps, nextContext) {
962 expect('foo' in nextContext).toBe(false);
963
964 if (nextProps !== this.props) {
@@ -979,40 +968,38 @@ describe('ReactCompositeComponent', function() {
968 if (nextContext !== this.context) {
969 contextChanges++;
970 }
982 - },
971 + }
972
984 - render: function() {
973 + render() {
974 return <div className="child-without">{this.props.children}</div>;
986 - },
987 - });
975 + }
976 + }
977
989 - var Parent = React.createClass({
990 - childContextTypes: {
978 + class Parent extends React.Component {
979 + static childContextTypes = {
980 foo: ReactPropTypes.string,
992 - },
981 + };
982
994 - getInitialState() {
995 - return {
996 - foo: 'abc',
997 - };
998 - },
983 + state = {
984 + foo: 'abc',
985 + };
986
1000 - getChildContext: function() {
987 + getChildContext() {
988 return {
989 foo: this.state.foo,
990 };
1004 - },
991 + }
992
1006 - onClick() {
993 + onClick = () => {
994 this.setState({
995 foo: 'def',
996 });
1010 - },
997 + };
998
1012 - render: function() {
999 + render() {
1000 return <div className="parent" onClick={this.onClick}>{this.props.children}</div>;
1014 - },
1015 - });
1001 + }
1002 + }
1003
1004 var div = document.createElement('div');
1005
@@ -1040,17 +1027,18 @@ describe('ReactCompositeComponent', function() {
1027 it('should disallow nested render calls', function() {
1028 spyOn(console, 'error');
1029
1043 - var Inner = React.createClass({
1044 - render: function() {
1030 + class Inner extends React.Component {
1031 + render() {
1032 return <div />;
1046 - },
1047 - });
1048 - var Outer = React.createClass({
1049 - render: function() {
1033 + }
1034 + }
1035 +
1036 + class Outer extends React.Component {
1037 + render() {
1038 ReactTestUtils.renderIntoDocument(<Inner />);
1039 return <div />;
1052 - },
1053 - });
1040 + }
1041 + }
1042
1043 ReactTestUtils.renderIntoDocument(<Outer />);
1044 expect(console.error.calls.count()).toBe(1);
@@ -1064,19 +1052,20 @@ describe('ReactCompositeComponent', function() {
1052
1053 it('only renders once if updated in componentWillReceiveProps', function() {
1054 var renders = 0;
1067 - var Component = React.createClass({
1068 - getInitialState: function() {
1069 - return {updated: false};
1070 - },
1071 - componentWillReceiveProps: function(props) {
1055 +
1056 + class Component extends React.Component {
1057 + state = {updated: false};
1058 +
1059 + componentWillReceiveProps(props) {
1060 expect(props.update).toBe(1);
1061 this.setState({updated: true});
1074 - },
1075 - render: function() {
1062 + }
1063 +
1064 + render() {
1065 renders++;
1066 return <div />;
1078 - },
1079 - });
1067 + }
1068 + }
1069
1070 var container = document.createElement('div');
1071 var instance = ReactDOM.render(<Component update={0} />, container);
@@ -1088,16 +1077,18 @@ describe('ReactCompositeComponent', function() {
1077 });
1078
1079 it('should update refs if shouldComponentUpdate gives false', function() {
1091 - var Static = React.createClass({
1092 - shouldComponentUpdate: function() {
1080 + class Static extends React.Component {
1081 + shouldComponentUpdate() {
1082 return false;
1094 - },
1095 - render: function() {
1083 + }
1084 +
1085 + render() {
1086 return <div>{this.props.children}</div>;
1097 - },
1098 - });
1099 - var Component = React.createClass({
1100 - render: function() {
1087 + }
1088 + }
1089 +
1090 + class Component extends React.Component {
1091 + render() {
1092 if (this.props.flipped) {
1093 return (
1094 <div>
@@ -1113,8 +1104,8 @@ describe('ReactCompositeComponent', function() {
1104 </div>
1105 );
1106 }
1116 - },
1117 - });
1107 + }
1108 + }
1109
1110 var container = document.createElement('div');
1111 var comp = ReactDOM.render(<Component flipped={false} />, container);
@@ -1131,19 +1122,23 @@ describe('ReactCompositeComponent', function() {
1122 it('should allow access to findDOMNode in componentWillUnmount', function() {
1123 var a = null;
1124 var b = null;
1134 - var Component = React.createClass({
1135 - componentDidMount: function() {
1125 +
1126 + class Component extends React.Component {
1127 + componentDidMount() {
1128 a = ReactDOM.findDOMNode(this);
1129 expect(a).not.toBe(null);
1138 - },
1139 - componentWillUnmount: function() {
1130 + }
1131 +
1132 + componentWillUnmount() {
1133 b = ReactDOM.findDOMNode(this);
1134 expect(b).not.toBe(null);
1142 - },
1143 - render: function() {
1135 + }
1136 +
1137 + render() {
1138 return <div />;
1145 - },
1146 - });
1139 + }
1140 + }
1141 +
1142 var container = document.createElement('div');
1143 expect(a).toBe(container.firstChild);
1144 ReactDOM.render(<Component />, container);
@@ -1152,31 +1147,31 @@ describe('ReactCompositeComponent', function() {
1147 });
1148
1149 it('context should be passed down from the parent', function() {
1155 - var Parent = React.createClass({
1156 - childContextTypes: {
1150 + class Parent extends React.Component {
1151 + static childContextTypes = {
1152 foo: ReactPropTypes.string,
1158 - },
1153 + };
1154
1160 - getChildContext: function() {
1155 + getChildContext() {
1156 return {
1157 foo: 'bar',
1158 };
1164 - },
1159 + }
1160
1166 - render: function() {
1161 + render() {
1162 return <div>{this.props.children}</div>;
1168 - },
1169 - });
1163 + }
1164 + }
1165
1171 - var Component = React.createClass({
1172 - contextTypes: {
1166 + class Component extends React.Component {
1167 + static contextTypes = {
1168 foo: ReactPropTypes.string.isRequired,
1174 - },
1169 + };
1170
1176 - render: function() {
1171 + render() {
1172 return <div />;
1178 - },
1179 - });
1173 + }
1174 + }
1175
1176 var div = document.createElement('div');
1177 ReactDOM.render(<Parent><Component /></Parent>, div);
@@ -1251,25 +1246,25 @@ describe('ReactCompositeComponent', function() {
1246 var container = document.createElement('div');
1247 var layer = document.createElement('div');
1248
1254 - var Component = React.createClass({
1255 - componentWillMount: function() {
1249 + class Component extends React.Component {
1250 + componentWillMount() {
1251 ReactDOM.render(<div />, layer);
1257 - },
1252 + }
1253
1259 - componentWillUnmount: function() {
1254 + componentWillUnmount() {
1255 ReactDOM.unmountComponentAtNode(layer);
1261 - },
1256 + }
1257
1263 - render: function() {
1258 + render() {
1259 return <div />;
1265 - },
1266 - });
1260 + }
1261 + }
1262
1268 - var Outer = React.createClass({
1269 - render: function() {
1263 + class Outer extends React.Component {
1264 + render() {
1265 return <div>{this.props.children}</div>;
1271 - },
1272 - });
1266 + }
1267 + }
1268
1269 ReactDOM.render(<Outer><Component /></Outer>, container);
1270 ReactDOM.render(<Outer />, container);
src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentDOMMinimalism-test.js
+8 -8
@@ -34,25 +34,25 @@ describe('ReactCompositeComponentDOMMinimalism', function() {
34 React = require('React');
35 ReactTestUtils = require('ReactTestUtils');
36
37 - LowerLevelComposite = React.createClass({
38 - render: function() {
37 + LowerLevelComposite = class extends React.Component {
38 + render() {
39 return (
40 <div>
41 {this.props.children}
42 </div>
43 );
44 - },
45 - });
44 + }
45 + };
46
47 - MyCompositeComponent = React.createClass({
48 - render: function() {
47 + MyCompositeComponent = class extends React.Component {
48 + render() {
49 return (
50 <LowerLevelComposite>
51 {this.props.children}
52 </LowerLevelComposite>
53 );
54 - },
55 - });
54 + }
55 + };
56
57 expectSingleChildlessDiv = function(instance) {
58 reactComponentExpect(instance)
src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentNestedState-test.js
+18 -19
@@ -24,19 +24,17 @@ describe('ReactCompositeComponentNestedState-state', function() {
24 });
25
26 it('should provide up to date values for props', function() {
27 - var ParentComponent = React.createClass({
28 - getInitialState: function() {
29 - return {color: 'blue'};
30 - },
27 + class ParentComponent extends React.Component {
28 + state = {color: 'blue'};
29
32 - handleColor: function(color) {
30 + handleColor = (color) => {
31 this.props.logger('parent-handleColor', this.state.color);
32 this.setState({color: color}, function() {
33 this.props.logger('parent-after-setState', this.state.color);
34 });
37 - },
35 + };
36
39 - render: function() {
37 + render() {
38 this.props.logger('parent-render', this.state.color);
39 return (
40 <ChildComponent
@@ -45,16 +43,17 @@ describe('ReactCompositeComponentNestedState-state', function() {
43 onSelectColor={this.handleColor}
44 />
45 );
48 - },
49 - });
46 + }
47 + }
48
51 - var ChildComponent = React.createClass({
52 - getInitialState: function() {
53 - this.props.logger('getInitialState', this.props.color);
54 - return {hue: 'dark ' + this.props.color};
55 - },
49 + class ChildComponent extends React.Component {
50 + constructor(props) {
51 + super(props);
52 + props.logger('getInitialState', props.color);
53 + this.state = {hue: 'dark ' + props.color};
54 + }
55
57 - handleHue: function(shade, color) {
56 + handleHue = (shade, color) => {
57 this.props.logger('handleHue', this.state.hue, this.props.color);
58 this.props.onSelectColor(color);
59 this.setState(function(state, props) {
@@ -64,9 +63,9 @@ describe('ReactCompositeComponentNestedState-state', function() {
63 }, function() {
64 this.props.logger('after-setState', this.state.hue, this.props.color);
65 });
67 - },
66 + };
67
69 - render: function() {
68 + render() {
69 this.props.logger('render', this.state.hue, this.props.color);
70 return (
71 <div>
@@ -84,8 +83,8 @@ describe('ReactCompositeComponentNestedState-state', function() {
83 </button>
84 </div>
85 );
87 - },
88 - });
86 + }
87 + }
88
89 var container = document.createElement('div');
90 document.body.appendChild(container);
src/renderers/shared/stack/reconciler/__tests__/ReactCompositeComponentState-test.js
+15 -13
@@ -218,24 +218,26 @@ describe('ReactCompositeComponent-state', function() {
218
219 it('should batch unmounts', function() {
220 var outer;
221 - var Inner = React.createClass({
222 - render: function() {
221 +
222 + class Inner extends React.Component {
223 + render() {
224 return <div />;
224 - },
225 - componentWillUnmount: function() {
225 + }
226 +
227 + componentWillUnmount() {
228 // This should get silently ignored (maybe with a warning), but it
229 // shouldn't break React.
230 outer.setState({showInner: false});
229 - },
230 - });
231 - var Outer = React.createClass({
232 - getInitialState: function() {
233 - return {showInner: true};
234 - },
235 - render: function() {
231 + }
232 + }
233 +
234 + class Outer extends React.Component {
235 + state = {showInner: true};
236 +
237 + render() {
238 return <div>{this.state.showInner && <Inner />}</div>;
237 - },
238 - });
239 + }
240 + }
241
242 var container = document.createElement('div');
243 outer = ReactDOM.render(<Outer />, container);
src/renderers/shared/stack/reconciler/__tests__/ReactEmptyComponent-test.js
+64 -55
@@ -32,35 +32,37 @@ describe('ReactEmptyComponent', function() {
32
33 log = jasmine.createSpy();
34
35 - TogglingComponent = React.createClass({
36 - getInitialState: function() {
37 - return {component: this.props.firstComponent};
38 - },
39 - componentDidMount: function() {
35 + TogglingComponent = class extends React.Component {
36 + state = {component: this.props.firstComponent};
37 +
38 + componentDidMount() {
39 log(ReactDOM.findDOMNode(this));
40 this.setState({component: this.props.secondComponent});
42 - },
43 - componentDidUpdate: function() {
41 + }
42 +
43 + componentDidUpdate() {
44 log(ReactDOM.findDOMNode(this));
45 - },
46 - render: function() {
45 + }
46 +
47 + render() {
48 var Component = this.state.component;
49 return Component ? <Component /> : null;
49 - },
50 - });
50 + }
51 + };
52 });
53
54 it('should render null and false as a noscript tag under the hood', () => {
54 - var Component1 = React.createClass({
55 - render: function() {
55 + class Component1 extends React.Component {
56 + render() {
57 return null;
57 - },
58 - });
59 - var Component2 = React.createClass({
60 - render: function() {
58 + }
59 + }
60 +
61 + class Component2 extends React.Component {
62 + render() {
63 return false;
62 - },
63 - });
64 + }
65 + }
66
67 var instance1 = ReactTestUtils.renderIntoDocument(<Component1 />);
68 var instance2 = ReactTestUtils.renderIntoDocument(<Component2 />);
@@ -73,9 +75,10 @@ describe('ReactEmptyComponent', function() {
75 });
76
77 it('should still throw when rendering to undefined', () => {
76 - var Component = React.createClass({
77 - render: function() {},
78 - });
78 + class Component extends React.Component {
79 + render() {}
80 + }
81 +
82 expect(function() {
83 ReactTestUtils.renderIntoDocument(<Component />);
84 }).toThrowError(
@@ -161,17 +164,17 @@ describe('ReactEmptyComponent', function() {
164 it('should have findDOMNode return null when multiple layers of composite ' +
165 'components render to the same null placeholder',
166 () => {
164 - var GrandChild = React.createClass({
165 - render: function() {
167 + class GrandChild extends React.Component {
168 + render() {
169 return null;
167 - },
168 - });
170 + }
171 + }
172
170 - var Child = React.createClass({
171 - render: function() {
173 + class Child extends React.Component {
174 + render() {
175 return <GrandChild />;
173 - },
174 - });
176 + }
177 + }
178
179 var instance1 =
180 <TogglingComponent
@@ -201,28 +204,32 @@ describe('ReactEmptyComponent', function() {
204
205 it('works when switching components', function() {
206 var assertions = 0;
204 - var Inner = React.createClass({
205 - render: function() {
207 +
208 + class Inner extends React.Component {
209 + render() {
210 return <span />;
207 - },
208 - componentDidMount: function() {
211 + }
212 +
213 + componentDidMount() {
214 // Make sure the DOM node resolves properly even if we're replacing a
215 // `null` component
216 expect(ReactDOM.findDOMNode(this)).not.toBe(null);
217 assertions++;
213 - },
214 - componentWillUnmount: function() {
218 + }
219 +
220 + componentWillUnmount() {
221 // Even though we're getting replaced by `null`, we haven't been
222 // replaced yet!
223 expect(ReactDOM.findDOMNode(this)).not.toBe(null);
224 assertions++;
219 - },
220 - });
221 - var Wrapper = React.createClass({
222 - render: function() {
225 + }
226 + }
227 +
228 + class Wrapper extends React.Component {
229 + render() {
230 return this.props.showInner ? <Inner /> : null;
224 - },
225 - });
231 + }
232 + }
233
234 var el = document.createElement('div');
235 var component;
@@ -253,25 +260,27 @@ describe('ReactEmptyComponent', function() {
260 });
261
262 it('does not break when updating during mount', function() {
256 - var Child = React.createClass({
263 + class Child extends React.Component {
264 componentDidMount() {
265 if (this.props.onMount) {
266 this.props.onMount();
267 }
261 - },
268 + }
269 +
270 render() {
271 if (!this.props.visible) {
272 return null;
273 }
274
275 return <div>hello world</div>;
268 - },
269 - });
276 + }
277 + }
278
271 - var Parent = React.createClass({
272 - update() {
279 + class Parent extends React.Component {
280 + update = () => {
281 this.forceUpdate();
274 - },
282 + };
283 +
284 render() {
285 return (
286 <div>
@@ -280,8 +289,8 @@ describe('ReactEmptyComponent', function() {
289 <Child key="2" visible={false} />
290 </div>
291 );
283 - },
284 - });
292 + }
293 + }
294
295 expect(function() {
296 ReactTestUtils.renderIntoDocument(<Parent />);
@@ -289,11 +298,11 @@ describe('ReactEmptyComponent', function() {
298 });
299
300 it('preserves the dom node during updates', function() {
292 - var Empty = React.createClass({
293 - render: function() {
301 + class Empty extends React.Component {
302 + render() {
303 return null;
295 - },
296 - });
304 + }
305 + }
306
307 var container = document.createElement('div');
308
src/renderers/shared/stack/reconciler/__tests__/ReactIdentity-test.js
+43 -59
@@ -48,12 +48,11 @@ describe('ReactIdentity', function() {
48 });
49
50 it('should use composite identity', function() {
51 -
52 - var Wrapper = React.createClass({
53 - render: function() {
51 + class Wrapper extends React.Component {
52 + render() {
53 return <a>{this.props.children}</a>;
55 - },
56 - });
54 + }
55 + }
56
57 var container = document.createElement('div');
58 var node1;
@@ -71,19 +70,16 @@ describe('ReactIdentity', function() {
70 });
71
72 function renderAComponentWithKeyIntoContainer(key, container) {
74 -
75 - var Wrapper = React.createClass({
76 -
77 - render: function() {
73 + class Wrapper extends React.Component {
74 + render() {
75 var s1 = <span ref="span1" key={key} />;
76 var s2 = <span ref="span2" />;
77
78 var map = {};
79 map[key] = s2;
80 return <div>{[s1, frag(map)]}</div>;
84 - },
85 -
86 - });
81 + }
82 + }
83
84 var instance = ReactDOM.render(<Wrapper />, container);
85 var span1 = instance.refs.span1;
@@ -135,8 +131,8 @@ describe('ReactIdentity', function() {
131 var instance1 = <span />;
132 var instance2 = <span />;
133
138 - var TestComponent = React.createClass({
139 - render: function() {
134 + class TestComponent extends React.Component {
135 + render() {
136 return (
137 <div>
138 {instance2}
@@ -144,16 +140,14 @@ describe('ReactIdentity', function() {
140 {this.props.children[1]}
141 </div>
142 );
147 - },
148 - });
143 + }
144 + }
145
150 - var TestContainer = React.createClass({
151 -
152 - render: function() {
146 + class TestContainer extends React.Component {
147 + render() {
148 return <TestComponent>{instance0}{instance1}</TestComponent>;
154 - },
155 -
156 - });
149 + }
150 + }
151
152 expect(function() {
153
@@ -167,8 +161,8 @@ describe('ReactIdentity', function() {
161 var instance1 = <span />;
162 var instance2 = <span />;
163
170 - var TestComponent = React.createClass({
171 - render: function() {
164 + class TestComponent extends React.Component {
165 + render() {
166 return (
167 <div>
168 {instance2}
@@ -176,20 +170,18 @@ describe('ReactIdentity', function() {
170 {this.props.children[1]}
171 </div>
172 );
179 - },
180 - });
181 -
182 - var TestContainer = React.createClass({
173 + }
174 + }
175
184 - render: function() {
176 + class TestContainer extends React.Component {
177 + render() {
178 return (
179 <div>
180 <TestComponent>{instance0}{instance1}</TestComponent>
181 </div>
182 );
190 - },
191 -
192 - });
183 + }
184 + }
185
186 expect(function() {
187
@@ -199,24 +191,22 @@ describe('ReactIdentity', function() {
191 });
192
193 it('should let text nodes retain their uniqueness', function() {
202 - var TestComponent = React.createClass({
203 - render: function() {
194 + class TestComponent extends React.Component {
195 + render() {
196 return <div>{this.props.children}<span /></div>;
205 - },
206 - });
207 -
208 - var TestContainer = React.createClass({
197 + }
198 + }
199
210 - render: function() {
200 + class TestContainer extends React.Component {
201 + render() {
202 return (
203 <TestComponent>
204 <div />
205 {'second'}
206 </TestComponent>
207 );
217 - },
218 -
219 - });
208 + }
209 + }
210
211 expect(function() {
212
@@ -226,33 +216,28 @@ describe('ReactIdentity', function() {
216 });
217
218 it('should retain key during updates in composite components', function() {
229 -
230 - var TestComponent = React.createClass({
231 - render: function() {
219 + class TestComponent extends React.Component {
220 + render() {
221 return <div>{this.props.children}</div>;
233 - },
234 - });
222 + }
223 + }
224
236 - var TestContainer = React.createClass({
225 + class TestContainer extends React.Component {
226 + state = {swapped: false};
227
238 - getInitialState: function() {
239 - return {swapped: false};
240 - },
241 -
242 - swap: function() {
228 + swap = () => {
229 this.setState({swapped: true});
244 - },
230 + };
231
246 - render: function() {
232 + render() {
233 return (
234 <TestComponent>
235 {this.state.swapped ? this.props.second : this.props.first}
236 {this.state.swapped ? this.props.first : this.props.second}
237 </TestComponent>
238 );
253 - },
254 -
255 - });
239 + }
240 + }
241
242 var instance0 = <span key="A" />;
243 var instance1 = <span key="B" />;
@@ -270,7 +255,6 @@ describe('ReactIdentity', function() {
255
256 expect(beforeA).toBe(afterA);
257 expect(beforeB).toBe(afterB);
273 -
258 });
259
260 it('should not allow implicit and explicit keys to collide', function() {
src/renderers/shared/stack/reconciler/__tests__/ReactMockedComponent-test.js
+14 -21
@@ -36,21 +36,17 @@ describe('ReactMockedComponent', function() {
36 });
37
38 it('should allow an implicitly mocked component to be updated', () => {
39 - var Wrapper = React.createClass({
39 + class Wrapper extends React.Component {
40 + state = {foo: 1};
41
41 - getInitialState: function() {
42 - return {foo: 1};
43 - },
44 -
45 - update: function() {
42 + update = () => {
43 this.setState({foo: 2});
47 - },
44 + };
45
49 - render: function() {
46 + render() {
47 return <div><AutoMockedComponent prop={this.state.foo} /></div>;
51 - },
52 -
53 - });
48 + }
49 + }
50
51 var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
52
@@ -73,21 +69,18 @@ describe('ReactMockedComponent', function() {
69 });
70
71 it('should allow an explicitly mocked component to be updated', () => {
76 - var Wrapper = React.createClass({
77 -
78 - getInitialState: function() {
79 - return {foo: 1};
80 - },
72 + class Wrapper extends React.Component {
73 + state = {foo: 1};
74
82 - update: function() {
75 + update = () => {
76 this.setState({foo: 2});
84 - },
77 + };
78
86 - render: function() {
79 + render() {
80 return <div><MockedComponent prop={this.state.foo} /></div>;
88 - },
81 + }
82 + }
83
90 - });
84 var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
85
86 var found = ReactTestUtils.findRenderedComponentWithType(
src/renderers/shared/stack/reconciler/__tests__/ReactMultiChild-test.js
+12 -12
@@ -101,11 +101,11 @@ describe('ReactMultiChild', function() {
101 },
102 });
103
104 - var WrapperComponent = React.createClass({
105 - render: function() {
104 + class WrapperComponent extends React.Component {
105 + render() {
106 return this.props.children || <MockComponent />;
107 - },
108 - });
107 + }
108 + }
109
110 expect(mockMount.mock.calls.length).toBe(0);
111 expect(mockUnmount.mock.calls.length).toBe(0);
@@ -157,14 +157,14 @@ describe('ReactMultiChild', function() {
157
158 var container = document.createElement('div');
159
160 - var WrapperComponent = React.createClass({
161 - render: function() {
160 + class WrapperComponent extends React.Component {
161 + render() {
162 return <div>{this.props.children}</div>;
163 - },
164 - });
163 + }
164 + }
165
166 - var Parent = React.createClass({
167 - render: function() {
166 + class Parent extends React.Component {
167 + render() {
168 return (
169 <div>
170 <WrapperComponent>
@@ -172,8 +172,8 @@ describe('ReactMultiChild', function() {
172 </WrapperComponent>
173 </div>
174 );
175 - },
176 - });
175 + }
176 + }
177
178 ReactDOM.render(
179 <Parent>{[<div key="1"/>]}</Parent>,
src/renderers/shared/stack/reconciler/__tests__/ReactMultiChildReconcile-test.js
+26 -25
@@ -47,46 +47,44 @@ var getOriginalKey = function(childName) {
47 * existing children won't reinitialize components, when moving children -
48 * reusing existing DOM/memory resources.
49 */
50 -var StatusDisplay = React.createClass({
51 - getInitialState: function() {
52 - return {internalState: Math.random()};
53 - },
50 +class StatusDisplay extends React.Component {
51 + state = {internalState: Math.random()};
52
55 - getStatus: function() {
53 + getStatus = () => {
54 return this.props.status;
57 - },
55 + };
56
59 - getInternalState: function() {
57 + getInternalState = () => {
58 return this.state.internalState;
61 - },
59 + };
60
63 - componentDidMount: function() {
61 + componentDidMount() {
62 this.props.onFlush();
65 - },
63 + }
64
67 - componentDidUpdate: function() {
65 + componentDidUpdate() {
66 this.props.onFlush();
69 - },
67 + }
68
71 - render: function() {
69 + render() {
70 return (
71 <div>
72 {this.state.internalState}
73 </div>
74 );
77 - },
78 -});
75 + }
76 +}
77
78 /**
79 * Displays friends statuses.
80 */
83 -var FriendsStatusDisplay = React.createClass({
81 +class FriendsStatusDisplay extends React.Component {
82 /**
83 * Gets the order directly from each rendered child's `index` field.
84 * Refs are not maintained in the rendered order, and neither is
85 * `this._renderedChildren` (surprisingly).
86 */
89 - getOriginalKeys: function() {
87 + getOriginalKeys = () => {
88 var originalKeys = [];
89 // TODO: Update this to a better test that doesn't rely so much on internal
90 // implementation details.
@@ -103,12 +101,13 @@ var FriendsStatusDisplay = React.createClass({
101 }
102 }
103 return originalKeys;
106 - },
104 + };
105 +
106 /**
107 * Retrieves the rendered children in a nice format for comparing to the input
108 * `this.props.usernameToStatus`.
109 */
111 - getStatusDisplays: function() {
110 + getStatusDisplays = () => {
111 var res = {};
112 var i;
113 var originalKeys = this.getOriginalKeys();
@@ -117,7 +116,8 @@ var FriendsStatusDisplay = React.createClass({
116 res[key] = this.refs[key];
117 }
118 return res;
120 - },
119 + };
120 +
121 /**
122 * Verifies that by the time a child is flushed, the refs that appeared
123 * earlier have already been resolved.
@@ -125,7 +125,7 @@ var FriendsStatusDisplay = React.createClass({
125 * but our internal layer API depends on this assumption. We need to change
126 * it to be more declarative before making ref resolution indeterministic.
127 */
128 - verifyPreviousRefsResolved: function(flushedKey) {
128 + verifyPreviousRefsResolved = (flushedKey) => {
129 var i;
130 var originalKeys = this.getOriginalKeys();
131 for (i = 0; i < originalKeys.length; i++) {
@@ -136,8 +136,9 @@ var FriendsStatusDisplay = React.createClass({
136 }
137 expect(this.refs[key]).toBeTruthy();
138 }
139 - },
140 - render: function() {
139 + };
140 +
141 + render() {
142 var children = [];
143 var key;
144 for (key in this.props.usernameToStatus) {
@@ -157,8 +158,8 @@ var FriendsStatusDisplay = React.createClass({
158 {children}
159 </div>
160 );
160 - },
161 -});
161 + }
162 +}
163
164
165 function getInternalStateByUserName(statusDisplays) {
src/renderers/shared/stack/reconciler/__tests__/ReactStateSetters-test.js
+5 -7
@@ -22,15 +22,13 @@ describe('ReactStateSetters', function() {
22 beforeEach(function() {
23 jest.resetModuleRegistry();
24
25 - TestComponent = React.createClass({
26 - getInitialState: function() {
27 - return {foo: 'foo'};
28 - },
25 + TestComponent = class extends React.Component {
26 + state = {foo: 'foo'};
27
30 - render: function() {
28 + render() {
29 return <div />;
32 - },
33 - });
30 + }
31 + };
32
33 TestComponentWithMixin = React.createClass({
34 mixins: [ReactStateSetters.Mixin],
src/renderers/shared/stack/reconciler/__tests__/ReactStatelessComponent-test.js
+34 -29
@@ -35,11 +35,11 @@ describe('ReactStatelessComponent', function() {
35 });
36
37 it('should update stateless component', function() {
38 - var Parent = React.createClass({
38 + class Parent extends React.Component {
39 render() {
40 return <StatelessComponent {...this.props} />;
41 - },
42 - });
41 + }
42 + }
43
44 var el = document.createElement('div');
45 ReactDOM.render(<Parent name="A" />, el);
@@ -60,33 +60,33 @@ describe('ReactStatelessComponent', function() {
60 });
61
62 it('should pass context thru stateless component', function() {
63 - var Child = React.createClass({
64 - contextTypes: {
63 + class Child extends React.Component {
64 + static contextTypes = {
65 test: React.PropTypes.string.isRequired,
66 - },
66 + };
67
68 - render: function() {
68 + render() {
69 return <div>{this.context.test}</div>;
70 - },
71 - });
70 + }
71 + }
72
73 function Parent() {
74 return <Child />;
75 }
76
77 - var GrandParent = React.createClass({
78 - childContextTypes: {
77 + class GrandParent extends React.Component {
78 + static childContextTypes = {
79 test: React.PropTypes.string.isRequired,
80 - },
80 + };
81
82 getChildContext() {
83 return {test: this.props.test};
84 - },
84 + }
85
86 - render: function() {
86 + render() {
87 return <Parent />;
88 - },
89 - });
88 + }
89 + }
90
91 var el = document.createElement('div');
92 ReactDOM.render(<GrandParent test="test" />, el);
@@ -149,12 +149,14 @@ describe('ReactStatelessComponent', function() {
149 it('should warn when given a ref', function() {
150 spyOn(console, 'error');
151
152 - var Parent = React.createClass({
153 - displayName: 'Parent',
154 - render: function() {
152 + class Parent extends React.Component {
153 + static displayName = 'Parent';
154 +
155 + render() {
156 return <StatelessComponent name="A" ref="stateless"/>;
156 - },
157 - });
157 + }
158 + }
159 +
160 ReactTestUtils.renderIntoDocument(<Parent/>);
161
162 expect(console.error.calls.count()).toBe(1);
@@ -206,17 +208,20 @@ describe('ReactStatelessComponent', function() {
208 });
209
210 it('should receive context', function() {
209 - var Parent = React.createClass({
210 - childContextTypes: {
211 + class Parent extends React.Component {
212 + static childContextTypes = {
213 lang: React.PropTypes.string,
212 - },
213 - getChildContext: function() {
214 + };
215 +
216 + getChildContext() {
217 return {lang: 'en'};
215 - },
216 - render: function() {
218 + }
219 +
220 + render() {
221 return <Child />;
218 - },
219 - });
222 + }
223 + }
224 +
225 function Child(props, context) {
226 return <div>{context.lang}</div>;
227 }
src/renderers/shared/stack/reconciler/__tests__/ReactUpdates-test.js
+291 -265
@@ -26,17 +26,18 @@ describe('ReactUpdates', function() {
26
27 it('should batch state when updating state twice', function() {
28 var updateCount = 0;
29 - var Component = React.createClass({
30 - getInitialState: function() {
31 - return {x: 0};
32 - },
33 - componentDidUpdate: function() {
29 +
30 + class Component extends React.Component {
31 + state = {x: 0};
32 +
33 + componentDidUpdate() {
34 updateCount++;
35 - },
36 - render: function() {
35 + }
36 +
37 + render() {
38 return <div>{this.state.x}</div>;
38 - },
39 - });
39 + }
40 + }
41
42 var instance = ReactTestUtils.renderIntoDocument(<Component />);
43 expect(instance.state.x).toBe(0);
@@ -54,17 +55,18 @@ describe('ReactUpdates', function() {
55
56 it('should batch state when updating two different state keys', function() {
57 var updateCount = 0;
57 - var Component = React.createClass({
58 - getInitialState: function() {
59 - return {x: 0, y: 0};
60 - },
61 - componentDidUpdate: function() {
58 +
59 + class Component extends React.Component {
60 + state = {x: 0, y: 0};
61 +
62 + componentDidUpdate() {
63 updateCount++;
63 - },
64 - render: function() {
64 + }
65 +
66 + render() {
67 return <div>({this.state.x}, {this.state.y})</div>;
66 - },
67 - });
68 + }
69 + }
70
71 var instance = ReactTestUtils.renderIntoDocument(<Component />);
72 expect(instance.state.x).toBe(0);
@@ -85,17 +87,18 @@ describe('ReactUpdates', function() {
87
88 it('should batch state and props together', function() {
89 var updateCount = 0;
88 - var Component = React.createClass({
89 - getInitialState: function() {
90 - return {y: 0};
91 - },
92 - componentDidUpdate: function() {
90 +
91 + class Component extends React.Component {
92 + state = {y: 0};
93 +
94 + componentDidUpdate() {
95 updateCount++;
94 - },
95 - render: function() {
96 + }
97 +
98 + render() {
99 return <div>({this.props.x}, {this.state.y})</div>;
97 - },
98 - });
100 + }
101 + }
102
103 var container = document.createElement('div');
104 var instance = ReactDOM.render(<Component x={0} />, container);
@@ -117,29 +120,32 @@ describe('ReactUpdates', function() {
120
121 it('should batch parent/child state updates together', function() {
122 var parentUpdateCount = 0;
120 - var Parent = React.createClass({
121 - getInitialState: function() {
122 - return {x: 0};
123 - },
124 - componentDidUpdate: function() {
123 +
124 + class Parent extends React.Component {
125 + state = {x: 0};
126 +
127 + componentDidUpdate() {
128 parentUpdateCount++;
126 - },
127 - render: function() {
129 + }
130 +
131 + render() {
132 return <div><Child ref="child" x={this.state.x} /></div>;
129 - },
130 - });
133 + }
134 + }
135 +
136 var childUpdateCount = 0;
132 - var Child = React.createClass({
133 - getInitialState: function() {
134 - return {y: 0};
135 - },
136 - componentDidUpdate: function() {
137 +
138 + class Child extends React.Component {
139 + state = {y: 0};
140 +
141 + componentDidUpdate() {
142 childUpdateCount++;
138 - },
139 - render: function() {
143 + }
144 +
145 + render() {
146 return <div>{this.props.x + this.state.y}</div>;
141 - },
142 - });
147 + }
148 + }
149
150 var instance = ReactTestUtils.renderIntoDocument(<Parent />);
151 var child = instance.refs.child;
@@ -163,29 +169,32 @@ describe('ReactUpdates', function() {
169
170 it('should batch child/parent state updates together', function() {
171 var parentUpdateCount = 0;
166 - var Parent = React.createClass({
167 - getInitialState: function() {
168 - return {x: 0};
169 - },
170 - componentDidUpdate: function() {
172 +
173 + class Parent extends React.Component {
174 + state = {x: 0};
175 +
176 + componentDidUpdate() {
177 parentUpdateCount++;
172 - },
173 - render: function() {
178 + }
179 +
180 + render() {
181 return <div><Child ref="child" x={this.state.x} /></div>;
175 - },
176 - });
182 + }
183 + }
184 +
185 var childUpdateCount = 0;
178 - var Child = React.createClass({
179 - getInitialState: function() {
180 - return {y: 0};
181 - },
182 - componentDidUpdate: function() {
186 +
187 + class Child extends React.Component {
188 + state = {y: 0};
189 +
190 + componentDidUpdate() {
191 childUpdateCount++;
184 - },
185 - render: function() {
192 + }
193 +
194 + render() {
195 return <div>{this.props.x + this.state.y}</div>;
187 - },
188 - });
196 + }
197 + }
198
199 var instance = ReactTestUtils.renderIntoDocument(<Parent />);
200 var child = instance.refs.child;
@@ -211,17 +220,18 @@ describe('ReactUpdates', function() {
220
221 it('should support chained state updates', function() {
222 var updateCount = 0;
214 - var Component = React.createClass({
215 - getInitialState: function() {
216 - return {x: 0};
217 - },
218 - componentDidUpdate: function() {
223 +
224 + class Component extends React.Component {
225 + state = {x: 0};
226 +
227 + componentDidUpdate() {
228 updateCount++;
220 - },
221 - render: function() {
229 + }
230 +
231 + render() {
232 return <div>{this.state.x}</div>;
223 - },
224 - });
233 + }
234 + }
235
236 var instance = ReactTestUtils.renderIntoDocument(<Component />);
237 expect(instance.state.x).toBe(0);
@@ -250,20 +260,22 @@ describe('ReactUpdates', function() {
260 it('should batch forceUpdate together', function() {
261 var shouldUpdateCount = 0;
262 var updateCount = 0;
253 - var Component = React.createClass({
254 - getInitialState: function() {
255 - return {x: 0};
256 - },
257 - shouldComponentUpdate: function() {
263 +
264 + class Component extends React.Component {
265 + state = {x: 0};
266 +
267 + shouldComponentUpdate() {
268 shouldUpdateCount++;
259 - },
260 - componentDidUpdate: function() {
269 + }
270 +
271 + componentDidUpdate() {
272 updateCount++;
262 - },
263 - render: function() {
273 + }
274 +
275 + render() {
276 return <div>{this.state.x}</div>;
265 - },
266 - });
277 + }
278 + }
279
280 var instance = ReactTestUtils.renderIntoDocument(<Component />);
281 expect(instance.state.x).toBe(0);
@@ -291,23 +303,23 @@ describe('ReactUpdates', function() {
303 var parentRenderCount = 0;
304 var childRenderCount = 0;
305
294 - var Parent = React.createClass({
295 - shouldComponentUpdate: function() {
306 + class Parent extends React.Component {
307 + shouldComponentUpdate() {
308 return false;
297 - },
309 + }
310
299 - render: function() {
311 + render() {
312 parentRenderCount++;
313 return <Child ref="child" />;
302 - },
303 - });
314 + }
315 + }
316
305 - var Child = React.createClass({
306 - render: function() {
317 + class Child extends React.Component {
318 + render() {
319 childRenderCount++;
320 return <div />;
309 - },
310 - });
321 + }
322 + }
323
324 expect(parentRenderCount).toBe(0);
325 expect(childRenderCount).toBe(0);
@@ -337,29 +349,29 @@ describe('ReactUpdates', function() {
349 var numMiddleRenders = 0;
350 var numBottomRenders = 0;
351
340 - var Top = React.createClass({
341 - render: function() {
352 + class Top extends React.Component {
353 + render() {
354 return <Middle><Bottom /></Middle>;
343 - },
344 - });
355 + }
356 + }
357
346 - var Middle = React.createClass({
347 - componentDidMount: function() {
358 + class Middle extends React.Component {
359 + componentDidMount() {
360 this.forceUpdate();
349 - },
361 + }
362
351 - render: function() {
363 + render() {
364 numMiddleRenders++;
365 return React.Children.only(this.props.children);
354 - },
355 - });
366 + }
367 + }
368
357 - var Bottom = React.createClass({
358 - render: function() {
369 + class Bottom extends React.Component {
370 + render() {
371 numBottomRenders++;
372 return null;
361 - },
362 - });
373 + }
374 + }
375
376 ReactTestUtils.renderIntoDocument(<Top />);
377 expect(numMiddleRenders).toBe(2);
@@ -497,11 +509,11 @@ describe('ReactUpdates', function() {
509 var ReconcileTransaction = ReactUpdates.ReactReconcileTransaction;
510 spyOn(ReconcileTransaction, 'getPooled').and.callThrough();
511
500 - var Component = React.createClass({
501 - render: function() {
512 + class Component extends React.Component {
513 + render() {
514 return <div>{this.props.text}</div>;
503 - },
504 - });
515 + }
516 + }
517
518 var containerA = document.createElement('div');
519 var containerB = document.createElement('div');
@@ -532,27 +544,26 @@ describe('ReactUpdates', function() {
544
545 var aUpdated = false;
546
535 - var A = React.createClass({
536 - getInitialState: function() {
537 - return {x: 0};
538 - },
539 - componentDidUpdate: function() {
547 + class A extends React.Component {
548 + state = {x: 0};
549 +
550 + componentDidUpdate() {
551 expect(ReactDOM.findDOMNode(b).textContent).toBe('B1');
552 aUpdated = true;
542 - },
543 - render: function() {
553 + }
554 +
555 + render() {
556 return <div>A{this.state.x}</div>;
545 - },
546 - });
557 + }
558 + }
559
548 - var B = React.createClass({
549 - getInitialState: function() {
550 - return {x: 0};
551 - },
552 - render: function() {
560 + class B extends React.Component {
561 + state = {x: 0};
562 +
563 + render() {
564 return <div>B{this.state.x}</div>;
554 - },
555 - });
565 + }
566 + }
567
568 a = ReactTestUtils.renderIntoDocument(<A />);
569 b = ReactTestUtils.renderIntoDocument(<B />);
@@ -567,35 +578,37 @@ describe('ReactUpdates', function() {
578
579 it('should flush updates in the correct order', function() {
580 var updates = [];
570 - var Outer = React.createClass({
571 - getInitialState: function() {
572 - return {x: 0};
573 - },
574 - render: function() {
581 +
582 + class Outer extends React.Component {
583 + state = {x: 0};
584 +
585 + render() {
586 updates.push('Outer-render-' + this.state.x);
587 return <div><Inner x={this.state.x} ref="inner" /></div>;
577 - },
578 - componentDidUpdate: function() {
588 + }
589 +
590 + componentDidUpdate() {
591 var x = this.state.x;
592 updates.push('Outer-didUpdate-' + x);
593 updates.push('Inner-setState-' + x);
594 this.refs.inner.setState({x: x}, function() {
595 updates.push('Inner-callback-' + x);
596 });
585 - },
586 - });
587 - var Inner = React.createClass({
588 - getInitialState: function() {
589 - return {x: 0};
590 - },
591 - render: function() {
597 + }
598 + }
599 +
600 + class Inner extends React.Component {
601 + state = {x: 0};
602 +
603 + render() {
604 updates.push('Inner-render-' + this.props.x + '-' + this.state.x);
605 return <div />;
594 - },
595 - componentDidUpdate: function() {
606 + }
607 +
608 + componentDidUpdate() {
609 updates.push('Inner-didUpdate-' + this.props.x + '-' + this.state.x);
597 - },
598 - });
610 + }
611 + }
612
613 var instance = ReactTestUtils.renderIntoDocument(<Outer />);
614
@@ -642,12 +655,13 @@ describe('ReactUpdates', function() {
655 var instances = [];
656 var updates = [];
657
645 - var MockComponent = React.createClass({
646 - render: function() {
658 + class MockComponent extends React.Component {
659 + render() {
660 updates.push(this.props.depth);
661 return <div />;
649 - },
650 - componentDidMount: function() {
662 + }
663 +
664 + componentDidMount() {
665 instances.push(this);
666 if (this.props.depth < this.props.count) {
667 ReactDOM.render(
@@ -658,8 +672,8 @@ describe('ReactUpdates', function() {
672 ReactDOM.findDOMNode(this)
673 );
674 }
661 - },
662 - });
675 + }
676 + }
677
678 ReactTestUtils.renderIntoDocument(<MockComponent depth={0} count={2} />);
679
@@ -678,11 +692,10 @@ describe('ReactUpdates', function() {
692 it('should queue nested updates', function() {
693 // See https://github.com/facebook/react/issues/1147
694
681 - var X = React.createClass({
682 - getInitialState: function() {
683 - return {s: 0};
684 - },
685 - render: function() {
695 + class X extends React.Component {
696 + state = {s: 0};
697 +
698 + render() {
699 if (this.state.s === 0) {
700 return (
701 <div>
@@ -692,32 +705,34 @@ describe('ReactUpdates', function() {
705 } else {
706 return <div>1</div>;
707 }
695 - },
696 - go: function() {
708 + }
709 +
710 + go = () => {
711 this.setState({s: 1});
712 this.setState({s: 0});
713 this.setState({s: 1});
700 - },
701 - });
714 + };
715 + }
716
703 - var Y = React.createClass({
704 - render: function() {
717 + class Y extends React.Component {
718 + render() {
719 return (
720 <div>
721 <Z />
722 </div>
723 );
710 - },
711 - });
724 + }
725 + }
726
713 - var Z = React.createClass({
714 - render: function() {
727 + class Z extends React.Component {
728 + render() {
729 return <div />;
716 - },
717 - componentWillUpdate: function() {
730 + }
731 +
732 + componentWillUpdate() {
733 x.go();
719 - },
720 - });
734 + }
735 + }
736
737 var x;
738 var y;
@@ -734,26 +749,27 @@ describe('ReactUpdates', function() {
749 // See https://github.com/facebook/react/issues/1353
750 var a;
751
737 - var A = React.createClass({
738 - getInitialState: function() {
739 - return {x: 0};
740 - },
741 - componentWillMount: function() {
752 + class A extends React.Component {
753 + state = {x: 0};
754 +
755 + componentWillMount() {
756 a = this;
743 - },
744 - render: function() {
757 + }
758 +
759 + render() {
760 return <div>A{this.state.x}</div>;
746 - },
747 - });
761 + }
762 + }
763
749 - var B = React.createClass({
750 - componentWillMount: function() {
764 + class B extends React.Component {
765 + componentWillMount() {
766 a.setState({x: 1});
752 - },
753 - render: function() {
767 + }
768 +
769 + render() {
770 return <div />;
755 - },
756 - });
771 + }
772 + }
773
774 ReactUpdates.batchedUpdates(function() {
775 ReactTestUtils.renderIntoDocument(
@@ -770,22 +786,23 @@ describe('ReactUpdates', function() {
786
787 it('calls componentWillReceiveProps setState callback properly', function() {
788 var callbackCount = 0;
773 - var A = React.createClass({
774 - getInitialState: function() {
775 - return {x: this.props.x};
776 - },
777 - componentWillReceiveProps: function(nextProps) {
789 +
790 + class A extends React.Component {
791 + state = {x: this.props.x};
792 +
793 + componentWillReceiveProps(nextProps) {
794 var newX = nextProps.x;
795 this.setState({x: newX}, function() {
796 // State should have updated by the time this callback gets called
797 expect(this.state.x).toBe(newX);
798 callbackCount++;
799 });
784 - },
785 - render: function() {
800 + }
801 +
802 + render() {
803 return <div>{this.state.x}</div>;
787 - },
788 - });
804 + }
805 + }
806
807 var container = document.createElement('div');
808 ReactDOM.render(<A x={1} />, container);
@@ -795,11 +812,13 @@ describe('ReactUpdates', function() {
812
813 it('calls asap callbacks properly', function() {
814 var callbackCount = 0;
798 - var A = React.createClass({
799 - render: function() {
815 +
816 + class A extends React.Component {
817 + render() {
818 return <div />;
801 - },
802 - componentDidUpdate: function() {
819 + }
820 +
821 + componentDidUpdate() {
822 ReactUpdates.asap(function() {
823 expect(this).toBe(component);
824 callbackCount++;
@@ -809,8 +828,8 @@ describe('ReactUpdates', function() {
828 expect(callbackCount).toBe(1);
829 }, component);
830 expect(callbackCount).toBe(0);
812 - },
813 - });
831 + }
832 + }
833
834 var component = ReactTestUtils.renderIntoDocument(<A />);
835 component.forceUpdate();
@@ -819,13 +838,16 @@ describe('ReactUpdates', function() {
838
839 it('calls asap callbacks with queued updates', function() {
840 var log = [];
822 - var A = React.createClass({
823 - getInitialState: () => ({updates: 0}),
824 - render: function() {
841 +
842 + class A extends React.Component {
843 + state = {updates: 0};
844 +
845 + render() {
846 log.push('render-' + this.state.updates);
847 return <div />;
827 - },
828 - componentDidUpdate: function() {
848 + }
849 +
850 + componentDidUpdate() {
851 if (this.state.updates === 1) {
852 ReactUpdates.asap(function() {
853 this.setState({updates: 2}, function() {
@@ -842,8 +864,8 @@ describe('ReactUpdates', function() {
864 });
865 }
866 log.push('didUpdate-' + this.state.updates);
845 - },
846 - });
867 + }
868 + }
869
870 var component = ReactTestUtils.renderIntoDocument(<A />);
871 component.setState({updates: 1});
@@ -866,31 +888,29 @@ describe('ReactUpdates', function() {
888 });
889
890 it('does not call render after a component as been deleted', function() {
869 -
891 var renderCount = 0;
892 var componentB = null;
893
873 - var B = React.createClass({
874 - getInitialState: function() {
875 - return {updates: 0};
876 - },
877 - componentDidMount: function() {
894 + class B extends React.Component {
895 + state = {updates: 0};
896 +
897 + componentDidMount() {
898 componentB = this;
879 - },
880 - render: function() {
899 + }
900 +
901 + render() {
902 renderCount++;
903 return <div />;
883 - },
884 - });
904 + }
905 + }
906
886 - var A = React.createClass({
887 - getInitialState: function() {
888 - return {showB: true};
889 - },
890 - render: function() {
907 + class A extends React.Component {
908 + state = {showB: true};
909 +
910 + render() {
911 return this.state.showB ? <B /> : <div />;
892 - },
893 - });
912 + }
913 + }
914
915 var component = ReactTestUtils.renderIntoDocument(<A />);
916
@@ -907,17 +927,17 @@ describe('ReactUpdates', function() {
927 it('marks top-level updates', function() {
928 var ReactFeatureFlags = require('ReactFeatureFlags');
929
910 - var Foo = React.createClass({
911 - render: function() {
930 + class Foo extends React.Component {
931 + render() {
932 return <Bar />;
913 - },
914 - });
933 + }
934 + }
935
916 - var Bar = React.createClass({
917 - render: function() {
936 + class Bar extends React.Component {
937 + render() {
938 return <div />;
919 - },
920 - });
939 + }
940 + }
941
942 var container = document.createElement('div');
943 ReactDOM.render(<Foo />, container);
@@ -943,14 +963,15 @@ describe('ReactUpdates', function() {
963 this.a = 1;
964 this.b = 2;
965 }
946 - var A = React.createClass({
947 - getInitialState: function() {
948 - return {};
949 - },
950 - render: function() {
966 +
967 + class A extends React.Component {
968 + state = {};
969 +
970 + render() {
971 return <div />;
952 - },
953 - });
972 + }
973 + }
974 +
975 var component = ReactTestUtils.renderIntoDocument(<A />);
976
977 expect(() => component.setState({}, 'no')).toThrowError(
@@ -1001,14 +1022,15 @@ describe('ReactUpdates', function() {
1022 this.a = 1;
1023 this.b = 2;
1024 }
1004 - var A = React.createClass({
1005 - getInitialState: function() {
1006 - return {};
1007 - },
1008 - render: function() {
1025 +
1026 + class A extends React.Component {
1027 + state = {};
1028 +
1029 + render() {
1030 return <div />;
1010 - },
1011 - });
1031 + }
1032 + }
1033 +
1034 var component = ReactTestUtils.renderIntoDocument(<A />);
1035
1036 expect(() => component.forceUpdate('no')).toThrowError(
@@ -1026,42 +1048,46 @@ describe('ReactUpdates', function() {
1048 });
1049
1050 it('does not update one component twice in a batch (#2410)', function() {
1029 - var Parent = React.createClass({
1030 - getChild: function() {
1051 + class Parent extends React.Component {
1052 + getChild = () => {
1053 return this.refs.child;
1032 - },
1033 - render: function() {
1054 + };
1055 +
1056 + render() {
1057 return <Child ref="child" />;
1035 - },
1036 - });
1058 + }
1059 + }
1060
1061 var renderCount = 0;
1062 var postRenderCount = 0;
1063 var once = false;
1041 - var Child = React.createClass({
1042 - getInitialState: function() {
1043 - return {updated: false};
1044 - },
1045 - componentWillUpdate: function() {
1064 +
1065 + class Child extends React.Component {
1066 + state = {updated: false};
1067 +
1068 + componentWillUpdate() {
1069 if (!once) {
1070 once = true;
1071 this.setState({updated: true});
1072 }
1050 - },
1051 - componentDidMount: function() {
1073 + }
1074 +
1075 + componentDidMount() {
1076 expect(renderCount).toBe(postRenderCount + 1);
1077 postRenderCount++;
1054 - },
1055 - componentDidUpdate: function() {
1078 + }
1079 +
1080 + componentDidUpdate() {
1081 expect(renderCount).toBe(postRenderCount + 1);
1082 postRenderCount++;
1058 - },
1059 - render: function() {
1083 + }
1084 +
1085 + render() {
1086 expect(renderCount).toBe(postRenderCount);
1087 renderCount++;
1088 return <div />;
1063 - },
1064 - });
1089 + }
1090 + }
1091
1092 var parent = ReactTestUtils.renderIntoDocument(<Parent />);
1093 var child = parent.getChild();
src/renderers/shared/stack/reconciler/__tests__/refs-destruction-test.js
+27 -21
@@ -25,8 +25,8 @@ describe('refs-destruction', function() {
25 ReactDOM = require('ReactDOM');
26 ReactTestUtils = require('ReactTestUtils');
27
28 - TestComponent = React.createClass({
29 - render: function() {
28 + TestComponent = class extends React.Component {
29 + render() {
30 return (
31 <div>
32 {this.props.destroy ? null :
@@ -36,8 +36,8 @@ describe('refs-destruction', function() {
36 }
37 </div>
38 );
39 - },
40 - });
39 + }
40 + };
41 });
42
43 it('should remove refs when destroying the parent', function() {
@@ -61,16 +61,18 @@ describe('refs-destruction', function() {
61 });
62
63 it('should not error when destroying child with ref asynchronously', function() {
64 - var Modal = React.createClass({
65 - componentDidMount: function() {
64 + class Modal extends React.Component {
65 + componentDidMount() {
66 this.div = document.createElement('div');
67 document.body.appendChild(this.div);
68 this.componentDidUpdate();
69 - },
70 - componentDidUpdate: function() {
69 + }
70 +
71 + componentDidUpdate() {
72 ReactDOM.render(<div>{this.props.children}</div>, this.div);
72 - },
73 - componentWillUnmount: function() {
73 + }
74 +
75 + componentWillUnmount() {
76 var self = this;
77 // some async animation
78 setTimeout(function() {
@@ -79,23 +81,27 @@ describe('refs-destruction', function() {
81 }).not.toThrow();
82 document.body.removeChild(self.div);
83 }, 0);
82 - },
84 + }
85 +
86 render() {
87 return null;
85 - },
86 - });
87 - var AppModal = React.createClass({
88 - render: function() {
88 + }
89 + }
90 +
91 + class AppModal extends React.Component {
92 + render() {
93 return (<Modal>
94 <a ref="ref"/>
95 </Modal>);
92 - },
93 - });
94 - var App = React.createClass({
95 - render: function() {
96 + }
97 + }
98 +
99 + class App extends React.Component {
100 + render() {
101 return this.props.hidden ? null : <AppModal onClose={this.close}/>;
97 - },
98 - });
102 + }
103 + }
104 +
105 var container = document.createElement('div');
106 ReactDOM.render(<App />, container);
107 ReactDOM.render(<App hidden={true}/>, container);
src/renderers/shared/stack/reconciler/__tests__/refs-test.js
+46 -40
@@ -21,17 +21,18 @@ var reactComponentExpect = require('reactComponentExpect');
21 * Counts clicks and has a renders an item for each click. Each item rendered
22 * has a ref of the form "clickLogN".
23 */
24 -var ClickCounter = React.createClass({
25 - getInitialState: function() {
26 - return {count: this.props.initialCount};
27 - },
28 - triggerReset: function() {
24 +class ClickCounter extends React.Component {
25 + state = {count: this.props.initialCount};
26 +
27 + triggerReset = () => {
28 this.setState({count: this.props.initialCount});
30 - },
31 - handleClick: function() {
29 + };
30 +
31 + handleClick = () => {
32 this.setState({count: this.state.count + 1});
33 - },
34 - render: function() {
33 + };
34 +
35 + render() {
36 var children = [];
37 var i;
38 for (i = 0; i < this.state.count; i++) {
@@ -48,29 +49,30 @@ var ClickCounter = React.createClass({
49 {children}
50 </span>
51 );
51 - },
52 -});
52 + }
53 +}
54
55 /**
56 * Only purpose is to test that refs are tracked even when applied to a
57 * component that is injected down several layers. Ref systems are difficult to
58 * build in such a way that ownership is maintained in an airtight manner.
59 */
59 -var GeneralContainerComponent = React.createClass({
60 - render: function() {
60 +class GeneralContainerComponent extends React.Component {
61 + render() {
62 return <div>{this.props.children}</div>;
62 - },
63 -});
63 + }
64 +}
65
66 /**
67 * Notice how refs ownership is maintained even when injecting a component
68 * into a different parent.
69 */
69 -var TestRefsComponent = React.createClass({
70 - doReset: function() {
70 +class TestRefsComponent extends React.Component {
71 + doReset = () => {
72 this.refs.myCounter.triggerReset();
72 - },
73 - render: function() {
73 + };
74 +
75 + render() {
76 return (
77 <div>
78 <div ref="resetDiv" onClick={this.doReset}>
@@ -81,8 +83,8 @@ var TestRefsComponent = React.createClass({
83 </GeneralContainerComponent>
84 </div>
85 );
84 - },
85 -});
86 + }
87 +}
88
89 /**
90 * Render a TestRefsComponent and ensure that the main refs are wired up.
@@ -161,14 +163,14 @@ describe('ref swapping', function() {
163 jest.resetModuleRegistry();
164 });
165
164 - var RefHopsAround = React.createClass({
165 - getInitialState: function() {
166 - return {count: 0};
167 - },
168 - moveRef: function() {
166 + class RefHopsAround extends React.Component {
167 + state = {count: 0};
168 +
169 + moveRef = () => {
170 this.setState({count: this.state.count + 1});
170 - },
171 - render: function() {
171 + };
172 +
173 + render() {
174 var count = this.state.count;
175 /**
176 * What we have here, is three divs with refs (div1/2/3), but a single
@@ -192,8 +194,8 @@ describe('ref swapping', function() {
194 />
195 </div>
196 );
195 - },
196 - });
197 + }
198 + }
199
200 it('Allow refs to hop around children correctly', function() {
201 var refHopsAround = ReactTestUtils.renderIntoDocument(<RefHopsAround />);
@@ -231,11 +233,11 @@ describe('ref swapping', function() {
233
234
235 it('always has a value for this.refs', function() {
234 - var Component = React.createClass({
235 - render: function() {
236 + class Component extends React.Component {
237 + render() {
238 return <div />;
237 - },
238 - });
239 + }
240 + }
241
242 var instance = ReactTestUtils.renderIntoDocument(<Component />);
243 expect(!!instance.refs).toBe(true);
@@ -246,17 +248,21 @@ describe('ref swapping', function() {
248 function Inner(props) {
249 return <a ref={props.saveA} />;
250 }
249 - var Outer = React.createClass({
250 - saveA() {
251 +
252 + class Outer extends React.Component {
253 + saveA = () => {
254 refCalled++;
252 - },
255 + };
256 +
257 componentDidMount() {
258 this.setState({});
255 - },
259 + }
260 +
261 render() {
262 return <Inner saveA={this.saveA} />;
258 - },
259 - });
263 + }
264 + }
265 +
266 ReactTestUtils.renderIntoDocument(<Outer />);
267 expect(refCalled).toBe(1);
268 }
src/renderers/testing/__tests__/ReactTestRenderer-test.js
+10 -9
@@ -46,11 +46,11 @@ describe('ReactTestRenderer', function() {
46
47 it('renders some basics with an update', function() {
48 var renders = 0;
49 - var Component = React.createClass({
50 - getInitialState: function() {
51 - return {x: 3};
52 - },
53 - render: function() {
49 +
50 + class Component extends React.Component {
51 + state = {x: 3};
52 +
53 + render() {
54 renders++;
55 return (
56 <div className="purple">
@@ -59,11 +59,12 @@ describe('ReactTestRenderer', function() {
59 <Null />
60 </div>
61 );
62 - },
63 - componentDidMount: function() {
62 + }
63 +
64 + componentDidMount() {
65 this.setState({x: 7});
65 - },
66 - });
66 + }
67 + }
68
69 var Child = () => (renders++, <moo />);
70 var Null = () => (renders++, null);
src/shared/utils/__tests__/traverseAllChildren-test.js
+3 -3
@@ -542,13 +542,13 @@ describe('traverseAllChildren', function() {
542 it('should warn for using maps as children with owner info', function() {
543 spyOn(console, 'error');
544
545 - var Parent = React.createClass({
545 + class Parent extends React.Component {
546 render() {
547 return (
548 <div>{new Map([['foo', 0], ['bar', 1]])}</div>
549 );
550 - },
551 - });
550 + }
551 + }
552
553 ReactTestUtils.renderIntoDocument(<Parent />);
554
src/test/__tests__/ReactTestUtils-test.js
+110 -100
@@ -26,16 +26,16 @@ describe('ReactTestUtils', function() {
26 });
27
28 it('should have shallow rendering', function() {
29 - var SomeComponent = React.createClass({
30 - render: function() {
29 + class SomeComponent extends React.Component {
30 + render() {
31 return (
32 <div>
33 <span className="child1" />
34 <span className="child2" />
35 </div>
36 );
37 - },
38 - });
37 + }
38 + }
39
40 var shallowRenderer = ReactTestUtils.createRenderer();
41 var result = shallowRenderer.render(<SomeComponent />);
@@ -68,11 +68,11 @@ describe('ReactTestUtils', function() {
68 });
69
70 it('should throw for invalid elements', function() {
71 - var SomeComponent = React.createClass({
72 - render: function() {
71 + class SomeComponent extends React.Component {
72 + render() {
73 return <div />;
74 - },
75 - });
74 + }
75 + }
76
77 var shallowRenderer = ReactTestUtils.createRenderer();
78 expect(() => shallowRenderer.render(SomeComponent)).toThrowError(
@@ -106,11 +106,11 @@ describe('ReactTestUtils', function() {
106 });
107
108 it('can shallow render to null', function() {
109 - var SomeComponent = React.createClass({
110 - render: function() {
109 + class SomeComponent extends React.Component {
110 + render() {
111 return null;
112 - },
113 - });
112 + }
113 + }
114
115 var shallowRenderer = ReactTestUtils.createRenderer();
116 var result = shallowRenderer.render(<SomeComponent />);
@@ -119,11 +119,11 @@ describe('ReactTestUtils', function() {
119 });
120
121 it('can shallow render with a ref', function() {
122 - var SomeComponent = React.createClass({
123 - render: function() {
122 + class SomeComponent extends React.Component {
123 + render() {
124 return <div ref="hello" />;
125 - },
126 - });
125 + }
126 + }
127
128 var shallowRenderer = ReactTestUtils.createRenderer();
129 // Shouldn't crash.
@@ -131,16 +131,14 @@ describe('ReactTestUtils', function() {
131 });
132
133 it('lets you update shallowly rendered components', function() {
134 - var SomeComponent = React.createClass({
135 - getInitialState: function() {
136 - return {clicked: false};
137 - },
134 + class SomeComponent extends React.Component {
135 + state = {clicked: false};
136
139 - onClick: function() {
137 + onClick = () => {
138 this.setState({clicked: true});
141 - },
139 + };
140
143 - render: function() {
141 + render() {
142 var className = this.state.clicked ? 'was-clicked' : '';
143
144 if (this.props.aNew === 'prop') {
@@ -160,8 +158,8 @@ describe('ReactTestUtils', function() {
158 </div>
159 );
160 }
163 - },
164 - });
161 + }
162 + }
163
164 var shallowRenderer = ReactTestUtils.createRenderer();
165 var result = shallowRenderer.render(<SomeComponent />);
@@ -183,14 +181,15 @@ describe('ReactTestUtils', function() {
181 });
182
183 it('can access the mounted component instance', function() {
186 - var SimpleComponent = React.createClass({
187 - someMethod: function() {
184 + class SimpleComponent extends React.Component {
185 + someMethod = () => {
186 return this.props.n;
189 - },
190 - render: function() {
187 + };
188 +
189 + render() {
190 return <div>{this.props.n}</div>;
192 - },
193 - });
191 + }
192 + }
193
194 var shallowRenderer = ReactTestUtils.createRenderer();
195 shallowRenderer.render(<SimpleComponent n={5} />);
@@ -198,14 +197,15 @@ describe('ReactTestUtils', function() {
197 });
198
199 it('can shallowly render components with contextTypes', function() {
201 - var SimpleComponent = React.createClass({
202 - contextTypes: {
200 + class SimpleComponent extends React.Component {
201 + static contextTypes = {
202 name: React.PropTypes.string,
204 - },
205 - render: function() {
203 + };
204 +
205 + render() {
206 return <div />;
207 - },
208 - });
207 + }
208 + }
209
210 var shallowRenderer = ReactTestUtils.createRenderer();
211 var result = shallowRenderer.render(<SimpleComponent />);
@@ -213,14 +213,14 @@ describe('ReactTestUtils', function() {
213 });
214
215 it('can shallowly render components with ref as function', function() {
216 - var SimpleComponent = React.createClass({
217 - getInitialState: function() {
218 - return {clicked: false};
219 - },
220 - handleUserClick: function() {
216 + class SimpleComponent extends React.Component {
217 + state = {clicked: false};
218 +
219 + handleUserClick = () => {
220 this.setState({ clicked: true });
222 - },
223 - render: function() {
221 + };
222 +
223 + render() {
224 return (
225 <div
226 ref={() => {}}
@@ -228,8 +228,8 @@ describe('ReactTestUtils', function() {
228 className={this.state.clicked ? 'clicked' : ''}
229 />
230 );
231 - },
232 - });
231 + }
232 + }
233
234 var shallowRenderer = ReactTestUtils.createRenderer();
235 shallowRenderer.render(<SimpleComponent />);
@@ -244,14 +244,15 @@ describe('ReactTestUtils', function() {
244 });
245
246 it('can setState in componentWillMount when shallow rendering', function() {
247 - var SimpleComponent = React.createClass({
247 + class SimpleComponent extends React.Component {
248 componentWillMount() {
249 this.setState({groovy: 'doovy'});
250 - },
250 + }
251 +
252 render() {
253 return <div>{this.state.groovy}</div>;
253 - },
254 - });
254 + }
255 + }
256
257 var shallowRenderer = ReactTestUtils.createRenderer();
258 var result = shallowRenderer.render(<SimpleComponent />);
@@ -259,14 +260,15 @@ describe('ReactTestUtils', function() {
260 });
261
262 it('can pass context when shallowly rendering', function() {
262 - var SimpleComponent = React.createClass({
263 - contextTypes: {
263 + class SimpleComponent extends React.Component {
264 + static contextTypes = {
265 name: React.PropTypes.string,
265 - },
266 - render: function() {
266 + };
267 +
268 + render() {
269 return <div>{this.context.name}</div>;
268 - },
269 - });
270 + }
271 + }
272
273 var shallowRenderer = ReactTestUtils.createRenderer();
274 var result = shallowRenderer.render(<SimpleComponent />, {
@@ -277,14 +279,16 @@ describe('ReactTestUtils', function() {
279
280 it('can fail context when shallowly rendering', function() {
281 spyOn(console, 'error');
280 - var SimpleComponent = React.createClass({
281 - contextTypes: {
282 +
283 + class SimpleComponent extends React.Component {
284 + static contextTypes = {
285 name: React.PropTypes.string.isRequired,
283 - },
284 - render: function() {
286 + };
287 +
288 + render() {
289 return <div>{this.context.name}</div>;
286 - },
287 - });
290 + }
291 + }
292
293 var shallowRenderer = ReactTestUtils.createRenderer();
294 shallowRenderer.render(<SimpleComponent />);
@@ -299,11 +303,12 @@ describe('ReactTestUtils', function() {
303 });
304
305 it('can scryRenderedDOMComponentsWithClass with TextComponent', function() {
302 - var Wrapper = React.createClass({
303 - render: function() {
306 + class Wrapper extends React.Component {
307 + render() {
308 return <div>Hello <span>Jim</span></div>;
305 - },
306 - });
309 + }
310 + }
311 +
312 var renderedComponent = ReactTestUtils.renderIntoDocument(<Wrapper />);
313 var scryResults = ReactTestUtils.scryRenderedDOMComponentsWithClass(
314 renderedComponent,
@@ -313,11 +318,12 @@ describe('ReactTestUtils', function() {
318 });
319
320 it('can scryRenderedDOMComponentsWithClass with className contains \\n', function() {
316 - var Wrapper = React.createClass({
317 - render: function() {
321 + class Wrapper extends React.Component {
322 + render() {
323 return <div>Hello <span className={'x\ny'}>Jim</span></div>;
319 - },
320 - });
324 + }
325 + }
326 +
327 var renderedComponent = ReactTestUtils.renderIntoDocument(<Wrapper />);
328 var scryResults = ReactTestUtils.scryRenderedDOMComponentsWithClass(
329 renderedComponent,
@@ -327,11 +333,12 @@ describe('ReactTestUtils', function() {
333 });
334
335 it('can scryRenderedDOMComponentsWithClass with multiple classes', function() {
330 - var Wrapper = React.createClass({
331 - render: function() {
336 + class Wrapper extends React.Component {
337 + render() {
338 return <div>Hello <span className={'x y z'}>Jim</span></div>;
333 - },
334 - });
339 + }
340 + }
341 +
342 var renderedComponent = ReactTestUtils.renderIntoDocument(<Wrapper />);
343 var scryResults1 = ReactTestUtils.scryRenderedDOMComponentsWithClass(
344 renderedComponent,
@@ -368,11 +375,11 @@ describe('ReactTestUtils', function() {
375 });
376
377 it('traverses children in the correct order', function() {
371 - var Wrapper = React.createClass({
372 - render: function() {
378 + class Wrapper extends React.Component {
379 + render() {
380 return <div>{this.props.children}</div>;
374 - },
375 - });
381 + }
382 + }
383
384 var container = document.createElement('div');
385 ReactDOM.render(
@@ -425,8 +432,8 @@ describe('ReactTestUtils', function() {
432
433 // Full-page components (html, head, body) can't be rendered into a div
434 // directly...
428 - var Root = React.createClass({
429 - render: function() {
435 + class Root extends React.Component {
436 + render() {
437 return (
438 <html ref="html">
439 <head ref="head">
@@ -437,8 +444,8 @@ describe('ReactTestUtils', function() {
444 </body>
445 </html>
446 );
440 - },
441 - });
447 + }
448 + }
449
450 var markup = ReactDOMServer.renderToString(<Root />);
451 var testDocument = getTestDocument(markup);
@@ -470,15 +477,15 @@ describe('ReactTestUtils', function() {
477 });
478
479 it('should change the value of an input field in a component', function() {
473 - var SomeComponent = React.createClass({
474 - render: function() {
480 + class SomeComponent extends React.Component {
481 + render() {
482 return (
483 <div>
484 <input type="text" ref="input" onChange={this.props.handleChange} />
485 </div>
486 );
480 - },
481 - });
487 + }
488 + }
489
490 var obj = {
491 handler: function(e) {
@@ -497,15 +504,16 @@ describe('ReactTestUtils', function() {
504 });
505
506 it('should throw when attempting to use ReactTestUtils.Simulate with shallow rendering', function() {
500 - var SomeComponent = React.createClass({
501 - render: function() {
507 + class SomeComponent extends React.Component {
508 + render() {
509 return (
510 <div onClick={this.props.handleClick}>
511 hello, world.
512 </div>
513 );
507 - },
508 - });
514 + }
515 + }
516 +
517 var handler = jasmine.createSpy('spy');
518 var shallowRenderer = ReactTestUtils.createRenderer();
519 var result = shallowRenderer.render(<SomeComponent handleClick={handler} />);
@@ -522,14 +530,15 @@ describe('ReactTestUtils', function() {
530
531 var CLIENT_X = 100;
532
525 - var Component = React.createClass({
526 - handleClick: function(e) {
533 + class Component extends React.Component {
534 + handleClick = (e) => {
535 expect(e.clientX).toBe(CLIENT_X);
528 - },
529 - render: function() {
536 + };
537 +
538 + render() {
539 return <div onClick={this.handleClick} />;
531 - },
532 - });
540 + }
541 + }
542
543 var element = document.createElement('div');
544 var instance = ReactDOM.render(<Component />, element);
@@ -542,16 +551,17 @@ describe('ReactTestUtils', function() {
551
552 it('can scry with stateless components involved', function() {
553 var Stateless = () => <div><hr /></div>;
545 - var SomeComponent = React.createClass({
546 - render: function() {
554 +
555 + class SomeComponent extends React.Component {
556 + render() {
557 return (
558 <div>
559 <Stateless />
560 <hr />
561 </div>
562 );
553 - },
554 - });
563 + }
564 + }
565
566 var inst = ReactTestUtils.renderIntoDocument(<SomeComponent />);
567 var hrs = ReactTestUtils.scryRenderedDOMComponentsWithTag(inst, 'hr');
src/test/__tests__/reactComponentExpect-test.js
+4 -4
@@ -24,16 +24,16 @@ describe('reactComponentExpect', function() {
24 });
25
26 it('should detect text components', function() {
27 - var SomeComponent = React.createClass({
28 - render: function() {
27 + class SomeComponent extends React.Component {
28 + render() {
29 return (
30 <div>
31 <div>This is a div</div>
32 {'This is text'}
33 </div>
34 );
35 - },
36 - });
35 + }
36 + }
37
38 var component = ReactTestUtils.renderIntoDocument(<SomeComponent />);
39