Improve error boundaries tests
Miller Medeiros committed
Aug 25, 2016 at 18:11 UTC
0c031c55b897307ded97c2a681bee3c19e902ec6
2 files changed
+73
-24
src/renderers/shared/stack/reconciler/__tests__/ReactErrorBoundaries-test.js
+48
-19
@@ -13,13 +13,11 @@
13
14
var React;
15
var ReactDOM;
16
-var ReactDOMServer;
16
17
describe('ReactErrorBoundaries', function() {
18
19
beforeEach(function() {
20
ReactDOM = require('ReactDOM');
22
- ReactDOMServer = require('ReactDOMServer');
21
React = require('React');
22
});
23
@@ -37,9 +35,11 @@ describe('ReactErrorBoundaries', function() {
35
}
36
render() {
37
if (!this.state.error) {
40
- return (<div><button onClick={this.onClick}>ClickMe</button><Angry /></div>);
38
+ return (
39
+ <div><button onClick={this.onClick}>ClickMe</button><Angry /></div>
40
+ );
41
} else {
42
- return (<div>Happy Birthday!</div>);
42
+ return <div>Happy Birthday!</div>;
43
}
44
}
45
onClick() {
@@ -57,11 +57,19 @@ describe('ReactErrorBoundaries', function() {
57
expect(EventPluginHub.putListener).not.toBeCalled();
58
});
59
60
- it('renders an error state (ssr)', function() {
60
+ it('renders an error state', function() {
61
+ var log = [];
62
class Angry extends React.Component {
63
render() {
64
+ log.push('Angry render');
65
throw new Error('Please, do not render me.');
66
}
67
+ componentDidMount() {
68
+ log.push('Angry componentDidMount');
69
+ }
70
+ componentWillUnmount() {
71
+ log.push('Angry componentWillUnmount');
72
+ }
73
}
74
75
class Boundary extends React.Component {
@@ -70,12 +78,21 @@ describe('ReactErrorBoundaries', function() {
78
this.state = {error: false};
79
}
80
render() {
81
+ log.push('Boundary render');
82
if (!this.state.error) {
74
- return (<div><button onClick={this.onClick}>ClickMe</button><Angry /></div>);
83
+ return (
84
+ <div><button onClick={this.onClick}>ClickMe</button><Angry /></div>
85
+ );
86
} else {
76
- return (<div>Happy Birthday!</div>);
87
+ return <div>Happy Birthday!</div>;
88
}
89
}
90
+ componentDidMount() {
91
+ log.push('Boundary componentDidMount');
92
+ }
93
+ componentWillUnmount() {
94
+ log.push('Boundary componentWillUnmount');
95
+ }
96
onClick() {
97
/* do nothing */
98
}
@@ -84,12 +101,15 @@ describe('ReactErrorBoundaries', function() {
101
}
102
}
103
87
- var EventPluginHub = require('EventPluginHub');
104
var container = document.createElement('div');
89
- EventPluginHub.putListener = jest.fn();
90
- container.innerHTML = ReactDOMServer.renderToString(<Boundary />);
105
+ ReactDOM.render(<Boundary />, container);
106
expect(container.firstChild.innerHTML).toBe('Happy Birthday!');
92
- expect(EventPluginHub.putListener).not.toBeCalled();
107
+ expect(log).toEqual([
108
+ 'Boundary render',
109
+ 'Angry render',
110
+ 'Boundary render',
111
+ 'Boundary componentDidMount',
112
+ ]);
113
});
114
115
it('will catch exceptions in componentWillUnmount', function() {
@@ -98,14 +118,14 @@ describe('ReactErrorBoundaries', function() {
118
super();
119
this.state = {error: false};
120
}
101
-
121
+
122
render() {
123
if (!this.state.error) {
124
return <div>{this.props.children}</div>;
125
}
126
return <div>Error has been caught</div>;
127
}
108
-
128
+
129
unstable_handleError() {
130
this.setState({error: true});
131
}
@@ -139,27 +159,36 @@ describe('ReactErrorBoundaries', function() {
159
});
160
161
it('expect uneventful render to succeed', function() {
162
+ var log = [];
163
class Boundary extends React.Component {
164
constructor(props) {
165
super(props);
166
this.state = {error: false};
167
}
168
render() {
148
- return (<div><button onClick={this.onClick}>ClickMe</button></div>);
169
+ log.push('Boundary render');
170
+ return <div><button onClick={this.onClick}>ClickMe</button></div>;
171
}
172
onClick() {
173
/* do nothing */
174
}
175
+ componentDidMount() {
176
+ log.push('Boundary componentDidMount');
177
+ }
178
+ componentWillUnmount() {
179
+ log.push('Boundary componentWillUnmount');
180
+ }
181
unstable_handleError() {
182
this.setState({error: true});
183
}
184
}
185
158
- var EventPluginHub = require('EventPluginHub');
186
var container = document.createElement('div');
160
- EventPluginHub.putListener = jest.fn();
187
ReactDOM.render(<Boundary />, container);
162
- expect(EventPluginHub.putListener).toBeCalled();
188
+ expect(log).toEqual([
189
+ 'Boundary render',
190
+ 'Boundary componentDidMount',
191
+ ]);
192
});
193
194
it('correctly handles composite siblings', function() {
@@ -168,14 +197,14 @@ describe('ReactErrorBoundaries', function() {
197
super();
198
this.state = {error: false};
199
}
171
-
200
+
201
render() {
202
if (!this.state.error) {
203
return <div>{this.props.children}</div>;
204
}
205
return <div>Error has been caught</div>;
206
}
178
-
207
+
208
unstable_handleError() {
209
this.setState({error: true});
210
}
src/renderers/testing/__tests__/ReactTestRenderer-test.js
+25
-5
@@ -207,10 +207,18 @@ describe('ReactTestRenderer', function() {
207
});
208
209
it('supports error boundaries', function() {
210
+ var log = [];
211
class Angry extends React.Component {
212
render() {
213
+ log.push('Angry render');
214
throw new Error('Please, do not render me.');
215
}
216
+ componentDidMount() {
217
+ log.push('Angry componentDidMount');
218
+ }
219
+ componentWillUnmount() {
220
+ log.push('Angry componentWillUnmount');
221
+ }
222
}
223
224
class Boundary extends React.Component {
@@ -219,12 +227,21 @@ describe('ReactTestRenderer', function() {
227
this.state = {error: false};
228
}
229
render() {
230
+ log.push('Boundary render');
231
if (!this.state.error) {
223
- return (<div><button onClick={this.onClick}>ClickMe</button><Angry /></div>);
232
+ return (
233
+ <div><button onClick={this.onClick}>ClickMe</button><Angry /></div>
234
+ );
235
} else {
225
- return (<div>Happy Birthday!</div>);
236
+ return <div>Happy Birthday!</div>;
237
}
238
}
239
+ componentDidMount() {
240
+ log.push('Boundary componentDidMount');
241
+ }
242
+ componentWillUnmount() {
243
+ log.push('Boundary componentWillUnmount');
244
+ }
245
onClick() {
246
/* do nothing */
247
}
@@ -233,15 +250,18 @@ describe('ReactTestRenderer', function() {
250
}
251
}
252
236
- var EventPluginHub = require('EventPluginHub');
237
- EventPluginHub.putListener = jest.fn();
253
var renderer = ReactTestRenderer.create(<Boundary />);
254
expect(renderer.toJSON()).toEqual({
255
type: 'div',
256
props: {},
257
children: ['Happy Birthday!'],
258
});
244
- expect(EventPluginHub.putListener).not.toBeCalled();
259
+ expect(log).toEqual([
260
+ 'Boundary render',
261
+ 'Angry render',
262
+ 'Boundary render',
263
+ 'Boundary componentDidMount',
264
+ ]);
265
});
266
267
});