Simplify Jest-specific tests (#11243)
* Delete tests that only mattered during createElement transition They were added after #2576, but were only important when React.createElement was introduced as a migration path. Now that elements are used consistently, these tests shouldn't be necessary. I created a separate test specifically for scryRenderedComponentsWithType() though because that was the only one. * Simplify mocking test setup Today, the only remaining special behavior for Jest mocks is we let them render undefined. We don't plan to introduce any other special behavior for them in the future. (In fact, we already decided against replicating this special behavior for functional components.) Therefore, we can remove dependency on Jest automocking mechanism in these tests completely, and just explicitly mock the render method which is the only one for which we have special behavior. For clarity, we add an explicit test for mockComponent() API (whose naming is a bit of a lie).
Dan Abramov committed
Oct 17, 2017 at 13:05 UTC
043d369210655f9ae13717a7c7d451902fc35019
6 files changed
+56
-250
mocks/ReactElementTestChild.js
deleted
-20
@@ -1,20 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @providesModule ReactElementTestChild
8
- */
9
-
10
-'use strict';
11
-
12
-var React = require('ReactEntry');
13
-
14
-class Child extends React.Component {
15
- render() {
16
- return React.createElement('div');
17
- }
18
-}
19
-
20
-module.exports = Child;
mocks/ReactMockedComponentTestComponent.js
deleted
-28
@@ -1,28 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @providesModule ReactMockedComponentTestComponent
8
- */
9
-
10
-'use strict';
11
-
12
-var React = require('ReactEntry');
13
-
14
-class ReactMockedComponentTestComponent extends React.Component {
15
- state = {foo: 'bar'};
16
-
17
- hasCustomMethod() {
18
- return true;
19
- }
20
-
21
- render() {
22
- return <span />;
23
- }
24
-
25
-}
26
-ReactMockedComponentTestComponent.defaultProps = {bar: 'baz'};
27
-
28
-module.exports = ReactMockedComponentTestComponent;
package.json
-1
@@ -130,7 +130,6 @@
130
"ts"
131
],
132
"roots": [
133
- "<rootDir>/mocks",
133
"<rootDir>/scripts",
134
"<rootDir>/src"
135
],
src/isomorphic/classic/element/__tests__/ReactElement-test.js
-124
@@ -464,127 +464,3 @@ describe('ReactElement', () => {
464
expect(React.isValidElement(JSON.parse(jsonElement))).toBe(false);
465
});
466
});
467
-
468
-describe('comparing jsx vs .createFactory() vs .createElement()', () => {
469
- var Child;
470
-
471
- beforeEach(() => {
472
- jest.resetModules();
473
- React = require('react');
474
- ReactDOM = require('react-dom');
475
- ReactTestUtils = require('react-dom/test-utils');
476
- Child = jest.genMockFromModule('ReactElementTestChild');
477
- });
478
-
479
- describe('when using jsx only', () => {
480
- var Parent, instance;
481
- beforeEach(() => {
482
- Parent = class extends React.Component {
483
- render() {
484
- return (
485
- <div>
486
- <Child ref="child" foo="foo value">children value</Child>
487
- </div>
488
- );
489
- }
490
- };
491
- instance = ReactTestUtils.renderIntoDocument(<Parent />);
492
- });
493
-
494
- it('should scry children but cannot', () => {
495
- var children = ReactTestUtils.scryRenderedComponentsWithType(
496
- instance,
497
- Child,
498
- );
499
- expect(children.length).toBe(1);
500
- });
501
-
502
- it('does not maintain refs', () => {
503
- expect(instance.refs.child).not.toBeUndefined();
504
- });
505
-
506
- it('can capture Child instantiation calls', () => {
507
- expect(Child.mock.calls[0][0]).toEqual({
508
- foo: 'foo value',
509
- children: 'children value',
510
- });
511
- });
512
- });
513
-
514
- describe('when using parent that uses .createFactory()', () => {
515
- var factory, instance;
516
- beforeEach(() => {
517
- var childFactory = React.createFactory(Child);
518
- class Parent extends React.Component {
519
- render() {
520
- return React.createElement(
521
- 'div',
522
- {},
523
- childFactory({ref: 'child', foo: 'foo value'}, 'children value'),
524
- );
525
- }
526
- }
527
- factory = React.createFactory(Parent);
528
- instance = ReactTestUtils.renderIntoDocument(factory());
529
- });
530
-
531
- it('can properly scry children', () => {
532
- var children = ReactTestUtils.scryRenderedComponentsWithType(
533
- instance,
534
- Child,
535
- );
536
- expect(children.length).toBe(1);
537
- });
538
-
539
- it('does not maintain refs', () => {
540
- expect(instance.refs.child).not.toBeUndefined();
541
- });
542
-
543
- it('can capture Child instantiation calls', () => {
544
- expect(Child.mock.calls[0][0]).toEqual({
545
- foo: 'foo value',
546
- children: 'children value',
547
- });
548
- });
549
- });
550
-
551
- describe('when using parent that uses .createElement()', () => {
552
- var factory, instance;
553
- beforeEach(() => {
554
- class Parent extends React.Component {
555
- render() {
556
- return React.createElement(
557
- 'div',
558
- {},
559
- React.createElement(
560
- Child,
561
- {ref: 'child', foo: 'foo value'},
562
- 'children value',
563
- ),
564
- );
565
- }
566
- }
567
- factory = React.createFactory(Parent);
568
- instance = ReactTestUtils.renderIntoDocument(factory());
569
- });
570
-
571
- it('should scry children but cannot', () => {
572
- var children = ReactTestUtils.scryRenderedComponentsWithType(
573
- instance,
574
- Child,
575
- );
576
- expect(children.length).toBe(1);
577
- });
578
-
579
- it('does not maintain refs', () => {
580
- expect(instance.refs.child).not.toBeUndefined();
581
- });
582
-
583
- it('can capture Child instantiation calls', () => {
584
- expect(Child.mock.calls[0][0]).toEqual({
585
- foo: 'foo value',
586
- children: 'children value',
587
- });
588
- });
589
- });
590
-});
src/renderers/__tests__/ReactMockedComponent-test.js
+16
-77
@@ -10,99 +10,38 @@
10
'use strict';
11
12
var React;
13
-var ReactTestUtils;
13
+var ReactDOM;
14
15
-var AutoMockedComponent;
15
var MockedComponent;
16
var ReactDOMServer;
17
18
describe('ReactMockedComponent', () => {
19
beforeEach(() => {
20
React = require('react');
22
- ReactTestUtils = require('react-dom/test-utils');
21
+ ReactDOM = require('react-dom');
22
ReactDOMServer = require('react-dom/server');
23
25
- AutoMockedComponent = jest.genMockFromModule(
26
- 'ReactMockedComponentTestComponent',
27
- );
28
- MockedComponent = jest.genMockFromModule(
29
- 'ReactMockedComponentTestComponent',
30
- );
31
-
32
- ReactTestUtils.mockComponent(MockedComponent);
33
- });
34
-
35
- it('should allow an implicitly mocked component to be rendered without warnings', () => {
36
- spyOn(console, 'error');
37
- ReactTestUtils.renderIntoDocument(<AutoMockedComponent />);
38
- expectDev(console.error.calls.count()).toBe(0);
39
- });
40
-
41
- it('should allow an implicitly mocked component to be rendered without warnings (SSR)', () => {
42
- spyOn(console, 'error');
43
- ReactDOMServer.renderToString(<AutoMockedComponent />);
44
- expectDev(console.error.calls.count()).toBe(0);
45
- });
46
-
47
- it('should allow an implicitly mocked component to be updated', () => {
48
- class Wrapper extends React.Component {
49
- state = {foo: 1};
50
-
51
- update = () => {
52
- this.setState({foo: 2});
53
- };
54
-
24
+ MockedComponent = class extends React.Component {
25
render() {
56
- return <div><AutoMockedComponent prop={this.state.foo} /></div>;
26
+ throw new Error('Should not get here.');
27
}
58
- }
59
-
60
- var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
61
-
62
- var found = ReactTestUtils.findRenderedComponentWithType(
63
- instance,
64
- AutoMockedComponent,
65
- );
66
- expect(typeof found).toBe('object');
67
-
68
- instance.update();
69
- });
70
-
71
- it('has custom methods on the implicitly mocked component', () => {
72
- var instance = ReactTestUtils.renderIntoDocument(<AutoMockedComponent />);
73
- expect(typeof instance.hasCustomMethod).toBe('function');
28
+ };
29
+ // This is close enough to what a Jest mock would give us.
30
+ MockedComponent.prototype.render = jest.fn();
31
});
32
76
- it('should allow an explicitly mocked component to be rendered', () => {
77
- ReactTestUtils.renderIntoDocument(<MockedComponent />);
33
+ it('should allow a mocked component to be rendered', () => {
34
+ var container = document.createElement('container');
35
+ ReactDOM.render(<MockedComponent />, container);
36
});
37
80
- it('should allow an explicitly mocked component to be updated', () => {
81
- class Wrapper extends React.Component {
82
- state = {foo: 1};
83
-
84
- update = () => {
85
- this.setState({foo: 2});
86
- };
87
-
88
- render() {
89
- return <div><MockedComponent prop={this.state.foo} /></div>;
90
- }
91
- }
92
-
93
- var instance = ReactTestUtils.renderIntoDocument(<Wrapper />);
94
-
95
- var found = ReactTestUtils.findRenderedComponentWithType(
96
- instance,
97
- MockedComponent,
98
- );
99
- expect(typeof found).toBe('object');
100
-
101
- instance.update();
38
+ it('should allow a mocked component to be updated', () => {
39
+ var container = document.createElement('container');
40
+ ReactDOM.render(<MockedComponent />, container);
41
+ ReactDOM.render(<MockedComponent />, container);
42
});
43
104
- it('has custom methods on the explicitly mocked component', () => {
105
- var instance = ReactTestUtils.renderIntoDocument(<MockedComponent />);
106
- expect(typeof instance.hasCustomMethod).toBe('function');
44
+ it('should allow a mocked component to be rendered (SSR)', () => {
45
+ ReactDOMServer.renderToString(<MockedComponent />);
46
});
47
});
src/renderers/dom/test/__tests__/ReactTestUtils-test.js
+40
@@ -35,6 +35,46 @@ describe('ReactTestUtils', () => {
35
ReactTestUtils = require('react-dom/test-utils');
36
});
37
38
+ it('gives Jest mocks a passthrough implementation with mockComponent()', () => {
39
+ class MockedComponent extends React.Component {
40
+ render() {
41
+ throw new Error('Should not get here.');
42
+ }
43
+ }
44
+ // This is close enough to what a Jest mock would give us.
45
+ MockedComponent.prototype.render = jest.fn();
46
+
47
+ // Patch it up so it returns its children.
48
+ ReactTestUtils.mockComponent(MockedComponent);
49
+
50
+ var container = document.createElement('div');
51
+ ReactDOM.render(<MockedComponent>Hello</MockedComponent>, container);
52
+ expect(container.textContent).toBe('Hello');
53
+ });
54
+
55
+ it('can scryRenderedComponentsWithType', () => {
56
+ class Child extends React.Component {
57
+ render() {
58
+ return null;
59
+ }
60
+ }
61
+ class Wrapper extends React.Component {
62
+ render() {
63
+ return (
64
+ <div>
65
+ <Child />
66
+ </div>
67
+ );
68
+ }
69
+ }
70
+ const renderedComponent = ReactTestUtils.renderIntoDocument(<Wrapper />);
71
+ const scryResults = ReactTestUtils.scryRenderedComponentsWithType(
72
+ renderedComponent,
73
+ Child,
74
+ );
75
+ expect(scryResults.length).toBe(1);
76
+ });
77
+
78
it('can scryRenderedDOMComponentsWithClass with TextComponent', () => {
79
class Wrapper extends React.Component {
80
render() {