Improve error boundaries tests (#7569)

facebook · Aug 31, 2016 · 7d7defe · 7d7defe
2 parents 51f04fd + 0c031c5
commit 7d7defe
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 24 deletions.
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactErrorBoundaries-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactErrorBoundaries-test.js
@@ -13,13 +13,11 @@
 
 var React;
 var ReactDOM;
-var ReactDOMServer;
 
 describe('ReactErrorBoundaries', function() {
 
  beforeEach(function() {
  ReactDOM = require('ReactDOM');
- ReactDOMServer = require('ReactDOMServer');
  React = require('React');
  });
 
@@ -37,9 +35,11 @@ describe('ReactErrorBoundaries', function() {
  }
  render() {
  if (!this.state.error) {
- return (<div><button onClick={this.onClick}>ClickMe</button><Angry /></div>);
+ return (
+ <div><button onClick={this.onClick}>ClickMe</button><Angry /></div>
+ );
  } else {
- return (<div>Happy Birthday!</div>);
+ return <div>Happy Birthday!</div>;
  }
  }
  onClick() {
@@ -57,11 +57,19 @@ describe('ReactErrorBoundaries', function() {
  expect(EventPluginHub.putListener).not.toBeCalled();
  });
 
- it('renders an error state (ssr)', function() {
+ it('renders an error state', function() {
+ var log = [];
  class Angry extends React.Component {
  render() {
+ log.push('Angry render');
  throw new Error('Please, do not render me.');
  }
+ componentDidMount() {
+ log.push('Angry componentDidMount');
+ }
+ componentWillUnmount() {
+ log.push('Angry componentWillUnmount');
+ }
  }
 
  class Boundary extends React.Component {
@@ -70,12 +78,21 @@ describe('ReactErrorBoundaries', function() {
  this.state = {error: false};
  }
  render() {
+ log.push('Boundary render');
  if (!this.state.error) {
- return (<div><button onClick={this.onClick}>ClickMe</button><Angry /></div>);
+ return (
+ <div><button onClick={this.onClick}>ClickMe</button><Angry /></div>
+ );
  } else {
- return (<div>Happy Birthday!</div>);
+ return <div>Happy Birthday!</div>;
  }
  }
+ componentDidMount() {
+ log.push('Boundary componentDidMount');
+ }
+ componentWillUnmount() {
+ log.push('Boundary componentWillUnmount');
+ }
  onClick() {
  /* do nothing */
  }
@@ -84,12 +101,15 @@ describe('ReactErrorBoundaries', function() {
  }
  }
 
- var EventPluginHub = require('EventPluginHub');
  var container = document.createElement('div');
- EventPluginHub.putListener = jest.fn();
- container.innerHTML = ReactDOMServer.renderToString(<Boundary />);
+ ReactDOM.render(<Boundary />, container);
  expect(container.firstChild.innerHTML).toBe('Happy Birthday!');
- expect(EventPluginHub.putListener).not.toBeCalled();
+ expect(log).toEqual([
+ 'Boundary render',
+ 'Angry render',
+ 'Boundary render',
+ 'Boundary componentDidMount',
+ ]);
  });
 
  it('will catch exceptions in componentWillUnmount', function() {
@@ -98,14 +118,14 @@ describe('ReactErrorBoundaries', function() {
  super();
  this.state = {error: false};
  }
- 
+
  render() {
  if (!this.state.error) {
  return <div>{this.props.children}</div>;
  }
  return <div>Error has been caught</div>;
  }
- 
+
  unstable_handleError() {
  this.setState({error: true});
  }
@@ -139,27 +159,36 @@ describe('ReactErrorBoundaries', function() {
  });
 
  it('expect uneventful render to succeed', function() {
+ var log = [];
  class Boundary extends React.Component {
  constructor(props) {
  super(props);
  this.state = {error: false};
  }
  render() {
- return (<div><button onClick={this.onClick}>ClickMe</button></div>);
+ log.push('Boundary render');
+ return <div><button onClick={this.onClick}>ClickMe</button></div>;
  }
  onClick() {
  /* do nothing */
  }
+ componentDidMount() {
+ log.push('Boundary componentDidMount');
+ }
+ componentWillUnmount() {
+ log.push('Boundary componentWillUnmount');
+ }
  unstable_handleError() {
  this.setState({error: true});
  }
  }
 
- var EventPluginHub = require('EventPluginHub');
  var container = document.createElement('div');
- EventPluginHub.putListener = jest.fn();
  ReactDOM.render(<Boundary />, container);
- expect(EventPluginHub.putListener).toBeCalled();
+ expect(log).toEqual([
+ 'Boundary render',
+ 'Boundary componentDidMount',
+ ]);
  });
 
  it('correctly handles composite siblings', function() {
@@ -168,14 +197,14 @@ describe('ReactErrorBoundaries', function() {
  super();
  this.state = {error: false};
  }
- 
+
  render() {
  if (!this.state.error) {
  return <div>{this.props.children}</div>;
  }
  return <div>Error has been caught</div>;
  }
- 
+
  unstable_handleError() {
  this.setState({error: true});
  }

diff --git a/src/renderers/testing/__tests__/ReactTestRenderer-test.js b/src/renderers/testing/__tests__/ReactTestRenderer-test.js
@@ -207,10 +207,18 @@ describe('ReactTestRenderer', function() {
  });
 
  it('supports error boundaries', function() {
+ var log = [];
  class Angry extends React.Component {
  render() {
+ log.push('Angry render');
  throw new Error('Please, do not render me.');
  }
+ componentDidMount() {
+ log.push('Angry componentDidMount');
+ }
+ componentWillUnmount() {
+ log.push('Angry componentWillUnmount');
+ }
  }
 
  class Boundary extends React.Component {
@@ -219,12 +227,21 @@ describe('ReactTestRenderer', function() {
  this.state = {error: false};
  }
  render() {
+ log.push('Boundary render');
  if (!this.state.error) {
- return (<div><button onClick={this.onClick}>ClickMe</button><Angry /></div>);
+ return (
+ <div><button onClick={this.onClick}>ClickMe</button><Angry /></div>
+ );
  } else {
- return (<div>Happy Birthday!</div>);
+ return <div>Happy Birthday!</div>;
  }
  }
+ componentDidMount() {
+ log.push('Boundary componentDidMount');
+ }
+ componentWillUnmount() {
+ log.push('Boundary componentWillUnmount');
+ }
  onClick() {
  /* do nothing */
  }
@@ -233,15 +250,18 @@ describe('ReactTestRenderer', function() {
  }
  }
 
- var EventPluginHub = require('EventPluginHub');
- EventPluginHub.putListener = jest.fn();
  var renderer = ReactTestRenderer.create(<Boundary />);
  expect(renderer.toJSON()).toEqual({
  type: 'div',
  props: {},
  children: ['Happy Birthday!'],
  });
- expect(EventPluginHub.putListener).not.toBeCalled();
+ expect(log).toEqual([
+ 'Boundary render',
+ 'Angry render',
+ 'Boundary render',
+ 'Boundary componentDidMount',
+ ]);
  });
 
 });