{"commit":{"authorName":"Dan Abramov","revision":"bd3c90ac6f9b601e0c0b53ae38b0e8d4bbc5ac03","shortRevision":"bd3c90ac6f","subject":"Add more tests for error boundaries","authoredAt":"2016-10-28T15:29:19+01:00","authorEmail":"dan.abramov@gmail.com"},"parents":["6825773882010d760507b31ab36b56d9831ca17c"],"patch":"diff --git a\/src\/renderers\/shared\/stack\/reconciler\/__tests__\/ReactErrorBoundaries-test.js b\/src\/renderers\/shared\/stack\/reconciler\/__tests__\/ReactErrorBoundaries-test.js\nindex 78fa5fe6ce..63762a5fcb 100644\n--- a\/src\/renderers\/shared\/stack\/reconciler\/__tests__\/ReactErrorBoundaries-test.js\n+++ b\/src\/renderers\/shared\/stack\/reconciler\/__tests__\/ReactErrorBoundaries-test.js\n@@ -28,6 +28,7 @@ describe('ReactErrorBoundaries', () => {\n var BrokenComponentWillUnmount;\n var BrokenRenderErrorBoundary;\n var BrokenComponentWillMountErrorBoundary;\n+ var BrokenComponentDidMountErrorBoundary;\n var BrokenRender;\n var ErrorBoundary;\n var ErrorMessage;\n@@ -283,6 +284,36 @@ describe('ReactErrorBoundaries', () => {\n }\n };\n \n+ BrokenComponentDidMountErrorBoundary = class extends React.Component {\n+ constructor(props) {\n+ super(props);\n+ this.state = {error: null};\n+ log.push('BrokenComponentDidMountErrorBoundary constructor');\n+ }\n+ render() {\n+ if (this.state.error) {\n+ log.push('BrokenComponentDidMountErrorBoundary render error');\n+ return

Caught an error: {this.state.error.message}.<\/div>;\n+ }\n+ log.push('BrokenComponentDidMountErrorBoundary render success');\n+ return

{this.props.children}<\/div>;\n+ }\n+ componentWillMount() {\n+ log.push('BrokenComponentDidMountErrorBoundary componentWillMount');\n+ }\n+ componentDidMount() {\n+ log.push('BrokenComponentDidMountErrorBoundary componentDidMount [!]');\n+ throw new Error('Hello');\n+ }\n+ componentWillUnmount() {\n+ log.push('BrokenComponentDidMountErrorBoundary componentWillUnmount');\n+ }\n+ unstable_handleError(error) {\n+ log.push('BrokenComponentDidMountErrorBoundary unstable_handleError');\n+ this.setState({error});\n+ }\n+ };\n+\n BrokenRenderErrorBoundary = class extends React.Component {\n constructor(props) {\n super(props);\n@@ -397,43 +428,44 @@ describe('ReactErrorBoundaries', () => {\n };\n \n ErrorBoundary = class extends React.Component {\n- constructor() {\n- super();\n+ constructor(props) {\n+ super(props);\n this.state = {error: null};\n- log.push('ErrorBoundary constructor');\n+ log.push(`${this.props.logName} constructor`);\n }\n render() {\n if (this.state.error && !this.props.forceRetry) {\n- log.push('ErrorBoundary render error');\n+ log.push(`${this.props.logName} render error`);\n return this.props.renderError(this.state.error, this.props);\n }\n- log.push('ErrorBoundary render success');\n+ log.push(`${this.props.logName} render success`);\n return

{this.props.children}<\/div>;\n }\n unstable_handleError(error) {\n- log.push('ErrorBoundary unstable_handleError');\n+ log.push(`${this.props.logName} unstable_handleError`);\n this.setState({error});\n }\n componentWillMount() {\n- log.push('ErrorBoundary componentWillMount');\n+ log.push(`${this.props.logName} componentWillMount`);\n }\n componentDidMount() {\n- log.push('ErrorBoundary componentDidMount');\n+ log.push(`${this.props.logName} componentDidMount`);\n }\n componentWillReceiveProps() {\n- log.push('ErrorBoundary componentWillReceiveProps');\n+ log.push(`${this.props.logName} componentWillReceiveProps`);\n }\n componentWillUpdate() {\n- log.push('ErrorBoundary componentWillUpdate');\n+ log.push(`${this.props.logName} componentWillUpdate`);\n }\n componentDidUpdate() {\n- log.push('ErrorBoundary componentDidUpdate');\n+ log.push(`${this.props.logName} componentDidUpdate`);\n }\n componentWillUnmount() {\n- log.push('ErrorBoundary componentWillUnmount');\n+ log.push(`${this.props.logName} componentWillUnmount`);\n }\n };\n ErrorBoundary.defaultProps = {\n+ logName: 'ErrorBoundary',\n renderError(error, props) {\n return (\n

\n@@ -464,53 +496,6 @@ describe('ReactErrorBoundaries', () => {\n };\n });\n \n- if (ReactDOMFeatureFlags.useFiber) {\n- \/\/ This test implements a new feature in Fiber.\n- it('catches errors originating downstream', () => {\n- var fail = false;\n- class Stateful extends React.Component {\n- state = {shouldThrow: false};\n-\n- render() {\n- if (fail) {\n- log.push('Stateful render [!]');\n- throw new Error('Hello');\n- }\n- return

{this.props.children}<\/div>;\n- }\n- }\n-\n- var statefulInst;\n- var container = document.createElement('div');\n- ReactDOM.render(\n- \n- statefulInst = inst} \/>\n- <\/ErrorBoundary>,\n- container\n- );\n-\n- log.length = 0;\n- expect(() => {\n- fail = true;\n- statefulInst.forceUpdate();\n- }).not.toThrow();\n-\n- expect(log).toEqual([\n- 'Stateful render [!]',\n- 'ErrorBoundary unstable_handleError',\n- 'ErrorBoundary componentWillUpdate',\n- 'ErrorBoundary render error',\n- 'ErrorBoundary componentDidUpdate',\n- ]);\n-\n- log.length = 0;\n- ReactDOM.unmountComponentAtNode(container);\n- expect(log).toEqual([\n- 'ErrorBoundary componentWillUnmount',\n- ]);\n- });\n- }\n-\n it('renders an error state if child throws in render', () => {\n var container = document.createElement('div');\n ReactDOM.render(\n@@ -661,65 +646,6 @@ describe('ReactErrorBoundaries', () => {\n ]);\n });\n \n- if (ReactDOMFeatureFlags.useFiber) {\n- \/\/ This test implements a new feature in Fiber.\n- it('catches errors in componentDidMount', () => {\n- var container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- \n- <\/BrokenComponentWillUnmount>\n- \n- \n- <\/ErrorBoundary>,\n- container\n- );\n- expect(log).toEqual([\n- 'ErrorBoundary constructor',\n- 'ErrorBoundary componentWillMount',\n- 'ErrorBoundary render success',\n- 'BrokenComponentWillUnmount constructor',\n- 'BrokenComponentWillUnmount componentWillMount',\n- 'BrokenComponentWillUnmount render',\n- 'Normal constructor',\n- 'Normal componentWillMount',\n- 'Normal render',\n- 'BrokenComponentDidMount constructor',\n- 'BrokenComponentDidMount componentWillMount',\n- 'BrokenComponentDidMount render',\n- 'LastChild constructor',\n- 'LastChild componentWillMount',\n- 'LastChild render',\n- \/\/ Start flushing didMount queue\n- 'Normal componentDidMount',\n- 'BrokenComponentWillUnmount componentDidMount',\n- 'BrokenComponentDidMount componentDidMount [!]',\n- \/\/ Continue despite the error\n- 'LastChild componentDidMount',\n- 'ErrorBoundary componentDidMount',\n- \/\/ Now we are ready to handle the error\n- 'ErrorBoundary unstable_handleError',\n- 'ErrorBoundary componentWillUpdate',\n- 'ErrorBoundary render error',\n- \/\/ Safely unmount every child\n- 'BrokenComponentWillUnmount componentWillUnmount [!]',\n- \/\/ Continue unmounting safely despite any errors\n- 'Normal componentWillUnmount',\n- 'BrokenComponentDidMount componentWillUnmount',\n- 'LastChild componentWillUnmount',\n- \/\/ The update has finished\n- 'ErrorBoundary componentDidUpdate',\n- ]);\n-\n- log.length = 0;\n- ReactDOM.unmountComponentAtNode(container);\n- expect(log).toEqual([\n- 'ErrorBoundary componentWillUnmount',\n- ]);\n- });\n- }\n-\n it('propagates errors on retry on mounting', () => {\n var container = document.createElement('div');\n ReactDOM.render(\n@@ -1356,50 +1282,6 @@ describe('ReactErrorBoundaries', () => {\n ]);\n });\n \n- if (ReactDOMFeatureFlags.useFiber) {\n- \/\/ This test implements a new feature in Fiber.\n- it('catches errors in componentDidUpdate', () => {\n- var container = document.createElement('div');\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container\n- );\n-\n- log.length = 0;\n- ReactDOM.render(\n- \n- \n- <\/ErrorBoundary>,\n- container\n- );\n- expect(log).toEqual([\n- 'ErrorBoundary componentWillReceiveProps',\n- 'ErrorBoundary componentWillUpdate',\n- 'ErrorBoundary render success',\n- 'BrokenComponentDidUpdate componentWillReceiveProps',\n- 'BrokenComponentDidUpdate componentWillUpdate',\n- 'BrokenComponentDidUpdate render',\n- \/\/ All lifecycles run\n- 'BrokenComponentDidUpdate componentDidUpdate [!]',\n- 'ErrorBoundary componentDidUpdate',\n- \/\/ Then, error is handled\n- 'ErrorBoundary unstable_handleError',\n- 'ErrorBoundary componentWillUpdate',\n- 'ErrorBoundary render error',\n- 'BrokenComponentDidUpdate componentWillUnmount',\n- 'ErrorBoundary componentDidUpdate',\n- ]);\n-\n- log.length = 0;\n- ReactDOM.unmountComponentAtNode(container);\n- expect(log).toEqual([\n- 'ErrorBoundary componentWillUnmount',\n- ]);\n- });\n- }\n-\n it('recovers from componentWillUnmount errors on update', () => {\n var container = document.createElement('div');\n ReactDOM.render(\n@@ -1535,6 +1417,76 @@ describe('ReactErrorBoundaries', () => {\n ]);\n });\n \n+ it('picks the right boundary when handling unmounting errors', () => {\n+ function renderInnerError(error, props) {\n+ return

Caught an inner error: {error.message}.<\/div>;\n+ }\n+ function renderOuterError(error, props) {\n+ return

Caught an outer error: {error.message}.<\/div>;\n+ }\n+\n+ var container = document.createElement('div');\n+ ReactDOM.render(\n+ \n+ \n+ \n+ <\/ErrorBoundary>\n+ <\/ErrorBoundary>,\n+ container\n+ );\n+\n+ log.length = 0;\n+ ReactDOM.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ container\n+ );\n+ expect(container.textContent).toBe('Caught an inner error: Hello.');\n+ expect(log).toEqual([\n+ \/\/ Update outer boundary\n+ 'OuterErrorBoundary componentWillReceiveProps',\n+ 'OuterErrorBoundary componentWillUpdate',\n+ 'OuterErrorBoundary render success',\n+ \/\/ Update inner boundary\n+ 'InnerErrorBoundary componentWillReceiveProps',\n+ 'InnerErrorBoundary componentWillUpdate',\n+ 'InnerErrorBoundary render success',\n+ \/\/ Try unmounting child\n+ 'BrokenComponentWillUnmount componentWillUnmount [!]',\n+ ...(ReactDOMFeatureFlags.useFiber ? [\n+ \/\/ Fiber proceeds with lifecycles despite errors\n+ \/\/ Inner and outer boundaries have updated in this phase\n+ 'InnerErrorBoundary componentDidUpdate',\n+ 'OuterErrorBoundary componentDidUpdate',\n+ \/\/ Now that commit phase is done, Fiber handles errors\n+ \/\/ Only inner boundary receives the error:\n+ 'InnerErrorBoundary unstable_handleError',\n+ 'InnerErrorBoundary componentWillUpdate',\n+ \/\/ Render an error now\n+ 'InnerErrorBoundary render error',\n+ \/\/ In Fiber, this was a local update to the\n+ \/\/ inner boundary so only its hook fires\n+ 'InnerErrorBoundary componentDidUpdate',\n+ ] : [\n+ \/\/ Stack will handle error immediately\n+ 'InnerErrorBoundary unstable_handleError',\n+ 'InnerErrorBoundary render error',\n+ \/\/ In stack, this was a part of the update to the\n+ \/\/ outer boundary so both lifecycles fire\n+ 'InnerErrorBoundary componentDidUpdate',\n+ 'OuterErrorBoundary componentDidUpdate',\n+ ]),\n+ ]);\n+\n+ log.length = 0;\n+ ReactDOM.unmountComponentAtNode(container);\n+ expect(log).toEqual([\n+ 'OuterErrorBoundary componentWillUnmount',\n+ 'InnerErrorBoundary componentWillUnmount',\n+ ]);\n+ });\n+\n it('can recover from error state', () => {\n var container = document.createElement('div');\n ReactDOM.render(\n@@ -1701,4 +1653,189 @@ describe('ReactErrorBoundaries', () => {\n 'ErrorBoundary componentWillUnmount',\n ]);\n });\n+\n+ \/\/ The tests below implement new features in Fiber.\n+ if (ReactDOMFeatureFlags.useFiber) {\n+ it('catches errors originating downstream', () => {\n+ var fail = false;\n+ class Stateful extends React.Component {\n+ state = {shouldThrow: false};\n+\n+ render() {\n+ if (fail) {\n+ log.push('Stateful render [!]');\n+ throw new Error('Hello');\n+ }\n+ return

{this.props.children}<\/div>;\n+ }\n+ }\n+\n+ var statefulInst;\n+ var container = document.createElement('div');\n+ ReactDOM.render(\n+ \n+ statefulInst = inst} \/>\n+ <\/ErrorBoundary>,\n+ container\n+ );\n+\n+ log.length = 0;\n+ expect(() => {\n+ fail = true;\n+ statefulInst.forceUpdate();\n+ }).not.toThrow();\n+\n+ expect(log).toEqual([\n+ 'Stateful render [!]',\n+ 'ErrorBoundary unstable_handleError',\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render error',\n+ 'ErrorBoundary componentDidUpdate',\n+ ]);\n+\n+ log.length = 0;\n+ ReactDOM.unmountComponentAtNode(container);\n+ expect(log).toEqual([\n+ 'ErrorBoundary componentWillUnmount',\n+ ]);\n+ });\n+\n+ it('catches errors in componentDidMount', () => {\n+ var container = document.createElement('div');\n+ ReactDOM.render(\n+ \n+ \n+ \n+ <\/BrokenComponentWillUnmount>\n+ \n+ \n+ <\/ErrorBoundary>,\n+ container\n+ );\n+ expect(log).toEqual([\n+ 'ErrorBoundary constructor',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render success',\n+ 'BrokenComponentWillUnmount constructor',\n+ 'BrokenComponentWillUnmount componentWillMount',\n+ 'BrokenComponentWillUnmount render',\n+ 'Normal constructor',\n+ 'Normal componentWillMount',\n+ 'Normal render',\n+ 'BrokenComponentDidMount constructor',\n+ 'BrokenComponentDidMount componentWillMount',\n+ 'BrokenComponentDidMount render',\n+ 'LastChild constructor',\n+ 'LastChild componentWillMount',\n+ 'LastChild render',\n+ \/\/ Start flushing didMount queue\n+ 'Normal componentDidMount',\n+ 'BrokenComponentWillUnmount componentDidMount',\n+ 'BrokenComponentDidMount componentDidMount [!]',\n+ \/\/ Continue despite the error\n+ 'LastChild componentDidMount',\n+ 'ErrorBoundary componentDidMount',\n+ \/\/ Now we are ready to handle the error\n+ 'ErrorBoundary unstable_handleError',\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render error',\n+ \/\/ Safely unmount every child\n+ 'BrokenComponentWillUnmount componentWillUnmount [!]',\n+ \/\/ Continue unmounting safely despite any errors\n+ 'Normal componentWillUnmount',\n+ 'BrokenComponentDidMount componentWillUnmount',\n+ 'LastChild componentWillUnmount',\n+ \/\/ The update has finished\n+ 'ErrorBoundary componentDidUpdate',\n+ ]);\n+\n+ log.length = 0;\n+ ReactDOM.unmountComponentAtNode(container);\n+ expect(log).toEqual([\n+ 'ErrorBoundary componentWillUnmount',\n+ ]);\n+ });\n+\n+ it('propagates errors inside boundary during componentDidMount', () => {\n+ var container = document.createElement('div');\n+ ReactDOM.render(\n+ \n+ (\n+

\n+ We should never catch our own error: {error.message}.\n+ <\/div>\n+ )} \/>\n+ <\/ErrorBoundary>,\n+ container\n+ );\n+ expect(container.firstChild.textContent).toBe('Caught an error: Hello.');\n+ expect(log).toEqual([\n+ 'ErrorBoundary constructor',\n+ 'ErrorBoundary componentWillMount',\n+ 'ErrorBoundary render success',\n+ 'BrokenComponentDidMountErrorBoundary constructor',\n+ 'BrokenComponentDidMountErrorBoundary componentWillMount',\n+ 'BrokenComponentDidMountErrorBoundary render success',\n+ 'BrokenComponentDidMountErrorBoundary componentDidMount [!]',\n+ \/\/ Fiber proceeds with the hooks\n+ 'ErrorBoundary componentDidMount',\n+ \/\/ The error propagates to the higher boundary\n+ 'ErrorBoundary unstable_handleError',\n+ \/\/ Fiber retries from the root\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render error',\n+ 'BrokenComponentDidMountErrorBoundary componentWillUnmount',\n+ 'ErrorBoundary componentDidUpdate',\n+ ]);\n+\n+ log.length = 0;\n+ ReactDOM.unmountComponentAtNode(container);\n+ expect(log).toEqual([\n+ 'ErrorBoundary componentWillUnmount',\n+ ]);\n+ });\n+\n+ it('catches errors in componentDidUpdate', () => {\n+ var container = document.createElement('div');\n+ ReactDOM.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ container\n+ );\n+\n+ log.length = 0;\n+ ReactDOM.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ container\n+ );\n+ expect(log).toEqual([\n+ 'ErrorBoundary componentWillReceiveProps',\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render success',\n+ 'BrokenComponentDidUpdate componentWillReceiveProps',\n+ 'BrokenComponentDidUpdate componentWillUpdate',\n+ 'BrokenComponentDidUpdate render',\n+ \/\/ All lifecycles run\n+ 'BrokenComponentDidUpdate componentDidUpdate [!]',\n+ 'ErrorBoundary componentDidUpdate',\n+ \/\/ Then, error is handled\n+ 'ErrorBoundary unstable_handleError',\n+ 'ErrorBoundary componentWillUpdate',\n+ 'ErrorBoundary render error',\n+ 'BrokenComponentDidUpdate componentWillUnmount',\n+ 'ErrorBoundary componentDidUpdate',\n+ ]);\n+\n+ log.length = 0;\n+ ReactDOM.unmountComponentAtNode(container);\n+ expect(log).toEqual([\n+ 'ErrorBoundary componentWillUnmount',\n+ ]);\n+ });\n+ }\n+\n });\n","body":"","files":[{"status":"M","path":"src\/renderers\/shared\/stack\/reconciler\/__tests__\/ReactErrorBoundaries-test.js"}]}

dillon1000/react

Files changed