@samitouri / QOS-React-2 / commits / c76a4eaa2a

Update tests to use plain JavaScript classes

Tests that rely on replaceState or isMounted use updater.enqueueReplaceState and updater.isMounted instead.

Andrew Clark committed Mar 21, 2017 at 18:38 UTC c76a4eaa2aab1a10825c51f8e9c7baccc54ef56b
24 files changed +663 -940
mocks/ReactElementTestChild.js
+4 -4
@@ -13,10 +13,10 @@
13
14 var React = require('React');
15
16 -var Child = React.createClass({
17 - render: function() {
16 +class Child extends React.Component {
17 + render() {
18 return React.createElement('div');
19 - },
20 -});
19 + }
20 +}
21
22 module.exports = Child;
mocks/ReactMockedComponentTestComponent.js
+8 -13
@@ -13,23 +13,18 @@
13
14 var React = require('React');
15
16 -var ReactMockedComponentTestComponent = React.createClass({
17 - getDefaultProps: function() {
18 - return {bar: 'baz'};
19 - },
16 +class ReactMockedComponentTestComponent extends React.Component {
17 + state = {foo: 'bar'};
18
21 - getInitialState: function() {
22 - return {foo: 'bar'};
23 - },
24 -
25 - hasCustomMethod: function() {
19 + hasCustomMethod() {
20 return true;
27 - },
21 + }
22
29 - render: function() {
23 + render() {
24 return <span />;
31 - },
25 + }
26
33 -});
27 +}
28 +ReactMockedComponentTestComponent.defaultProps = {bar: 'baz'};
29
30 module.exports = ReactMockedComponentTestComponent;
scripts/fiber/tests-passing.txt
+1 -60
@@ -89,64 +89,10 @@ src/isomorphic/classic/__tests__/ReactContextValidator-test.js
89 * should warn (but not error) if getChildContext method is missing
90 * should pass parent context if getChildContext method is missing
91
92 -src/isomorphic/classic/class/__tests__/ReactBind-test.js
93 -* Holds reference to instance
94 -* works with mixins
95 -* warns if you try to bind to this
96 -* does not warn if you pass an auto-bound method to setState
97 -
98 -src/isomorphic/classic/class/__tests__/ReactBindOptout-test.js
99 -* should work with manual binding
100 -* should not hold reference to instance
101 -* works with mixins that have not opted out of autobinding
102 -* works with mixins that have opted out of autobinding
103 -* does not warn if you try to bind to this
104 -* does not warn if you pass an manually bound method to setState
105 -
106 -src/isomorphic/classic/class/__tests__/ReactClass-test.js
107 -* should throw when `render` is not specified
108 -* should copy `displayName` onto the Constructor
109 -* should copy prop types onto the Constructor
110 -* should warn on invalid prop types
111 -* should warn on invalid context types
112 -* should throw on invalid child context types
113 -* should warn when mispelling shouldComponentUpdate
114 -* should warn when mispelling componentWillReceiveProps
115 -* should throw if a reserved property is in statics
116 -* should support statics
117 -* should work with object getInitialState() return values
118 -* renders based on context getInitialState
119 -* should throw with non-object getInitialState() return values
120 -* should work with a null getInitialState() return value
121 -* should throw when using legacy factories
122 -
123 -src/isomorphic/classic/class/__tests__/ReactClassMixin-test.js
124 -* should support merging propTypes and statics
125 -* should support chaining delegate functions
126 -* should chain functions regardless of spec property order
127 -* should validate prop types via mixins
128 -* should override mixin prop types with class prop types
129 -* should support mixins with getInitialState()
130 -* should throw with conflicting getInitialState() methods
131 -* should not mutate objects returned by getInitialState()
132 -* should support statics in mixins
133 -* should throw if mixins override each others' statics
134 -* should throw if mixins override functions in statics
135 -* should warn if the mixin is undefined
136 -* should warn if the mixin is null
137 -* should warn if an undefined mixin is included in another mixin
138 -* should warn if a null mixin is included in another mixin
139 -* should throw if the mixin is a React component
140 -* should throw if the mixin is a React component class
141 -* should have bound the mixin methods to the component
142 -* should include the mixin keys in even if their values are falsy
143 -* should work with a null getInitialState return value and a mixin
144 -
92 src/isomorphic/classic/element/__tests__/ReactElement-test.js
93 * uses the fallback value when in an environment without Symbol
94 * returns a complete element according to spec
148 -* should warn when `key` is being accessed on createClass element
149 -* should warn when `key` is being accessed on ES class element
95 +* should warn when `key` is being accessed on composite element
96 * should warn when `key` is being accessed on a host element
97 * should warn when `ref` is being accessed
98 * allows a string to be passed as the type
@@ -165,7 +111,6 @@ src/isomorphic/classic/element/__tests__/ReactElement-test.js
111 * merges rest arguments onto the children prop in an array
112 * allows static methods to be called using the type property
113 * identifies valid elements
168 -* allows the use of PropTypes validators in statics
114 * is indistinguishable from a plain object
115 * should use default prop value when removing a prop
116 * should normalize props with default values
@@ -495,8 +440,6 @@ src/renderers/__tests__/ReactCompositeComponent-test.js
440 * should react to state changes from callbacks
441 * should rewire refs when rendering to different child types
442 * should not cache old DOM nodes when switching constructors
498 -* should auto bind methods and values correctly
499 -* should not pass this to getDefaultProps
443 * should use default values for undefined props
444 * should not mutate passed-in props object
445 * should warn about `forceUpdate` on unmounted components
@@ -718,7 +661,6 @@ src/renderers/__tests__/ReactUpdates-test.js
661 * does not call render after a component as been deleted
662 * marks top-level updates
663 * throws in setState if the update callback is not a function
721 -* throws in replaceState if the update callback is not a function
664 * throws in forceUpdate if the update callback is not a function
665 * does not update one component twice in a batch (#2410)
666 * does not update one component twice in a batch (#6371)
@@ -1299,7 +1241,6 @@ src/renderers/dom/shared/__tests__/ReactServerRendering-test.js
1241 * allows setState in componentWillMount without using DOM
1242 * renders components with different batching strategies
1243 * warns with a no-op when an async setState is triggered
1302 -* warns with a no-op when an async replaceState is triggered
1244 * warns with a no-op when an async forceUpdate is triggered
1245 * should warn when children are mutated during render
1246
src/isomorphic/classic/__tests__/ReactContextValidator-test.js
+103 -112
@@ -38,33 +38,31 @@ describe('ReactContextValidator', () => {
38 // ensure that this is not required for ES6 classes with Flow.
39
40 it('should filter out context not in contextTypes', () => {
41 - var Component = React.createClass({
42 - contextTypes: {
43 - foo: React.PropTypes.string,
44 - },
45 -
46 - render: function() {
41 + class Component extends React.Component {
42 + render() {
43 return <div />;
48 - },
49 - });
50 -
51 - var ComponentInFooBarContext = React.createClass({
52 - childContextTypes: {
53 - foo: React.PropTypes.string,
54 - bar: React.PropTypes.number,
55 - },
44 + }
45 + }
46 + Component.contextTypes = {
47 + foo: React.PropTypes.string,
48 + };
49
57 - getChildContext: function() {
50 + class ComponentInFooBarContext extends React.Component {
51 + getChildContext() {
52 return {
53 foo: 'abc',
54 bar: 123,
55 };
62 - },
56 + }
57
64 - render: function() {
58 + render() {
59 return <Component ref="child" />;
66 - },
67 - });
60 + }
61 + }
62 + ComponentInFooBarContext.childContextTypes = {
63 + foo: React.PropTypes.string,
64 + bar: React.PropTypes.number,
65 + };
66
67 var instance = ReactTestUtils.renderIntoDocument(
68 <ComponentInFooBarContext />,
@@ -77,47 +75,45 @@ describe('ReactContextValidator', () => {
75 var actualShouldComponentUpdate;
76 var actualComponentWillUpdate;
77
80 - var Parent = React.createClass({
81 - childContextTypes: {
82 - foo: React.PropTypes.string.isRequired,
83 - bar: React.PropTypes.string.isRequired,
84 - },
85 -
86 - getChildContext: function() {
78 + class Parent extends React.Component {
79 + getChildContext() {
80 return {
81 foo: this.props.foo,
82 bar: 'bar',
83 };
91 - },
84 + }
85
93 - render: function() {
86 + render() {
87 return <Component />;
95 - },
96 - });
97 -
98 - var Component = React.createClass({
99 - contextTypes: {
100 - foo: React.PropTypes.string,
101 - },
88 + }
89 + }
90 + Parent.childContextTypes = {
91 + foo: React.PropTypes.string.isRequired,
92 + bar: React.PropTypes.string.isRequired,
93 + };
94
103 - componentWillReceiveProps: function(nextProps, nextContext) {
95 + class Component extends React.Component {
96 + componentWillReceiveProps(nextProps, nextContext) {
97 actualComponentWillReceiveProps = nextContext;
98 return true;
106 - },
99 + }
100
108 - shouldComponentUpdate: function(nextProps, nextState, nextContext) {
101 + shouldComponentUpdate(nextProps, nextState, nextContext) {
102 actualShouldComponentUpdate = nextContext;
103 return true;
111 - },
104 + }
105
113 - componentWillUpdate: function(nextProps, nextState, nextContext) {
106 + componentWillUpdate(nextProps, nextState, nextContext) {
107 actualComponentWillUpdate = nextContext;
115 - },
108 + }
109
117 - render: function() {
110 + render() {
111 return <div />;
119 - },
120 - });
112 + }
113 + }
114 + Component.contextTypes = {
115 + foo: React.PropTypes.string,
116 + };
117
118 var container = document.createElement('div');
119 ReactDOM.render(<Parent foo="abc" />, container);
@@ -130,37 +126,36 @@ describe('ReactContextValidator', () => {
126 it('should pass previous context to lifecycles', () => {
127 var actualComponentDidUpdate;
128
133 - var Parent = React.createClass({
134 - childContextTypes: {
135 - foo: React.PropTypes.string.isRequired,
136 - bar: React.PropTypes.string.isRequired,
137 - },
138 -
139 - getChildContext: function() {
129 + class Parent extends React.Component {
130 + getChildContext() {
131 return {
132 foo: this.props.foo,
133 bar: 'bar',
134 };
144 - },
135 + }
136
146 - render: function() {
137 + render() {
138 return <Component />;
148 - },
149 - });
150 -
151 - var Component = React.createClass({
152 - contextTypes: {
153 - foo: React.PropTypes.string,
154 - },
139 + }
140 + }
141 + Parent.childContextTypes = {
142 + foo: React.PropTypes.string.isRequired,
143 + bar: React.PropTypes.string.isRequired,
144 + };
145
156 - componentDidUpdate: function(prevProps, prevState, prevContext) {
146 + class Component extends React.Component {
147 + componentDidUpdate(prevProps, prevState, prevContext) {
148 actualComponentDidUpdate = prevContext;
158 - },
149 + }
150
160 - render: function() {
151 + render() {
152 return <div />;
162 - },
163 - });
153 + }
154 + }
155 + Component.contextTypes = {
156 + foo: React.PropTypes.string,
157 + };
158 +
159
160 var container = document.createElement('div');
161 ReactDOM.render(<Parent foo="abc" />, container);
@@ -171,15 +166,14 @@ describe('ReactContextValidator', () => {
166 it('should check context types', () => {
167 spyOn(console, 'error');
168
174 - var Component = React.createClass({
175 - contextTypes: {
176 - foo: React.PropTypes.string.isRequired,
177 - },
178 -
179 - render: function() {
169 + class Component extends React.Component {
170 + render() {
171 return <div />;
181 - },
182 - });
172 + }
173 + }
174 + Component.contextTypes = {
175 + foo: React.PropTypes.string.isRequired,
176 + };
177
178 ReactTestUtils.renderIntoDocument(<Component />);
179
@@ -191,21 +185,20 @@ describe('ReactContextValidator', () => {
185 ' in Component (at **)',
186 );
187
194 - var ComponentInFooStringContext = React.createClass({
195 - childContextTypes: {
196 - foo: React.PropTypes.string,
197 - },
198 -
199 - getChildContext: function() {
188 + class ComponentInFooStringContext extends React.Component {
189 + getChildContext() {
190 return {
191 foo: this.props.fooValue,
192 };
203 - },
193 + }
194
205 - render: function() {
195 + render() {
196 return <Component />;
207 - },
208 - });
197 + }
198 + }
199 + ComponentInFooStringContext.childContextTypes = {
200 + foo: React.PropTypes.string,
201 + };
202
203 ReactTestUtils.renderIntoDocument(
204 <ComponentInFooStringContext fooValue={'bar'} />,
@@ -214,21 +207,20 @@ describe('ReactContextValidator', () => {
207 // Previous call should not error
208 expectDev(console.error.calls.count()).toBe(1);
209
217 - var ComponentInFooNumberContext = React.createClass({
218 - childContextTypes: {
219 - foo: React.PropTypes.number,
220 - },
221 -
222 - getChildContext: function() {
210 + class ComponentInFooNumberContext extends React.Component {
211 + getChildContext() {
212 return {
213 foo: this.props.fooValue,
214 };
226 - },
215 + }
216
228 - render: function() {
217 + render() {
218 return <Component />;
230 - },
231 - });
219 + }
220 + }
221 + ComponentInFooNumberContext.childContextTypes = {
222 + foo: React.PropTypes.number,
223 + };
224
225 ReactTestUtils.renderIntoDocument(
226 <ComponentInFooNumberContext fooValue={123} />,
@@ -247,20 +239,19 @@ describe('ReactContextValidator', () => {
239 it('should check child context types', () => {
240 spyOn(console, 'error');
241
250 - var Component = React.createClass({
251 - childContextTypes: {
252 - foo: React.PropTypes.string.isRequired,
253 - bar: React.PropTypes.number,
254 - },
255 -
256 - getChildContext: function() {
242 + class Component extends React.Component {
243 + getChildContext() {
244 return this.props.testContext;
258 - },
245 + }
246
260 - render: function() {
247 + render() {
248 return <div />;
262 - },
263 - });
249 + }
250 + }
251 + Component.childContextTypes = {
252 + foo: React.PropTypes.string.isRequired,
253 + bar: React.PropTypes.number,
254 + };
255
256 ReactTestUtils.renderIntoDocument(<Component testContext={{bar: 123}} />);
257 expectDev(console.error.calls.count()).toBe(1);
@@ -362,16 +353,16 @@ describe('ReactContextValidator', () => {
353 }
354
355 var childContext;
365 - var ChildContextConsumer = React.createClass({
366 - contextTypes: {
367 - bar: React.PropTypes.string.isRequired,
368 - foo: React.PropTypes.string.isRequired,
369 - },
370 - render: function() {
356 + class ChildContextConsumer extends React.Component {
357 + render() {
358 childContext = this.context;
359 return <div />;
373 - },
374 - });
360 + }
361 + }
362 + ChildContextConsumer.contextTypes = {
363 + bar: React.PropTypes.string.isRequired,
364 + foo: React.PropTypes.string.isRequired,
365 + };
366
367 ReactTestUtils.renderIntoDocument(<ParentContextProvider />);
368 expect(childContext.bar).toBeUndefined();
src/isomorphic/classic/element/__tests__/ReactElement-test.js
+74 -140
@@ -34,11 +34,11 @@ describe('ReactElement', () => {
34 ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
35 // NOTE: We're explicitly not using JSX here. This is intended to test
36 // classic JS without JSX.
37 - ComponentClass = React.createClass({
38 - render: function() {
37 + ComponentClass = class extends React.Component {
38 + render() {
39 return React.createElement('div');
40 - },
41 - });
40 + }
41 + };
42 });
43
44 afterEach(() => {
@@ -59,37 +59,7 @@ describe('ReactElement', () => {
59 expect(element.props).toEqual({});
60 });
61
62 - it('should warn when `key` is being accessed on createClass element', () => {
63 - spyOn(console, 'error');
64 - var container = document.createElement('div');
65 - var Child = React.createClass({
66 - render: function() {
67 - return <div> {this.props.key} </div>;
68 - },
69 - });
70 - var Parent = React.createClass({
71 - render: function() {
72 - return (
73 - <div>
74 - <Child key="0" />
75 - <Child key="1" />
76 - <Child key="2" />
77 - </div>
78 - );
79 - },
80 - });
81 - expectDev(console.error.calls.count()).toBe(0);
82 - ReactDOM.render(<Parent />, container);
83 - expectDev(console.error.calls.count()).toBe(1);
84 - expectDev(console.error.calls.argsFor(0)[0]).toContain(
85 - 'Child: `key` is not a prop. Trying to access it will result ' +
86 - 'in `undefined` being returned. If you need to access the same ' +
87 - 'value within the child component, you should pass it as a different ' +
88 - 'prop. (https://fb.me/react-special-props)',
89 - );
90 - });
91 -
92 - it('should warn when `key` is being accessed on ES class element', () => {
62 + it('should warn when `key` is being accessed on composite element', () => {
63 spyOn(console, 'error');
64 var container = document.createElement('div');
65 class Child extends React.Component {
@@ -97,8 +67,8 @@ describe('ReactElement', () => {
67 return <div> {this.props.key} </div>;
68 }
69 }
100 - var Parent = React.createClass({
101 - render: function() {
70 + class Parent extends React.Component {
71 + render() {
72 return (
73 <div>
74 <Child key="0" />
@@ -106,9 +76,9 @@ describe('ReactElement', () => {
76 <Child key="2" />
77 </div>
78 );
109 - },
110 - });
111 - expectDev(console.error.calls.count()).toBe(0);
79 + }
80 + }
81 + expect(console.error.calls.count()).toBe(0);
82 ReactDOM.render(<Parent />, container);
83 expectDev(console.error.calls.count()).toBe(1);
84 expectDev(console.error.calls.argsFor(0)[0]).toContain(
@@ -136,21 +106,21 @@ describe('ReactElement', () => {
106 it('should warn when `ref` is being accessed', () => {
107 spyOn(console, 'error');
108 var container = document.createElement('div');
139 - var Child = React.createClass({
140 - render: function() {
109 + class Child extends React.Component {
110 + render() {
111 return <div> {this.props.ref} </div>;
142 - },
143 - });
144 - var Parent = React.createClass({
145 - render: function() {
112 + }
113 + }
114 + class Parent extends React.Component {
115 + render() {
116 return (
117 <div>
118 <Child ref="childElement" />
119 </div>
120 );
151 - },
152 - });
153 - expectDev(console.error.calls.count()).toBe(0);
121 + }
122 + }
123 + expect(console.error.calls.count()).toBe(0);
124 ReactDOM.render(<Parent />, container);
125 expectDev(console.error.calls.count()).toBe(1);
126 expectDev(console.error.calls.argsFor(0)[0]).toContain(
@@ -257,12 +227,12 @@ describe('ReactElement', () => {
227 var Component = React.createFactory(ComponentClass);
228 var element;
229
260 - var Wrapper = React.createClass({
261 - render: function() {
230 + class Wrapper extends React.Component {
231 + render() {
232 element = Component();
233 return element;
264 - },
265 - });
234 + }
235 + }
236
237 var instance = ReactTestUtils.renderIntoDocument(
238 React.createElement(Wrapper),
@@ -324,19 +294,12 @@ describe('ReactElement', () => {
294 it('allows static methods to be called using the type property', () => {
295 spyOn(console, 'error');
296
327 - var StaticMethodComponentClass = React.createClass({
328 - statics: {
329 - someStaticMethod: function() {
330 - return 'someReturnValue';
331 - },
332 - },
333 - getInitialState: function() {
334 - return {valueToReturn: 'hi'};
335 - },
336 - render: function() {
297 + class StaticMethodComponentClass extends React.Component {
298 + render() {
299 return React.createElement('div');
338 - },
339 - });
300 + }
301 + }
302 + StaticMethodComponentClass.someStaticMethod = () => 'someReturnValue';
303
304 var element = React.createElement(StaticMethodComponentClass);
305 expect(element.type.someStaticMethod()).toBe('someReturnValue');
@@ -346,11 +309,11 @@ describe('ReactElement', () => {
309 // NOTE: We're explicitly not using JSX here. This is intended to test
310 // classic JS without JSX.
311 it('identifies valid elements', () => {
349 - var Component = React.createClass({
350 - render: function() {
312 + class Component extends React.Component {
313 + render() {
314 return React.createElement('div');
352 - },
353 - });
315 + }
316 + }
317
318 expect(React.isValidElement(React.createElement('div'))).toEqual(true);
319 expect(React.isValidElement(React.createElement(Component))).toEqual(true);
@@ -367,21 +330,6 @@ describe('ReactElement', () => {
330 expect(React.isValidElement(JSON.parse(jsonElement))).toBe(true);
331 });
332
370 - it('allows the use of PropTypes validators in statics', () => {
371 - // TODO: This test was added to cover a special case where we proxied
372 - // methods. However, we don't do that any more so this test can probably
373 - // be removed. Leaving it in classic as a safety precaution.
374 - var Component = React.createClass({
375 - render: () => null,
376 - statics: {
377 - specialType: React.PropTypes.shape({monkey: React.PropTypes.any}),
378 - },
379 - });
380 -
381 - expect(typeof Component.specialType).toBe('function');
382 - expect(typeof Component.specialType.isRequired).toBe('function');
383 - });
384 -
333 // NOTE: We're explicitly not using JSX here. This is intended to test
334 // classic JS without JSX.
335 it('is indistinguishable from a plain object', () => {
@@ -393,14 +341,12 @@ describe('ReactElement', () => {
341 // NOTE: We're explicitly not using JSX here. This is intended to test
342 // classic JS without JSX.
343 it('should use default prop value when removing a prop', () => {
396 - var Component = React.createClass({
397 - getDefaultProps: function() {
398 - return {fruit: 'persimmon'};
399 - },
400 - render: function() {
344 + class Component extends React.Component {
345 + render() {
346 return React.createElement('span');
402 - },
403 - });
347 + }
348 + }
349 + Component.defaultProps = {fruit: 'persimmon'};
350
351 var container = document.createElement('div');
352 var instance = ReactDOM.render(
@@ -416,14 +362,12 @@ describe('ReactElement', () => {
362 // NOTE: We're explicitly not using JSX here. This is intended to test
363 // classic JS without JSX.
364 it('should normalize props with default values', () => {
419 - var Component = React.createClass({
420 - getDefaultProps: function() {
421 - return {prop: 'testKey'};
422 - },
423 - render: function() {
365 + class Component extends React.Component {
366 + render() {
367 return React.createElement('span', null, this.props.prop);
425 - },
426 - });
368 + }
369 + }
370 + Component.defaultProps = {prop: 'testKey'};
371
372 var instance = ReactTestUtils.renderIntoDocument(
373 React.createElement(Component),
@@ -437,8 +381,8 @@ describe('ReactElement', () => {
381 });
382
383 it('throws when changing a prop (in dev) after element creation', () => {
440 - var Outer = React.createClass({
441 - render: function() {
384 + class Outer extends React.Component {
385 + render() {
386 var el = <div className="moo" />;
387
388 expect(function() {
@@ -447,17 +391,16 @@ describe('ReactElement', () => {
391 expect(el.props.className).toBe('moo');
392
393 return el;
450 - },
451 - });
394 + }
395 + }
396 var outer = ReactTestUtils.renderIntoDocument(<Outer color="orange" />);
397 expect(ReactDOM.findDOMNode(outer).className).toBe('moo');
398 });
399
400 it('throws when adding a prop (in dev) after element creation', () => {
401 var container = document.createElement('div');
458 - var Outer = React.createClass({
459 - getDefaultProps: () => ({sound: 'meow'}),
460 - render: function() {
402 + class Outer extends React.Component {
403 + render() {
404 var el = <div>{this.props.sound}</div>;
405
406 expect(function() {
@@ -467,8 +410,9 @@ describe('ReactElement', () => {
410 expect(el.props.className).toBe(undefined);
411
412 return el;
470 - },
471 - });
413 + }
414 + }
415 + Outer.defaultProps = {sound: 'meow'};
416 var outer = ReactDOM.render(<Outer />, container);
417 expect(ReactDOM.findDOMNode(outer).textContent).toBe('meow');
418 expect(ReactDOM.findDOMNode(outer).className).toBe('');
@@ -476,11 +420,11 @@ describe('ReactElement', () => {
420
421 it('does not warn for NaN props', () => {
422 spyOn(console, 'error');
479 - var Test = React.createClass({
480 - render: function() {
423 + class Test extends React.Component {
424 + render() {
425 return <div />;
482 - },
483 - });
426 + }
427 + }
428 var test = ReactTestUtils.renderIntoDocument(<Test value={+undefined} />);
429 expect(test.props.value).toBeNaN();
430 expectDev(console.error.calls.count()).toBe(0);
@@ -508,11 +452,11 @@ describe('ReactElement', () => {
452
453 React = require('react');
454
511 - var Component = React.createClass({
512 - render: function() {
455 + class Component extends React.Component {
456 + render() {
457 return React.createElement('div');
514 - },
515 - });
458 + }
459 + }
460
461 expect(React.isValidElement(React.createElement('div'))).toEqual(true);
462 expect(React.isValidElement(React.createElement(Component))).toEqual(true);
@@ -544,16 +488,16 @@ describe('comparing jsx vs .createFactory() vs .createElement()', () => {
488 describe('when using jsx only', () => {
489 var Parent, instance;
490 beforeEach(() => {
547 - Parent = React.createClass({
548 - render: function() {
491 + Parent = class extends React.Component {
492 + render() {
493 return (
494 <div>
495 <Child ref="child" foo="foo value">children value</Child>
496 </div>
497 );
554 - },
555 - });
556 - instance = ReactTestUtils.renderIntoDocument(<Parent />);
498 + }
499 + };
500 + instance = ReactTestUtils.renderIntoDocument(<Parent/>);
501 });
502
503 it('should scry children but cannot', () => {
@@ -580,14 +524,11 @@ describe('comparing jsx vs .createFactory() vs .createElement()', () => {
524 var factory, instance;
525 beforeEach(() => {
526 var childFactory = React.createFactory(Child);
583 - var Parent = React.createClass({
584 - render: function() {
585 - return React.DOM.div(
586 - {},
587 - childFactory({ref: 'child', foo: 'foo value'}, 'children value'),
588 - );
589 - },
590 - });
527 + class Parent extends React.Component {
528 + render() {
529 + return React.DOM.div({}, childFactory({ ref: 'child', foo: 'foo value' }, 'children value'));
530 + }
531 + }
532 factory = React.createFactory(Parent);
533 instance = ReactTestUtils.renderIntoDocument(factory());
534 });
@@ -615,18 +556,11 @@ describe('comparing jsx vs .createFactory() vs .createElement()', () => {
556 describe('when using parent that uses .createElement()', () => {
557 var factory, instance;
558 beforeEach(() => {
618 - var Parent = React.createClass({
619 - render: function() {
620 - return React.DOM.div(
621 - {},
622 - React.createElement(
623 - Child,
624 - {ref: 'child', foo: 'foo value'},
625 - 'children value',
626 - ),
627 - );
628 - },
629 - });
559 + class Parent extends React.Component {
560 + render() {
561 + return React.DOM.div({}, React.createElement(Child, { ref: 'child', foo: 'foo value' }, 'children value'));
562 + }
563 + }
564 factory = React.createFactory(Parent);
565 instance = ReactTestUtils.renderIntoDocument(factory());
566 });
src/isomorphic/classic/element/__tests__/ReactElementClone-test.js
+94 -97
@@ -25,52 +25,52 @@ describe('ReactElementClone', () => {
25
26 // NOTE: We're explicitly not using JSX here. This is intended to test
27 // classic JS without JSX.
28 - ComponentClass = React.createClass({
29 - render: function() {
28 + ComponentClass = class extends React.Component {
29 + render() {
30 return React.createElement('div');
31 - },
32 - });
31 + }
32 + };
33 });
34
35 it('should clone a DOM component with new props', () => {
36 - var Grandparent = React.createClass({
37 - render: function() {
36 + class Grandparent extends React.Component {
37 + render() {
38 return <Parent child={<div className="child" />} />;
39 - },
40 - });
41 - var Parent = React.createClass({
42 - render: function() {
39 + }
40 + }
41 + class Parent extends React.Component {
42 + render() {
43 return (
44 <div className="parent">
45 {React.cloneElement(this.props.child, {className: 'xyz'})}
46 </div>
47 );
48 - },
49 - });
48 + }
49 + }
50 var component = ReactTestUtils.renderIntoDocument(<Grandparent />);
51 expect(ReactDOM.findDOMNode(component).childNodes[0].className).toBe('xyz');
52 });
53
54 it('should clone a composite component with new props', () => {
55 - var Child = React.createClass({
56 - render: function() {
55 + class Child extends React.Component {
56 + render() {
57 return <div className={this.props.className} />;
58 - },
59 - });
60 - var Grandparent = React.createClass({
61 - render: function() {
58 + }
59 + }
60 + class Grandparent extends React.Component {
61 + render() {
62 return <Parent child={<Child className="child" />} />;
63 - },
64 - });
65 - var Parent = React.createClass({
66 - render: function() {
63 + }
64 + }
65 + class Parent extends React.Component {
66 + render() {
67 return (
68 <div className="parent">
69 {React.cloneElement(this.props.child, {className: 'xyz'})}
70 </div>
71 );
72 - },
73 - });
72 + }
73 + }
74 var component = ReactTestUtils.renderIntoDocument(<Grandparent />);
75 expect(ReactDOM.findDOMNode(component).childNodes[0].className).toBe('xyz');
76 });
@@ -81,43 +81,43 @@ describe('ReactElementClone', () => {
81 });
82
83 it('should keep the original ref if it is not overridden', () => {
84 - var Grandparent = React.createClass({
85 - render: function() {
84 + class Grandparent extends React.Component {
85 + render() {
86 return <Parent child={<div ref="yolo" />} />;
87 - },
88 - });
87 + }
88 + }
89
90 - var Parent = React.createClass({
91 - render: function() {
90 + class Parent extends React.Component {
91 + render() {
92 return (
93 <div>
94 {React.cloneElement(this.props.child, {className: 'xyz'})}
95 </div>
96 );
97 - },
98 - });
97 + }
98 + }
99
100 var component = ReactTestUtils.renderIntoDocument(<Grandparent />);
101 expect(component.refs.yolo.tagName).toBe('DIV');
102 });
103
104 it('should transfer the key property', () => {
105 - var Component = React.createClass({
106 - render: function() {
105 + class Component extends React.Component {
106 + render() {
107 return null;
108 - },
109 - });
108 + }
109 + }
110 var clone = React.cloneElement(<Component />, {key: 'xyz'});
111 expect(clone.key).toBe('xyz');
112 });
113
114 it('should transfer children', () => {
115 - var Component = React.createClass({
116 - render: function() {
115 + class Component extends React.Component {
116 + render() {
117 expect(this.props.children).toBe('xyz');
118 return <div />;
119 - },
120 - });
119 + }
120 + }
121
122 ReactTestUtils.renderIntoDocument(
123 React.cloneElement(<Component />, {children: 'xyz'}),
@@ -125,12 +125,12 @@ describe('ReactElementClone', () => {
125 });
126
127 it('should shallow clone children', () => {
128 - var Component = React.createClass({
129 - render: function() {
128 + class Component extends React.Component {
129 + render() {
130 expect(this.props.children).toBe('xyz');
131 return <div />;
132 - },
133 - });
132 + }
133 + }
134
135 ReactTestUtils.renderIntoDocument(
136 React.cloneElement(<Component>xyz</Component>, {}),
@@ -138,11 +138,11 @@ describe('ReactElementClone', () => {
138 });
139
140 it('should accept children as rest arguments', () => {
141 - var Component = React.createClass({
142 - render: function() {
141 + class Component extends React.Component {
142 + render() {
143 return null;
144 - },
145 - });
144 + }
145 + }
146
147 var clone = React.cloneElement(
148 <Component>xyz</Component>,
@@ -175,41 +175,39 @@ describe('ReactElementClone', () => {
175 });
176
177 it('should support keys and refs', () => {
178 - var Parent = React.createClass({
179 - render: function() {
180 - var clone = React.cloneElement(this.props.children, {
181 - key: 'xyz',
182 - ref: 'xyz',
183 - });
178 + class Parent extends React.Component {
179 + render() {
180 + var clone =
181 + React.cloneElement(this.props.children, {key: 'xyz', ref: 'xyz'});
182 expect(clone.key).toBe('xyz');
183 expect(clone.ref).toBe('xyz');
184 return <div>{clone}</div>;
187 - },
188 - });
185 + }
186 + }
187
190 - var Grandparent = React.createClass({
191 - render: function() {
188 + class Grandparent extends React.Component {
189 + render() {
190 return <Parent ref="parent"><span key="abc" /></Parent>;
193 - },
194 - });
191 + }
192 + }
193
194 var component = ReactTestUtils.renderIntoDocument(<Grandparent />);
195 expect(component.refs.parent.refs.xyz.tagName).toBe('SPAN');
196 });
197
198 it('should steal the ref if a new ref is specified', () => {
201 - var Parent = React.createClass({
202 - render: function() {
199 + class Parent extends React.Component {
200 + render() {
201 var clone = React.cloneElement(this.props.children, {ref: 'xyz'});
202 return <div>{clone}</div>;
205 - },
206 - });
203 + }
204 + }
205
208 - var Grandparent = React.createClass({
209 - render: function() {
206 + class Grandparent extends React.Component {
207 + render() {
208 return <Parent ref="parent"><span ref="child" /></Parent>;
211 - },
212 - });
209 + }
210 + }
211
212 var component = ReactTestUtils.renderIntoDocument(<Grandparent />);
213 expect(component.refs.child).toBeUndefined();
@@ -217,12 +215,12 @@ describe('ReactElementClone', () => {
215 });
216
217 it('should overwrite props', () => {
220 - var Component = React.createClass({
221 - render: function() {
218 + class Component extends React.Component {
219 + render() {
220 expect(this.props.myprop).toBe('xyz');
221 return <div />;
224 - },
225 - });
222 + }
223 + }
224
225 ReactTestUtils.renderIntoDocument(
226 React.cloneElement(<Component myprop="abc" />, {myprop: 'xyz'}),
@@ -230,14 +228,12 @@ describe('ReactElementClone', () => {
228 });
229
230 it('should normalize props with default values', () => {
233 - var Component = React.createClass({
234 - getDefaultProps: function() {
235 - return {prop: 'testKey'};
236 - },
237 - render: function() {
231 + class Component extends React.Component {
232 + render() {
233 return <span />;
239 - },
240 - });
234 + }
235 + }
236 + Component.defaultProps = {prop: 'testKey'};
237
238 var instance = React.createElement(Component);
239 var clonedInstance = React.cloneElement(instance, {prop: undefined});
@@ -289,26 +285,27 @@ describe('ReactElementClone', () => {
285
286 it('should check declared prop types after clone', () => {
287 spyOn(console, 'error');
292 - var Component = React.createClass({
293 - propTypes: {
294 - color: React.PropTypes.string.isRequired,
295 - },
296 - render: function() {
288 + class Component extends React.Component {
289 + render() {
290 return React.createElement('div', null, 'My color is ' + this.color);
298 - },
299 - });
300 - var Parent = React.createClass({
301 - render: function() {
291 + }
292 + }
293 + Component.propTypes = {
294 + color: React.PropTypes.string.isRequired,
295 + };
296 + class Parent extends React.Component {
297 + render() {
298 return React.cloneElement(this.props.child, {color: 123});
303 - },
304 - });
305 - var GrandParent = React.createClass({
306 - render: function() {
307 - return React.createElement(Parent, {
308 - child: React.createElement(Component, {color: 'red'}),
309 - });
310 - },
311 - });
299 + }
300 + }
301 + class GrandParent extends React.Component {
302 + render() {
303 + return React.createElement(
304 + Parent,
305 + { child: React.createElement(Component, {color: 'red'}) }
306 + );
307 + }
308 + }
309 ReactTestUtils.renderIntoDocument(React.createElement(GrandParent));
310 expectDev(console.error.calls.count()).toBe(1);
311 expectDev(console.error.calls.argsFor(0)[0]).toBe(
src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js
+82 -105
@@ -31,11 +31,11 @@ describe('ReactElementValidator', () => {
31 React = require('react');
32 ReactDOM = require('react-dom');
33 ReactTestUtils = require('ReactTestUtils');
34 - ComponentClass = React.createClass({
35 - render: function() {
34 + ComponentClass = class extends React.Component {
35 + render() {
36 return React.createElement('div');
37 - },
38 - });
37 + }
38 + };
39 });
40
41 it('warns for keys for arrays of elements in rest args', () => {
@@ -54,21 +54,19 @@ describe('ReactElementValidator', () => {
54 spyOn(console, 'error');
55 var Component = React.createFactory(ComponentClass);
56
57 - var InnerClass = React.createClass({
58 - displayName: 'InnerClass',
59 - render: function() {
57 + class InnerClass extends React.Component {
58 + render() {
59 return Component(null, this.props.childSet);
61 - },
62 - });
60 + }
61 + }
62
63 var InnerComponent = React.createFactory(InnerClass);
64
66 - var ComponentWrapper = React.createClass({
67 - displayName: 'ComponentWrapper',
68 - render: function() {
69 - return InnerComponent({childSet: [Component(), Component()]});
70 - },
71 - });
65 + class ComponentWrapper extends React.Component {
66 + render() {
67 + return InnerComponent({childSet: [Component(), Component()] });
68 + }
69 + }
70
71 ReactTestUtils.renderIntoDocument(React.createElement(ComponentWrapper));
72
@@ -83,12 +81,10 @@ describe('ReactElementValidator', () => {
81 it('warns for keys for arrays with no owner or parent info', () => {
82 spyOn(console, 'error');
83
86 - var Anonymous = React.createClass({
87 - displayName: undefined,
88 - render: function() {
89 - return <div />;
90 - },
91 - });
84 + function Anonymous() {
85 + return <div />;
86 + }
87 + Object.defineProperty(Anonymous, 'name', { value: undefined });
88
89 var divs = [<div />, <div />];
90 ReactTestUtils.renderIntoDocument(<Anonymous>{divs}</Anonymous>);
@@ -119,23 +115,17 @@ describe('ReactElementValidator', () => {
115 it('warns for keys with component stack info', () => {
116 spyOn(console, 'error');
117
122 - var Component = React.createClass({
123 - render: function() {
124 - return <div>{[<div />, <div />]}</div>;
125 - },
126 - });
118 + function Component() {
119 + return <div>{[<div />, <div />]}</div>;
120 + }
121
128 - var Parent = React.createClass({
129 - render: function() {
130 - return React.cloneElement(this.props.child);
131 - },
132 - });
122 + function Parent(props) {
123 + return React.cloneElement(props.child);
124 + }
125
134 - var GrandParent = React.createClass({
135 - render: function() {
136 - return <Parent child={<Component />} />;
137 - },
138 - });
126 + function GrandParent() {
127 + return <Parent child={<Component />} />;
128 + }
129
130 ReactTestUtils.renderIntoDocument(<GrandParent />);
131
@@ -154,16 +144,14 @@ describe('ReactElementValidator', () => {
144 it('does not warn for keys when passing children down', () => {
145 spyOn(console, 'error');
146
157 - var Wrapper = React.createClass({
158 - render: function() {
159 - return (
160 - <div>
161 - {this.props.children}
162 - <footer />
163 - </div>
164 - );
165 - },
166 - });
147 + function Wrapper(props) {
148 + return (
149 + <div>
150 + {props.children}
151 + <footer />
152 + </div>
153 + );
154 + }
155
156 ReactTestUtils.renderIntoDocument(
157 <Wrapper>
@@ -255,19 +243,15 @@ describe('ReactElementValidator', () => {
243 // component, we give a small hint as to which parent instantiated that
244 // component as per warnings about key usage in ReactElementValidator.
245 spyOn(console, 'error');
258 - var MyComp = React.createClass({
259 - propTypes: {
260 - color: React.PropTypes.string,
261 - },
262 - render: function() {
263 - return React.createElement('div', null, 'My color is ' + this.color);
264 - },
265 - });
266 - var ParentComp = React.createClass({
267 - render: function() {
268 - return React.createElement(MyComp, {color: 123});
269 - },
270 - });
246 + function MyComp(props) {
247 + return React.createElement('div', null, 'My color is ' + props.color);
248 + }
249 + MyComp.propTypes = {
250 + color: React.PropTypes.string,
251 + };
252 + function ParentComp() {
253 + return React.createElement(MyComp, {color: 123});
254 + }
255 ReactTestUtils.renderIntoDocument(React.createElement(ParentComp));
256 expectDev(console.error.calls.argsFor(0)[0]).toBe(
257 'Warning: Failed prop type: ' +
@@ -325,11 +309,9 @@ describe('ReactElementValidator', () => {
309
310 it('includes the owner name when passing null, undefined, boolean, or number', () => {
311 spyOn(console, 'error');
328 - var ParentComp = React.createClass({
329 - render: function() {
330 - return React.createElement(null);
331 - },
332 - });
312 + function ParentComp() {
313 + return React.createElement(null);
314 + }
315 expect(function() {
316 ReactTestUtils.renderIntoDocument(React.createElement(ParentComp));
317 }).toThrowError(
@@ -349,15 +331,13 @@ describe('ReactElementValidator', () => {
331 it('should check default prop values', () => {
332 spyOn(console, 'error');
333
352 - var Component = React.createClass({
353 - propTypes: {prop: React.PropTypes.string.isRequired},
354 - getDefaultProps: function() {
355 - return {prop: null};
356 - },
357 - render: function() {
334 + class Component extends React.Component {
335 + render() {
336 return React.createElement('span', null, this.props.prop);
359 - },
360 - });
337 + }
338 + }
339 + Component.propTypes = {prop: React.PropTypes.string.isRequired};
340 + Component.defaultProps = {prop: null};
341
342 ReactTestUtils.renderIntoDocument(React.createElement(Component));
343
@@ -372,15 +352,13 @@ describe('ReactElementValidator', () => {
352 it('should not check the default for explicit null', () => {
353 spyOn(console, 'error');
354
375 - var Component = React.createClass({
376 - propTypes: {prop: React.PropTypes.string.isRequired},
377 - getDefaultProps: function() {
378 - return {prop: 'text'};
379 - },
380 - render: function() {
355 + class Component extends React.Component {
356 + render() {
357 return React.createElement('span', null, this.props.prop);
382 - },
383 - });
358 + }
359 + }
360 + Component.propTypes = {prop: React.PropTypes.string.isRequired};
361 + Component.defaultProps = {prop: 'text'};
362
363 ReactTestUtils.renderIntoDocument(
364 React.createElement(Component, {prop: null}),
@@ -397,14 +375,14 @@ describe('ReactElementValidator', () => {
375 it('should check declared prop types', () => {
376 spyOn(console, 'error');
377
400 - var Component = React.createClass({
401 - propTypes: {
402 - prop: React.PropTypes.string.isRequired,
403 - },
404 - render: function() {
378 + class Component extends React.Component {
379 + render() {
380 return React.createElement('span', null, this.props.prop);
406 - },
407 - });
381 + }
382 + }
383 + Component.propTypes = {
384 + prop: React.PropTypes.string.isRequired,
385 + };
386
387 ReactTestUtils.renderIntoDocument(React.createElement(Component));
388 ReactTestUtils.renderIntoDocument(
@@ -437,14 +415,15 @@ describe('ReactElementValidator', () => {
415 it('should warn if a PropType creator is used as a PropType', () => {
416 spyOn(console, 'error');
417
440 - var Component = React.createClass({
441 - propTypes: {
442 - myProp: React.PropTypes.shape,
443 - },
444 - render: function() {
418 + class Component extends React.Component {
419 + render() {
420 return React.createElement('span', null, this.props.myProp.value);
446 - },
447 - });
421 +
422 + }
423 + }
424 + Component.propTypes = {
425 + myProp: React.PropTypes.shape,
426 + };
427
428 ReactTestUtils.renderIntoDocument(
429 React.createElement(Component, {myProp: {value: 'hi'}}),
@@ -462,11 +441,9 @@ describe('ReactElementValidator', () => {
441
442 it('should warn when accessing .type on an element factory', () => {
443 spyOn(console, 'error');
465 - var TestComponent = React.createClass({
466 - render: function() {
467 - return <div />;
468 - },
469 - });
444 + function TestComponent() {
445 + return <div />;
446 + }
447 var TestFactory = React.createFactory(TestComponent);
448 expect(TestFactory.type).toBe(TestComponent);
449 expectDev(console.error.calls.count()).toBe(1);
@@ -481,14 +458,14 @@ describe('ReactElementValidator', () => {
458
459 it('does not warn when using DOM node as children', () => {
460 spyOn(console, 'error');
484 - var DOMContainer = React.createClass({
485 - render: function() {
461 + class DOMContainer extends React.Component {
462 + render() {
463 return <div />;
487 - },
488 - componentDidMount: function() {
464 + }
465 + componentDidMount() {
466 ReactDOM.findDOMNode(this).appendChild(this.props.children);
490 - },
491 - });
467 + }
468 + }
469
470 var node = document.createElement('div');
471 // This shouldn't cause a stack overflow or any other problems (#3883)
src/isomorphic/classic/types/__tests__/ReactPropTypesProduction-test.js
+4 -7
@@ -205,13 +205,10 @@ describe('ReactPropTypesProduction', function() {
205
206 it('should not have been called', function() {
207 var spy = jest.fn();
208 - var Component = React.createClass({
209 - propTypes: {num: spy},
210 -
211 - render: function() {
212 - return <div />;
213 - },
214 - });
208 + function Component() {
209 + return <div />;
210 + }
211 + Component.propTypes = {num: spy};
212
213 var instance = <Component num={5} />;
214 ReactTestUtils.renderIntoDocument(instance);
src/renderers/__tests__/ReactComponentLifeCycle-test.js
+74 -63
@@ -225,23 +225,28 @@ describe('ReactComponentLifeCycle', () => {
225
226 it('should correctly determine if a component is mounted', () => {
227 spyOn(console, 'error');
228 - var Component = React.createClass({
229 - componentWillMount: function() {
230 - expect(this.isMounted()).toBeFalsy();
231 - },
232 - componentDidMount: function() {
233 - expect(this.isMounted()).toBeTruthy();
234 - },
235 - render: function() {
236 - expect(this.isMounted()).toBeFalsy();
237 - return <div />;
238 - },
239 - });
228 + class Component extends React.Component {
229 + _isMounted() {
230 + // No longer a public API, but we can test that it works internally by
231 + // reaching into the updater.
232 + return this.updater.isMounted(this);
233 + }
234 + componentWillMount() {
235 + expect(this._isMounted()).toBeFalsy();
236 + }
237 + componentDidMount() {
238 + expect(this._isMounted()).toBeTruthy();
239 + }
240 + render() {
241 + expect(this._isMounted()).toBeFalsy();
242 + return <div/>;
243 + }
244 + }
245
246 var element = <Component />;
247
248 var instance = ReactTestUtils.renderIntoDocument(element);
244 - expect(instance.isMounted()).toBeTruthy();
249 + expect(instance._isMounted()).toBeTruthy();
250
251 expectDev(console.error.calls.count()).toBe(1);
252 expectDev(console.error.calls.argsFor(0)[0]).toContain(
@@ -251,23 +256,28 @@ describe('ReactComponentLifeCycle', () => {
256
257 it('should correctly determine if a null component is mounted', () => {
258 spyOn(console, 'error');
254 - var Component = React.createClass({
255 - componentWillMount: function() {
256 - expect(this.isMounted()).toBeFalsy();
257 - },
258 - componentDidMount: function() {
259 - expect(this.isMounted()).toBeTruthy();
260 - },
261 - render: function() {
262 - expect(this.isMounted()).toBeFalsy();
259 + class Component extends React.Component {
260 + _isMounted() {
261 + // No longer a public API, but we can test that it works internally by
262 + // reaching into the updater.
263 + return this.updater.isMounted(this);
264 + }
265 + componentWillMount() {
266 + expect(this._isMounted()).toBeFalsy();
267 + }
268 + componentDidMount() {
269 + expect(this._isMounted()).toBeTruthy();
270 + }
271 + render() {
272 + expect(this._isMounted()).toBeFalsy();
273 return null;
264 - },
265 - });
274 + }
275 + }
276
277 var element = <Component />;
278
279 var instance = ReactTestUtils.renderIntoDocument(element);
270 - expect(instance.isMounted()).toBeTruthy();
280 + expect(instance._isMounted()).toBeTruthy();
281
282 expectDev(console.error.calls.count()).toBe(1);
283 expectDev(console.error.calls.argsFor(0)[0]).toContain(
@@ -276,38 +286,38 @@ describe('ReactComponentLifeCycle', () => {
286 });
287
288 it('isMounted should return false when unmounted', () => {
279 - var Component = React.createClass({
280 - render: function() {
281 - return <div />;
282 - },
283 - });
289 + class Component extends React.Component {
290 + render() {
291 + return <div/>;
292 + }
293 + }
294
295 var container = document.createElement('div');
296 var instance = ReactDOM.render(<Component />, container);
297
288 - expect(instance.isMounted()).toBe(true);
298 + // No longer a public API, but we can test that it works internally by
299 + // reaching into the updater.
300 + expect(instance.updater.isMounted(instance)).toBe(true);
301
302 ReactDOM.unmountComponentAtNode(container);
303
292 - expect(instance.isMounted()).toBe(false);
304 + expect(instance.updater.isMounted(instance)).toBe(false);
305 });
306
307 it('warns if findDOMNode is used inside render', () => {
308 spyOn(console, 'error');
297 - var Component = React.createClass({
298 - getInitialState: function() {
299 - return {isMounted: false};
300 - },
301 - componentDidMount: function() {
309 + class Component extends React.Component {
310 + state = {isMounted: false};
311 + componentDidMount() {
312 this.setState({isMounted: true});
303 - },
304 - render: function() {
313 + }
314 + render() {
315 if (this.state.isMounted) {
316 expect(ReactDOM.findDOMNode(this).tagName).toBe('DIV');
317 }
318 return <div />;
309 - },
310 - });
319 + }
320 + }
321
322 ReactTestUtils.renderIntoDocument(<Component />);
323 expectDev(console.error.calls.count()).toBe(1);
@@ -513,30 +523,31 @@ describe('ReactComponentLifeCycle', () => {
523 return true;
524 };
525 };
516 - var Outer = React.createClass({
517 - render: function() {
526 + class Outer extends React.Component {
527 + componentWillMount = logger('outer componentWillMount');
528 + componentDidMount = logger('outer componentDidMount');
529 + componentWillReceiveProps = logger('outer componentWillReceiveProps');
530 + shouldComponentUpdate = logger('outer shouldComponentUpdate');
531 + componentWillUpdate = logger('outer componentWillUpdate');
532 + componentDidUpdate = logger('outer componentDidUpdate');
533 + componentWillUnmount = logger('outer componentWillUnmount');
534 + render() {
535 return <div><Inner x={this.props.x} /></div>;
519 - },
520 - componentWillMount: logger('outer componentWillMount'),
521 - componentDidMount: logger('outer componentDidMount'),
522 - componentWillReceiveProps: logger('outer componentWillReceiveProps'),
523 - shouldComponentUpdate: logger('outer shouldComponentUpdate'),
524 - componentWillUpdate: logger('outer componentWillUpdate'),
525 - componentDidUpdate: logger('outer componentDidUpdate'),
526 - componentWillUnmount: logger('outer componentWillUnmount'),
527 - });
528 - var Inner = React.createClass({
529 - render: function() {
536 + }
537 + }
538 +
539 + class Inner extends React.Component {
540 + componentWillMount = logger('inner componentWillMount');
541 + componentDidMount = logger('inner componentDidMount');
542 + componentWillReceiveProps = logger('inner componentWillReceiveProps');
543 + shouldComponentUpdate = logger('inner shouldComponentUpdate');
544 + componentWillUpdate = logger('inner componentWillUpdate');
545 + componentDidUpdate = logger('inner componentDidUpdate');
546 + componentWillUnmount = logger('inner componentWillUnmount');
547 + render() {
548 return <span>{this.props.x}</span>;
531 - },
532 - componentWillMount: logger('inner componentWillMount'),
533 - componentDidMount: logger('inner componentDidMount'),
534 - componentWillReceiveProps: logger('inner componentWillReceiveProps'),
535 - shouldComponentUpdate: logger('inner shouldComponentUpdate'),
536 - componentWillUpdate: logger('inner componentWillUpdate'),
537 - componentDidUpdate: logger('inner componentDidUpdate'),
538 - componentWillUnmount: logger('inner componentWillUnmount'),
539 - });
549 + }
550 + }
551
552 var container = document.createElement('div');
553 log = [];
src/renderers/__tests__/ReactComponentTreeHook-test.js
+9 -2
@@ -41,8 +41,15 @@ describe('ReactComponentTreeHook', () => {
41 return addendum.replace(/\(at .+?:\d+\)/g, '(at **)');
42 }
43
44 - var Anon = React.createClass({displayName: null, render: () => null});
45 - var Orange = React.createClass({render: () => null});
44 + function Anon() {
45 + return null;
46 + }
47 + Object.defineProperty(Anon, 'name', {
48 + value: null,
49 + });
50 + function Orange() {
51 + return null;
52 + }
53
54 expectDev(getAddendum()).toBe('');
55 expectDev(getAddendum(<div />)).toBe('\n in div (at **)');
src/renderers/__tests__/ReactCompositeComponent-test.js
+19 -76
@@ -166,64 +166,6 @@ describe('ReactCompositeComponent', () => {
166 expect(instance.getAnchor().className).toBe('');
167 });
168
169 - it('should auto bind methods and values correctly', () => {
170 - spyOn(console, 'error');
171 -
172 - var ComponentClass = React.createClass({
173 - getInitialState: function() {
174 - return {valueToReturn: 'hi'};
175 - },
176 - methodToBeExplicitlyBound: function() {
177 - return this;
178 - },
179 - methodAutoBound: function() {
180 - return this;
181 - },
182 - render: function() {
183 - return <div />;
184 - },
185 - });
186 - var instance = <ComponentClass />;
187 -
188 - // Next, prove that once mounted, the scope is bound correctly to the actual
189 - // component.
190 - var mountedInstance = ReactTestUtils.renderIntoDocument(instance);
191 -
192 - expect(function() {
193 - mountedInstance.methodToBeExplicitlyBound.bind(instance)();
194 - }).not.toThrow();
195 - expect(function() {
196 - mountedInstance.methodAutoBound();
197 - }).not.toThrow();
198 -
199 - expectDev(console.error.calls.count()).toBe(1);
200 - var explicitlyBound = mountedInstance.methodToBeExplicitlyBound.bind(
201 - mountedInstance,
202 - );
203 - expectDev(console.error.calls.count()).toBe(2);
204 - var autoBound = mountedInstance.methodAutoBound;
205 -
206 - var context = {};
207 - expect(explicitlyBound.call(context)).toBe(mountedInstance);
208 - expect(autoBound.call(context)).toBe(mountedInstance);
209 -
210 - expect(explicitlyBound.call(mountedInstance)).toBe(mountedInstance);
211 - expect(autoBound.call(mountedInstance)).toBe(mountedInstance);
212 - });
213 -
214 - it('should not pass this to getDefaultProps', () => {
215 - var Component = React.createClass({
216 - getDefaultProps: function() {
217 - expect(this.render).not.toBeDefined();
218 - return {};
219 - },
220 - render: function() {
221 - return <div />;
222 - },
223 - });
224 - ReactTestUtils.renderIntoDocument(<Component />);
225 - });
226 -
169 it('should use default values for undefined props', () => {
170 class Component extends React.Component {
171 static defaultProps = {prop: 'testKey'};
@@ -1204,17 +1146,17 @@ describe('ReactCompositeComponent', () => {
1146 });
1147
1148 it('should replace state', () => {
1207 - var Moo = React.createClass({
1208 - getInitialState: function() {
1209 - return {x: 1};
1210 - },
1211 - render: function() {
1149 + class Moo extends React.Component {
1150 + state = {x: 1};
1151 + render() {
1152 return <div />;
1213 - },
1214 - });
1153 + }
1154 + }
1155
1156 var moo = ReactTestUtils.renderIntoDocument(<Moo />);
1217 - moo.replaceState({y: 2});
1157 + // No longer a public API, but we can test that it works internally by
1158 + // reaching into the updater.
1159 + moo.updater.enqueueReplaceState(moo, {y: 2});
1160 expect('x' in moo.state).toBe(false);
1161 expect(moo.state.y).toBe(2);
1162 });
@@ -1226,21 +1168,22 @@ describe('ReactCompositeComponent', () => {
1168 NotActuallyImmutable.prototype.amIImmutable = function() {
1169 return true;
1170 };
1229 - var Moo = React.createClass({
1230 - getInitialState: function() {
1231 - return new NotActuallyImmutable('first');
1232 - },
1233 - render: function() {
1171 + class Moo extends React.Component {
1172 + state = new NotActuallyImmutable('first');
1173 + // No longer a public API, but we can test that it works internally by
1174 + // reaching into the updater.
1175 + _replaceState = update => this.updater.enqueueReplaceState(this, update);
1176 + render() {
1177 return <div />;
1235 - },
1236 - });
1178 + }
1179 + }
1180
1181 var moo = ReactTestUtils.renderIntoDocument(<Moo />);
1182 expect(moo.state.str).toBe('first');
1183 expect(moo.state.amIImmutable()).toBe(true);
1184
1185 var secondState = new NotActuallyImmutable('second');
1243 - moo.replaceState(secondState);
1186 + moo._replaceState(secondState);
1187 expect(moo.state.str).toBe('second');
1188 expect(moo.state.amIImmutable()).toBe(true);
1189 expect(moo.state).toBe(secondState);
@@ -1254,14 +1197,14 @@ describe('ReactCompositeComponent', () => {
1197 var fifthState = new NotActuallyImmutable('fifth');
1198 ReactDOM.unstable_batchedUpdates(function() {
1199 moo.setState({str: 'fourth'});
1257 - moo.replaceState(fifthState);
1200 + moo._replaceState(fifthState);
1201 });
1202 expect(moo.state).toBe(fifthState);
1203
1204 // When more than one state update is enqueued, we have the same behavior
1205 var sixthState = new NotActuallyImmutable('sixth');
1206 ReactDOM.unstable_batchedUpdates(function() {
1264 - moo.replaceState(sixthState);
1207 + moo._replaceState(sixthState);
1208 moo.setState({str: 'seventh'});
1209 });
1210 expect(moo.state.str).toBe('seventh');
src/renderers/__tests__/ReactCompositeComponentState-test.js
+34 -32
@@ -24,34 +24,34 @@ describe('ReactCompositeComponent-state', () => {
24 ReactDOM = require('react-dom');
25 ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
26
27 - TestComponent = React.createClass({
28 - peekAtState: function(from, state) {
29 - state = state || this.state;
30 - this.props.stateListener(from, state && state.color);
31 - },
27 + TestComponent = class extends React.Component {
28 + constructor(props) {
29 + super(props);
30 + this.peekAtState('getInitialState', undefined, props);
31 + this.state = {color: 'red'};
32 + }
33 +
34 + peekAtState = (from, state = this.state, props = this.props) => {
35 + props.stateListener(from, state && state.color);
36 + }
37
33 - peekAtCallback: function(from) {
38 + peekAtCallback = from => {
39 return () => this.peekAtState(from);
35 - },
40 + }
41
37 - setFavoriteColor: function(nextColor) {
42 + setFavoriteColor(nextColor) {
43 this.setState(
44 {color: nextColor},
45 this.peekAtCallback('setFavoriteColor'),
46 );
42 - },
43 -
44 - getInitialState: function() {
45 - this.peekAtState('getInitialState');
46 - return {color: 'red'};
47 - },
47 + }
48
49 - render: function() {
49 + render() {
50 this.peekAtState('render');
51 return <div>{this.state.color}</div>;
52 - },
52 + }
53
54 - componentWillMount: function() {
54 + componentWillMount() {
55 this.peekAtState('componentWillMount-start');
56 this.setState(function(state) {
57 this.peekAtState('before-setState-sunrise', state);
@@ -72,25 +72,27 @@ describe('ReactCompositeComponent-state', () => {
72 this.peekAtState('after-setState-orange', state);
73 });
74 this.peekAtState('componentWillMount-end');
75 - },
75 + }
76
77 - componentDidMount: function() {
77 + componentDidMount() {
78 this.peekAtState('componentDidMount-start');
79 this.setState(
80 {color: 'yellow'},
81 this.peekAtCallback('setState-yellow'),
82 );
83 this.peekAtState('componentDidMount-end');
84 - },
84 + }
85
86 - componentWillReceiveProps: function(newProps) {
86 + componentWillReceiveProps(newProps) {
87 this.peekAtState('componentWillReceiveProps-start');
88 if (newProps.nextColor) {
89 this.setState(function(state) {
90 this.peekAtState('before-setState-receiveProps', state);
91 return {color: newProps.nextColor};
92 });
93 - this.replaceState({color: undefined});
93 + // No longer a public API, but we can test that it works internally by
94 + // reaching into the updater.
95 + this.updater.enqueueReplaceState(this, {color: undefined});
96 this.setState(
97 function(state) {
98 this.peekAtState('before-setState-again-receiveProps', state);
@@ -103,28 +105,28 @@ describe('ReactCompositeComponent-state', () => {
105 });
106 }
107 this.peekAtState('componentWillReceiveProps-end');
106 - },
108 + }
109
108 - shouldComponentUpdate: function(nextProps, nextState) {
110 + shouldComponentUpdate(nextProps, nextState) {
111 this.peekAtState('shouldComponentUpdate-currentState');
112 this.peekAtState('shouldComponentUpdate-nextState', nextState);
113 return true;
112 - },
114 + }
115
114 - componentWillUpdate: function(nextProps, nextState) {
116 + componentWillUpdate(nextProps, nextState) {
117 this.peekAtState('componentWillUpdate-currentState');
118 this.peekAtState('componentWillUpdate-nextState', nextState);
117 - },
119 + }
120
119 - componentDidUpdate: function(prevProps, prevState) {
121 + componentDidUpdate(prevProps, prevState) {
122 this.peekAtState('componentDidUpdate-currentState');
123 this.peekAtState('componentDidUpdate-prevState', prevState);
122 - },
124 + }
125
124 - componentWillUnmount: function() {
126 + componentWillUnmount() {
127 this.peekAtState('componentWillUnmount');
126 - },
127 - });
128 + }
129 + };
130 });
131
132 it('should support setting state', () => {
src/renderers/__tests__/ReactMultiChild-test.js
+25 -25
@@ -35,14 +35,14 @@ describe('ReactMultiChild', () => {
35 var mockUpdate = jest.fn();
36 var mockUnmount = jest.fn();
37
38 - var MockComponent = React.createClass({
39 - componentDidMount: mockMount,
40 - componentDidUpdate: mockUpdate,
41 - componentWillUnmount: mockUnmount,
42 - render: function() {
38 + class MockComponent extends React.Component {
39 + componentDidMount = mockMount;
40 + componentDidUpdate = mockUpdate;
41 + componentWillUnmount = mockUnmount;
42 + render() {
43 return <span />;
44 - },
45 - });
44 + }
45 + }
46
47 expect(mockMount.mock.calls.length).toBe(0);
48 expect(mockUpdate.mock.calls.length).toBe(0);
@@ -67,13 +67,13 @@ describe('ReactMultiChild', () => {
67 var mockMount = jest.fn();
68 var mockUnmount = jest.fn();
69
70 - var MockComponent = React.createClass({
71 - componentDidMount: mockMount,
72 - componentWillUnmount: mockUnmount,
73 - render: function() {
70 + class MockComponent extends React.Component {
71 + componentDidMount = mockMount;
72 + componentWillUnmount = mockUnmount;
73 + render() {
74 return <span />;
75 - },
76 - });
75 + }
76 + }
77
78 expect(mockMount.mock.calls.length).toBe(0);
79 expect(mockUnmount.mock.calls.length).toBe(0);
@@ -95,13 +95,13 @@ describe('ReactMultiChild', () => {
95 var mockMount = jest.fn();
96 var mockUnmount = jest.fn();
97
98 - var MockComponent = React.createClass({
99 - componentDidMount: mockMount,
100 - componentWillUnmount: mockUnmount,
101 - render: function() {
98 + class MockComponent extends React.Component {
99 + componentDidMount = mockMount;
100 + componentWillUnmount = mockUnmount;
101 + render() {
102 return <span />;
103 - },
104 - });
103 + }
104 + }
105
106 class WrapperComponent extends React.Component {
107 render() {
@@ -132,13 +132,13 @@ describe('ReactMultiChild', () => {
132 var mockMount = jest.fn();
133 var mockUnmount = jest.fn();
134
135 - var MockComponent = React.createClass({
136 - componentDidMount: mockMount,
137 - componentWillUnmount: mockUnmount,
138 - render: function() {
135 + class MockComponent extends React.Component {
136 + componentDidMount = mockMount;
137 + componentWillUnmount = mockUnmount;
138 + render() {
139 return <span />;
140 - },
141 - });
140 + }
141 + }
142
143 expect(mockMount.mock.calls.length).toBe(0);
144 expect(mockUnmount.mock.calls.length).toBe(0);
src/renderers/__tests__/ReactPerf-test.js
+10 -10
@@ -64,16 +64,16 @@ describeStack('ReactPerf', () => {
64 }
65 };
66
67 - LifeCycle = React.createClass({
68 - shouldComponentUpdate: emptyFunction.thatReturnsTrue,
69 - componentWillMount: emptyFunction,
70 - componentDidMount: emptyFunction,
71 - componentWillReceiveProps: emptyFunction,
72 - componentWillUpdate: emptyFunction,
73 - componentDidUpdate: emptyFunction,
74 - componentWillUnmount: emptyFunction,
75 - render: emptyFunction.thatReturnsNull,
76 - });
67 + LifeCycle = class extends React.Component {
68 + shouldComponentUpdate = emptyFunction.thatReturnsTrue;
69 + componentWillMount = emptyFunction;
70 + componentDidMount = emptyFunction;
71 + componentWillReceiveProps = emptyFunction;
72 + componentWillUpdate = emptyFunction;
73 + componentDidUpdate = emptyFunction;
74 + componentWillUnmount = emptyFunction;
75 + render = emptyFunction.thatReturnsNull;
76 + };
77 });
78
79 afterEach(() => {
src/renderers/__tests__/ReactStatelessComponent-test.js
+10 -9
@@ -249,15 +249,14 @@ describe('ReactStatelessComponent', () => {
249 it('deduplicates ref warnings based on element or owner', () => {
250 spyOn(console, 'error');
251
252 - // Prevent the Babel transform adding a displayName.
253 - var createClassWithoutDisplayName = React.createClass;
254 -
252 // When owner uses JSX, we can use exact line location to dedupe warnings
256 - var AnonymousParentUsingJSX = createClassWithoutDisplayName({
253 + class AnonymousParentUsingJSX extends React.Component {
254 render() {
255 return <StatelessComponent name="A" ref={() => {}} />;
259 - },
260 - });
256 + }
257 + }
258 + Object.defineProperty(AnonymousParentUsingJSX, 'name', {value: undefined});
259 +
260 const instance1 = ReactTestUtils.renderIntoDocument(
261 <AnonymousParentUsingJSX />,
262 );
@@ -273,14 +272,16 @@ describe('ReactStatelessComponent', () => {
272 console.error.calls.reset();
273
274 // When owner doesn't use JSX, and is anonymous, we warn once per internal instance.
276 - var AnonymousParentNotUsingJSX = createClassWithoutDisplayName({
275 + class AnonymousParentNotUsingJSX extends React.Component {
276 render() {
277 return React.createElement(StatelessComponent, {
278 name: 'A',
279 ref: () => {},
280 });
282 - },
283 - });
281 + }
282 + }
283 + Object.defineProperty(AnonymousParentNotUsingJSX, 'name', {value: undefined});
284 +
285 const instance2 = ReactTestUtils.renderIntoDocument(
286 <AnonymousParentNotUsingJSX />,
287 );
src/renderers/__tests__/ReactUpdates-test.js
+21 -74
@@ -391,30 +391,23 @@ describe('ReactUpdates', () => {
391 },
392 };
393
394 - var Box = React.createClass({
395 - mixins: [UpdateLoggingMixin],
396 -
397 - render: function() {
394 + class Box extends React.Component {
395 + render() {
396 return <div ref="boxDiv">{this.props.children}</div>;
399 - },
400 - });
401 -
402 - var Child = React.createClass({
403 - mixins: [UpdateLoggingMixin],
397 + }
398 + }
399 + Object.assign(Box.prototype, UpdateLoggingMixin);
400
405 - render: function() {
401 + class Child extends React.Component {
402 + render() {
403 return <span ref="span">child</span>;
407 - },
408 - });
409 -
410 - var Switcher = React.createClass({
411 - mixins: [UpdateLoggingMixin],
412 -
413 - getInitialState: function() {
414 - return {tabKey: 'hello'};
415 - },
404 + }
405 + }
406 + Object.assign(Child.prototype, UpdateLoggingMixin);
407
417 - render: function() {
408 + class Switcher extends React.Component {
409 + state = {tabKey: 'hello'};
410 + render() {
411 var child = this.props.children;
412
413 return (
@@ -428,20 +421,20 @@ describe('ReactUpdates', () => {
421 </div>
422 </Box>
423 );
431 - },
432 - });
433 -
434 - var App = React.createClass({
435 - mixins: [UpdateLoggingMixin],
424 + }
425 + }
426 + Object.assign(Switcher.prototype, UpdateLoggingMixin);
427
437 - render: function() {
428 + class App extends React.Component {
429 + render() {
430 return (
431 <Switcher ref="switcher">
432 <Child key="hello" ref="child" />
433 </Switcher>
434 );
443 - },
444 - });
435 + }
436 + }
437 + Object.assign(App.prototype, UpdateLoggingMixin);
438
439 var root = <App />;
440 root = ReactTestUtils.renderIntoDocument(root);
@@ -913,52 +906,6 @@ describe('ReactUpdates', () => {
906 expect(console.error.calls.count()).toBe(3);
907 });
908
916 - it('throws in replaceState if the update callback is not a function', () => {
917 - spyOn(console, 'error');
918 -
919 - function Foo() {
920 - this.a = 1;
921 - this.b = 2;
922 - }
923 - var A = React.createClass({
924 - getInitialState: function() {
925 - return {};
926 - },
927 - render: function() {
928 - return <div />;
929 - },
930 - });
931 - var component = ReactTestUtils.renderIntoDocument(<A />);
932 -
933 - expect(() => component.replaceState({}, 'no')).toThrowError(
934 - 'Invalid argument passed as callback. Expected a function. Instead ' +
935 - 'received: no',
936 - );
937 - expectDev(console.error.calls.argsFor(0)[0]).toContain(
938 - 'replaceState(...): Expected the last optional `callback` argument to be ' +
939 - 'a function. Instead received: no.',
940 - );
941 - component = ReactTestUtils.renderIntoDocument(<A />);
942 - expect(() => component.replaceState({}, {foo: 'bar'})).toThrowError(
943 - 'Invalid argument passed as callback. Expected a function. Instead ' +
944 - 'received: [object Object]',
945 - );
946 - expectDev(console.error.calls.argsFor(1)[0]).toContain(
947 - 'replaceState(...): Expected the last optional `callback` argument to be ' +
948 - 'a function. Instead received: [object Object].',
949 - );
950 - component = ReactTestUtils.renderIntoDocument(<A />);
951 - expect(() => component.replaceState({}, new Foo())).toThrowError(
952 - 'Invalid argument passed as callback. Expected a function. Instead ' +
953 - 'received: [object Object]',
954 - );
955 - expectDev(console.error.calls.argsFor(2)[0]).toContain(
956 - 'replaceState(...): Expected the last optional `callback` argument to be ' +
957 - 'a function. Instead received: [object Object].',
958 - );
959 - expect(console.error.calls.count()).toBe(3);
960 - });
961 -
909 it('throws in forceUpdate if the update callback is not a function', () => {
910 spyOn(console, 'error');
911
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+21 -21
@@ -868,11 +868,11 @@ describe('ReactDOMComponent', () => {
868 container.shadyRoot = {};
869 return container;
870 };
871 - var ShadyComponent = React.createClass({
871 + class ShadyComponent extends React.Component {
872 render() {
873 return <polymer-component />;
874 - },
875 - });
874 + }
875 + }
876 var node = document.createElement('div');
877 ReactDOM.render(<ShadyComponent />, node);
878 expectDev(console.error.calls.count()).toBe(1);
@@ -1350,12 +1350,12 @@ describe('ReactDOMComponent', () => {
1350
1351 it('gives useful context in warnings', () => {
1352 spyOn(console, 'error');
1353 - var Row = React.createClass({
1354 - render: () => <tr />,
1355 - });
1356 - var FancyRow = React.createClass({
1357 - render: () => <Row />,
1358 - });
1353 + function Row() {
1354 + return <tr />;
1355 + }
1356 + function FancyRow() {
1357 + return <Row />;
1358 + }
1359
1360 class Table extends React.Component {
1361 render() {
@@ -1369,12 +1369,12 @@ describe('ReactDOMComponent', () => {
1369 }
1370 }
1371
1372 - var Viz1 = React.createClass({
1373 - render: () => <table><FancyRow /></table>,
1374 - });
1375 - var App1 = React.createClass({
1376 - render: () => <Viz1 />,
1377 - });
1372 + function Viz1() {
1373 + return <table><FancyRow /></table>;
1374 + }
1375 + function App1() {
1376 + return <Viz1 />;
1377 + }
1378 ReactTestUtils.renderIntoDocument(<App1 />);
1379 expectDev(console.error.calls.count()).toBe(1);
1380 expectDev(
@@ -1389,12 +1389,12 @@ describe('ReactDOMComponent', () => {
1389 : 'See Viz1 > table > FancyRow > Row > tr.',
1390 );
1391
1392 - var Viz2 = React.createClass({
1393 - render: () => <FancyTable><FancyRow /></FancyTable>,
1394 - });
1395 - var App2 = React.createClass({
1396 - render: () => <Viz2 />,
1397 - });
1392 + function Viz2() {
1393 + return <FancyTable><FancyRow /></FancyTable>;
1394 + }
1395 + function App2() {
1396 + return <Viz2 />;
1397 + }
1398 ReactTestUtils.renderIntoDocument(<App2 />);
1399 expectDev(console.error.calls.count()).toBe(2);
1400 expectDev(
src/renderers/dom/shared/__tests__/ReactMount-test.js
+6 -6
@@ -89,13 +89,13 @@ describe('ReactMount', () => {
89 var mockMount = jest.fn();
90 var mockUnmount = jest.fn();
91
92 - var Component = React.createClass({
93 - componentDidMount: mockMount,
94 - componentWillUnmount: mockUnmount,
95 - render: function() {
92 + class Component extends React.Component {
93 + componentDidMount = mockMount;
94 + componentWillUnmount = mockUnmount;
95 + render() {
96 return <span>{this.props.text}</span>;
97 - },
98 - });
97 + }
98 + }
99
100 expect(mockMount.mock.calls.length).toBe(0);
101 expect(mockUnmount.mock.calls.length).toBe(0);
src/renderers/dom/shared/__tests__/ReactServerRendering-test.js
-26
@@ -490,32 +490,6 @@ describe('ReactDOMServer', () => {
490 expect(markup).toBe('<div>hello</div>');
491 });
492
493 - it('warns with a no-op when an async replaceState is triggered', () => {
494 - var Bar = React.createClass({
495 - componentWillMount: function() {
496 - this.replaceState({text: 'hello'});
497 - setTimeout(() => {
498 - this.replaceState({text: 'error'});
499 - });
500 - },
501 - render: function() {
502 - return <div onClick={() => {}}>{this.state.text}</div>;
503 - },
504 - });
505 -
506 - spyOn(console, 'error');
507 - ReactDOMServer.renderToString(<Bar />);
508 - jest.runOnlyPendingTimers();
509 - expectDev(console.error.calls.count()).toBe(1);
510 - expectDev(console.error.calls.mostRecent().args[0]).toBe(
511 - 'Warning: replaceState(...): Can only update a mounting component. ' +
512 - 'This usually means you called replaceState() outside componentWillMount() on the server. ' +
513 - 'This is a no-op.\n\nPlease check the code for the Bar component.',
514 - );
515 - var markup = ReactDOMServer.renderToStaticMarkup(<Bar />);
516 - expect(markup).toBe('<div>hello</div>');
517 - });
518 -
493 it('warns with a no-op when an async forceUpdate is triggered', () => {
494 class Baz extends React.Component {
495 componentWillMount() {
src/renderers/dom/shared/eventPlugins/__tests__/BeforeInputEventPlugin-test.js
+5 -3
@@ -207,9 +207,11 @@ describe('BeforeInputEventPlugin', function() {
207 function TestEditableReactComponent(Emulator, Scenario, ExpectedResult) {
208 ModuleCache = new initialize(Emulator);
209
210 - var EditableDiv = React.createClass({
211 - render: () => <div contentEditable="true" />,
212 - });
210 + class EditableDiv extends React.Component {
211 + render() {
212 + return <div contentEditable="true" />;
213 + }
214 + }
215 var rendered = ReactTestUtils.renderIntoDocument(<EditableDiv />);
216
217 var node = ModuleCache.ReactDOM.findDOMNode(rendered);
src/renderers/shared/fiber/__tests__/ReactIncremental-test.js
+6 -8
@@ -873,15 +873,13 @@ describe('ReactIncremental', () => {
873
874 it('can replaceState', () => {
875 let instance;
876 - const Bar = React.createClass({
877 - getInitialState() {
878 - instance = this;
879 - return {a: 'a'};
880 - },
876 + class Bar extends React.Component {
877 + state = {a: 'a'};
878 render() {
879 + instance = this;
880 return <div>{this.props.children}</div>;
883 - },
884 - });
881 + }
882 + }
883
884 function Foo() {
885 return (
@@ -895,7 +893,7 @@ describe('ReactIncremental', () => {
893 ReactNoop.flush();
894 instance.setState({b: 'b'});
895 instance.setState({c: 'c'});
898 - instance.replaceState({d: 'd'});
896 + instance.updater.enqueueReplaceState(instance, {d: 'd'});
897 ReactNoop.flush();
898 expect(instance.state).toEqual({d: 'd'});
899 });
src/renderers/shared/fiber/__tests__/ReactIncrementalReflection-test.js
+26 -18
@@ -29,18 +29,23 @@ describe('ReactIncrementalReflection', () => {
29
30 const instances = [];
31
32 - const Component = React.createClass({
32 + class Component extends React.Component {
33 + _isMounted() {
34 + // No longer a public API, but we can test that it works internally by
35 + // reaching into the updater.
36 + return this.updater.isMounted(this);
37 + }
38 componentWillMount() {
39 instances.push(this);
35 - ops.push('componentWillMount', this.isMounted());
36 - },
40 + ops.push('componentWillMount', this._isMounted());
41 + }
42 componentDidMount() {
38 - ops.push('componentDidMount', this.isMounted());
39 - },
43 + ops.push('componentDidMount', this._isMounted());
44 + }
45 render() {
46 return <span />;
42 - },
43 - });
47 + }
48 + }
49
50 function Foo() {
51 return <Component />;
@@ -53,7 +58,7 @@ describe('ReactIncrementalReflection', () => {
58
59 expect(ops).toEqual(['componentWillMount', false]);
60
56 - expect(instances[0].isMounted()).toBe(false);
61 + expect(instances[0]._isMounted()).toBe(false);
62
63 ops = [];
64
@@ -62,7 +67,7 @@ describe('ReactIncrementalReflection', () => {
67
68 expect(ops).toEqual(['componentDidMount', true]);
69
65 - expect(instances[0].isMounted()).toBe(true);
70 + expect(instances[0]._isMounted()).toBe(true);
71 });
72
73 it('handles isMounted when an unmount is deferred', () => {
@@ -70,18 +75,21 @@ describe('ReactIncrementalReflection', () => {
75
76 const instances = [];
77
73 - const Component = React.createClass({
78 + class Component extends React.Component {
79 + _isMounted() {
80 + return this.updater.isMounted(this);
81 + }
82 componentWillMount() {
83 instances.push(this);
76 - },
84 + }
85 componentWillUnmount() {
78 - ops.push('componentWillUnmount', this.isMounted());
79 - },
86 + ops.push('componentWillUnmount', this._isMounted());
87 + }
88 render() {
89 ops.push('Component');
90 return <span />;
83 - },
84 - });
91 + }
92 + }
93
94 function Other() {
95 ops.push('Other');
@@ -98,7 +106,7 @@ describe('ReactIncrementalReflection', () => {
106 expect(ops).toEqual(['Component']);
107 ops = [];
108
101 - expect(instances[0].isMounted()).toBe(true);
109 + expect(instances[0]._isMounted()).toBe(true);
110
111 ReactNoop.render(<Foo mount={false} />);
112 // Render part way through but don't yet commit the updates so it is not
@@ -108,14 +116,14 @@ describe('ReactIncrementalReflection', () => {
116 expect(ops).toEqual(['Other']);
117 ops = [];
118
111 - expect(instances[0].isMounted()).toBe(true);
119 + expect(instances[0]._isMounted()).toBe(true);
120
121 // Finish flushing the unmount.
122 ReactNoop.flush();
123
124 expect(ops).toEqual(['componentWillUnmount', true]);
125
118 - expect(instances[0].isMounted()).toBe(false);
126 + expect(instances[0]._isMounted()).toBe(false);
127 });
128
129 it('finds no node before insertion and correct node before deletion', () => {
src/renderers/shared/fiber/__tests__/ReactIncrementalUpdates-test.js
+22 -24
@@ -74,22 +74,20 @@ describe('ReactIncrementalUpdates', () => {
74 it('only drops updates with equal or lesser priority when replaceState is called', () => {
75 let instance;
76 let ops = [];
77 - const Foo = React.createClass({
78 - getInitialState() {
79 - return {};
80 - },
77 + class Foo extends React.Component {
78 + state = {};
79 componentDidMount() {
80 ops.push('componentDidMount');
83 - },
81 + }
82 componentDidUpdate() {
83 ops.push('componentDidUpdate');
86 - },
84 + }
85 render() {
86 ops.push('render');
87 instance = this;
88 return <div />;
91 - },
92 - });
89 + }
90 + }
91
92 ReactNoop.render(<Foo />);
93 ReactNoop.flush();
@@ -100,7 +98,7 @@ describe('ReactIncrementalUpdates', () => {
98 instance.setState({a: 'a'});
99 instance.setState({b: 'b'});
100 });
103 - instance.replaceState({c: 'c'});
101 + instance.updater.enqueueReplaceState(instance, {c: 'c'});
102 instance.setState({d: 'd'});
103
104 ReactNoop.flushAnimationPri();
@@ -201,19 +199,17 @@ describe('ReactIncrementalUpdates', () => {
199 it('can abort an update, schedule a replaceState, and resume', () => {
200 let instance;
201 let ops = [];
204 - const Foo = React.createClass({
205 - getInitialState() {
206 - return {};
207 - },
202 + class Foo extends React.Component {
203 + state = {};
204 componentDidUpdate() {
205 ops.push('componentDidUpdate');
210 - },
206 + }
207 render() {
208 ops.push('render');
209 instance = this;
210 return <span />;
215 - },
216 - });
211 + }
212 + }
213
214 ReactNoop.render(<Foo />);
215 ReactNoop.flush();
@@ -245,7 +241,9 @@ describe('ReactIncrementalUpdates', () => {
241 instance.setState(createUpdate('f'));
242 ReactNoop.performAnimationWork(() => {
243 instance.setState(createUpdate('d'));
248 - instance.replaceState(createUpdate('e'));
244 + // No longer a public API, but we can test that it works internally by
245 + // reaching into the updater.
246 + instance.updater.enqueueReplaceState(instance, createUpdate('e'));
247 });
248 instance.setState(createUpdate('g'));
249
@@ -256,21 +254,21 @@ describe('ReactIncrementalUpdates', () => {
254
255 it('passes accumulation of previous updates to replaceState updater function', () => {
256 let instance;
259 - const Foo = React.createClass({
260 - getInitialState() {
261 - return {};
262 - },
257 + class Foo extends React.Component {
258 + state = {};
259 render() {
260 instance = this;
261 return <span />;
266 - },
267 - });
262 + }
263 + }
264 ReactNoop.render(<Foo />);
265 ReactNoop.flush();
266
267 instance.setState({a: 'a'});
268 instance.setState({b: 'b'});
273 - instance.replaceState(previousState => ({previousState}));
269 + // No longer a public API, but we can test that it works internally by
270 + // reaching into the updater.
271 + instance.updater.enqueueReplaceState(instance, previousState => ({previousState}));
272 ReactNoop.flush();
273 expect(instance.state).toEqual({previousState: {a: 'a', b: 'b'}});
274 });
src/test/__tests__/ReactTestUtils-test.js
+5 -5
@@ -90,12 +90,12 @@ describe('ReactTestUtils', () => {
90 it('should have shallow unmounting', () => {
91 var componentWillUnmount = jest.fn();
92
93 - var SomeComponent = React.createClass({
94 - render: function() {
93 + class SomeComponent extends React.Component {
94 + componentWillUnmount = componentWillUnmount;
95 + render() {
96 return <div />;
96 - },
97 - componentWillUnmount,
98 - });
97 + }
98 + }
99
100 var shallowRenderer = ReactTestUtils.createRenderer();
101 shallowRenderer.render(<SomeComponent />);