How to use error method in ava

1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @emails react-core8 */9'use strict';10let PropTypes;11let React;12let ReactDOM;13let ReactFeatureFlags;14// TODO: Refactor this test once componentDidCatch setState is deprecated.15describe('ReactLegacyErrorBoundaries', () => {16  let log;17  let BrokenConstructor;18  let BrokenComponentWillMount;19  let BrokenComponentDidMount;20  let BrokenComponentWillReceiveProps;21  let BrokenComponentWillUpdate;22  let BrokenComponentDidUpdate;23  let BrokenComponentWillUnmount;24  let BrokenRenderErrorBoundary;25  let BrokenComponentWillMountErrorBoundary;26  let BrokenComponentDidMountErrorBoundary;27  let BrokenRender;28  let ErrorBoundary;29  let ErrorMessage;30  let NoopErrorBoundary;31  let RetryErrorBoundary;32  let Normal;33  beforeEach(() => {34    jest.resetModules();35    PropTypes = require('prop-types');36    ReactFeatureFlags = require('shared/ReactFeatureFlags');37    ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;38    ReactDOM = require('react-dom');39    React = require('react');40    log = [];41    BrokenConstructor = class extends React.Component {42      constructor(props) {43        super(props);44        log.push('BrokenConstructor constructor [!]');45        throw new Error('Hello');46      }47      render() {48        log.push('BrokenConstructor render');49        return <div>{this.props.children}</div>;50      }51      UNSAFE_componentWillMount() {52        log.push('BrokenConstructor componentWillMount');53      }54      componentDidMount() {55        log.push('BrokenConstructor componentDidMount');56      }57      UNSAFE_componentWillReceiveProps() {58        log.push('BrokenConstructor componentWillReceiveProps');59      }60      UNSAFE_componentWillUpdate() {61        log.push('BrokenConstructor componentWillUpdate');62      }63      componentDidUpdate() {64        log.push('BrokenConstructor componentDidUpdate');65      }66      componentWillUnmount() {67        log.push('BrokenConstructor componentWillUnmount');68      }69    };70    BrokenComponentWillMount = class extends React.Component {71      constructor(props) {72        super(props);73        log.push('BrokenComponentWillMount constructor');74      }75      render() {76        log.push('BrokenComponentWillMount render');77        return <div>{this.props.children}</div>;78      }79      UNSAFE_componentWillMount() {80        log.push('BrokenComponentWillMount componentWillMount [!]');81        throw new Error('Hello');82      }83      componentDidMount() {84        log.push('BrokenComponentWillMount componentDidMount');85      }86      UNSAFE_componentWillReceiveProps() {87        log.push('BrokenComponentWillMount componentWillReceiveProps');88      }89      UNSAFE_componentWillUpdate() {90        log.push('BrokenComponentWillMount componentWillUpdate');91      }92      componentDidUpdate() {93        log.push('BrokenComponentWillMount componentDidUpdate');94      }95      componentWillUnmount() {96        log.push('BrokenComponentWillMount componentWillUnmount');97      }98    };99    BrokenComponentDidMount = class extends React.Component {100      constructor(props) {101        super(props);102        log.push('BrokenComponentDidMount constructor');103      }104      render() {105        log.push('BrokenComponentDidMount render');106        return <div>{this.props.children}</div>;107      }108      UNSAFE_componentWillMount() {109        log.push('BrokenComponentDidMount componentWillMount');110      }111      componentDidMount() {112        log.push('BrokenComponentDidMount componentDidMount [!]');113        throw new Error('Hello');114      }115      UNSAFE_componentWillReceiveProps() {116        log.push('BrokenComponentDidMount componentWillReceiveProps');117      }118      UNSAFE_componentWillUpdate() {119        log.push('BrokenComponentDidMount componentWillUpdate');120      }121      componentDidUpdate() {122        log.push('BrokenComponentDidMount componentDidUpdate');123      }124      componentWillUnmount() {125        log.push('BrokenComponentDidMount componentWillUnmount');126      }127    };128    BrokenComponentWillReceiveProps = class extends React.Component {129      constructor(props) {130        super(props);131        log.push('BrokenComponentWillReceiveProps constructor');132      }133      render() {134        log.push('BrokenComponentWillReceiveProps render');135        return <div>{this.props.children}</div>;136      }137      UNSAFE_componentWillMount() {138        log.push('BrokenComponentWillReceiveProps componentWillMount');139      }140      componentDidMount() {141        log.push('BrokenComponentWillReceiveProps componentDidMount');142      }143      UNSAFE_componentWillReceiveProps() {144        log.push(145          'BrokenComponentWillReceiveProps componentWillReceiveProps [!]',146        );147        throw new Error('Hello');148      }149      UNSAFE_componentWillUpdate() {150        log.push('BrokenComponentWillReceiveProps componentWillUpdate');151      }152      componentDidUpdate() {153        log.push('BrokenComponentWillReceiveProps componentDidUpdate');154      }155      componentWillUnmount() {156        log.push('BrokenComponentWillReceiveProps componentWillUnmount');157      }158    };159    BrokenComponentWillUpdate = class extends React.Component {160      constructor(props) {161        super(props);162        log.push('BrokenComponentWillUpdate constructor');163      }164      render() {165        log.push('BrokenComponentWillUpdate render');166        return <div>{this.props.children}</div>;167      }168      UNSAFE_componentWillMount() {169        log.push('BrokenComponentWillUpdate componentWillMount');170      }171      componentDidMount() {172        log.push('BrokenComponentWillUpdate componentDidMount');173      }174      UNSAFE_componentWillReceiveProps() {175        log.push('BrokenComponentWillUpdate componentWillReceiveProps');176      }177      UNSAFE_componentWillUpdate() {178        log.push('BrokenComponentWillUpdate componentWillUpdate [!]');179        throw new Error('Hello');180      }181      componentDidUpdate() {182        log.push('BrokenComponentWillUpdate componentDidUpdate');183      }184      componentWillUnmount() {185        log.push('BrokenComponentWillUpdate componentWillUnmount');186      }187    };188    BrokenComponentDidUpdate = class extends React.Component {189      static defaultProps = {190        errorText: 'Hello',191      };192      constructor(props) {193        super(props);194        log.push('BrokenComponentDidUpdate constructor');195      }196      render() {197        log.push('BrokenComponentDidUpdate render');198        return <div>{this.props.children}</div>;199      }200      UNSAFE_componentWillMount() {201        log.push('BrokenComponentDidUpdate componentWillMount');202      }203      componentDidMount() {204        log.push('BrokenComponentDidUpdate componentDidMount');205      }206      UNSAFE_componentWillReceiveProps() {207        log.push('BrokenComponentDidUpdate componentWillReceiveProps');208      }209      UNSAFE_componentWillUpdate() {210        log.push('BrokenComponentDidUpdate componentWillUpdate');211      }212      componentDidUpdate() {213        log.push('BrokenComponentDidUpdate componentDidUpdate [!]');214        throw new Error(this.props.errorText);215      }216      componentWillUnmount() {217        log.push('BrokenComponentDidUpdate componentWillUnmount');218      }219    };220    BrokenComponentWillUnmount = class extends React.Component {221      static defaultProps = {222        errorText: 'Hello',223      };224      constructor(props) {225        super(props);226        log.push('BrokenComponentWillUnmount constructor');227      }228      render() {229        log.push('BrokenComponentWillUnmount render');230        return <div>{this.props.children}</div>;231      }232      UNSAFE_componentWillMount() {233        log.push('BrokenComponentWillUnmount componentWillMount');234      }235      componentDidMount() {236        log.push('BrokenComponentWillUnmount componentDidMount');237      }238      UNSAFE_componentWillReceiveProps() {239        log.push('BrokenComponentWillUnmount componentWillReceiveProps');240      }241      UNSAFE_componentWillUpdate() {242        log.push('BrokenComponentWillUnmount componentWillUpdate');243      }244      componentDidUpdate() {245        log.push('BrokenComponentWillUnmount componentDidUpdate');246      }247      componentWillUnmount() {248        log.push('BrokenComponentWillUnmount componentWillUnmount [!]');249        throw new Error(this.props.errorText);250      }251    };252    BrokenComponentWillMountErrorBoundary = class extends React.Component {253      constructor(props) {254        super(props);255        this.state = {error: null};256        log.push('BrokenComponentWillMountErrorBoundary constructor');257      }258      render() {259        if (this.state.error) {260          log.push('BrokenComponentWillMountErrorBoundary render error');261          return <div>Caught an error: {this.state.error.message}.</div>;262        }263        log.push('BrokenComponentWillMountErrorBoundary render success');264        return <div>{this.props.children}</div>;265      }266      UNSAFE_componentWillMount() {267        log.push(268          'BrokenComponentWillMountErrorBoundary componentWillMount [!]',269        );270        throw new Error('Hello');271      }272      componentDidMount() {273        log.push('BrokenComponentWillMountErrorBoundary componentDidMount');274      }275      componentWillUnmount() {276        log.push('BrokenComponentWillMountErrorBoundary componentWillUnmount');277      }278      componentDidCatch(error) {279        log.push('BrokenComponentWillMountErrorBoundary componentDidCatch');280        this.setState({error});281      }282    };283    BrokenComponentDidMountErrorBoundary = class extends React.Component {284      constructor(props) {285        super(props);286        this.state = {error: null};287        log.push('BrokenComponentDidMountErrorBoundary constructor');288      }289      render() {290        if (this.state.error) {291          log.push('BrokenComponentDidMountErrorBoundary render error');292          return <div>Caught an error: {this.state.error.message}.</div>;293        }294        log.push('BrokenComponentDidMountErrorBoundary render success');295        return <div>{this.props.children}</div>;296      }297      UNSAFE_componentWillMount() {298        log.push('BrokenComponentDidMountErrorBoundary componentWillMount');299      }300      componentDidMount() {301        log.push('BrokenComponentDidMountErrorBoundary componentDidMount [!]');302        throw new Error('Hello');303      }304      componentWillUnmount() {305        log.push('BrokenComponentDidMountErrorBoundary componentWillUnmount');306      }307      componentDidCatch(error) {308        log.push('BrokenComponentDidMountErrorBoundary componentDidCatch');309        this.setState({error});310      }311    };312    BrokenRenderErrorBoundary = class extends React.Component {313      constructor(props) {314        super(props);315        this.state = {error: null};316        log.push('BrokenRenderErrorBoundary constructor');317      }318      render() {319        if (this.state.error) {320          log.push('BrokenRenderErrorBoundary render error [!]');321          throw new Error('Hello');322        }323        log.push('BrokenRenderErrorBoundary render success');324        return <div>{this.props.children}</div>;325      }326      UNSAFE_componentWillMount() {327        log.push('BrokenRenderErrorBoundary componentWillMount');328      }329      componentDidMount() {330        log.push('BrokenRenderErrorBoundary componentDidMount');331      }332      componentWillUnmount() {333        log.push('BrokenRenderErrorBoundary componentWillUnmount');334      }335      componentDidCatch(error) {336        log.push('BrokenRenderErrorBoundary componentDidCatch');337        this.setState({error});338      }339    };340    BrokenRender = class extends React.Component {341      constructor(props) {342        super(props);343        log.push('BrokenRender constructor');344      }345      render() {346        log.push('BrokenRender render [!]');347        throw new Error('Hello');348      }349      UNSAFE_componentWillMount() {350        log.push('BrokenRender componentWillMount');351      }352      componentDidMount() {353        log.push('BrokenRender componentDidMount');354      }355      UNSAFE_componentWillReceiveProps() {356        log.push('BrokenRender componentWillReceiveProps');357      }358      UNSAFE_componentWillUpdate() {359        log.push('BrokenRender componentWillUpdate');360      }361      componentDidUpdate() {362        log.push('BrokenRender componentDidUpdate');363      }364      componentWillUnmount() {365        log.push('BrokenRender componentWillUnmount');366      }367    };368    NoopErrorBoundary = class extends React.Component {369      constructor(props) {370        super(props);371        log.push('NoopErrorBoundary constructor');372      }373      render() {374        log.push('NoopErrorBoundary render');375        return <BrokenRender />;376      }377      UNSAFE_componentWillMount() {378        log.push('NoopErrorBoundary componentWillMount');379      }380      componentDidMount() {381        log.push('NoopErrorBoundary componentDidMount');382      }383      componentWillUnmount() {384        log.push('NoopErrorBoundary componentWillUnmount');385      }386      componentDidCatch() {387        log.push('NoopErrorBoundary componentDidCatch');388      }389    };390    Normal = class extends React.Component {391      static defaultProps = {392        logName: 'Normal',393      };394      constructor(props) {395        super(props);396        log.push(`${this.props.logName} constructor`);397      }398      render() {399        log.push(`${this.props.logName} render`);400        return <div>{this.props.children}</div>;401      }402      UNSAFE_componentWillMount() {403        log.push(`${this.props.logName} componentWillMount`);404      }405      componentDidMount() {406        log.push(`${this.props.logName} componentDidMount`);407      }408      UNSAFE_componentWillReceiveProps() {409        log.push(`${this.props.logName} componentWillReceiveProps`);410      }411      UNSAFE_componentWillUpdate() {412        log.push(`${this.props.logName} componentWillUpdate`);413      }414      componentDidUpdate() {415        log.push(`${this.props.logName} componentDidUpdate`);416      }417      componentWillUnmount() {418        log.push(`${this.props.logName} componentWillUnmount`);419      }420    };421    ErrorBoundary = class extends React.Component {422      constructor(props) {423        super(props);424        this.state = {error: null};425        log.push(`${this.props.logName} constructor`);426      }427      render() {428        if (this.state.error && !this.props.forceRetry) {429          log.push(`${this.props.logName} render error`);430          return this.props.renderError(this.state.error, this.props);431        }432        log.push(`${this.props.logName} render success`);433        return <div>{this.props.children}</div>;434      }435      componentDidCatch(error) {436        log.push(`${this.props.logName} componentDidCatch`);437        this.setState({error});438      }439      UNSAFE_componentWillMount() {440        log.push(`${this.props.logName} componentWillMount`);441      }442      componentDidMount() {443        log.push(`${this.props.logName} componentDidMount`);444      }445      UNSAFE_componentWillReceiveProps() {446        log.push(`${this.props.logName} componentWillReceiveProps`);447      }448      UNSAFE_componentWillUpdate() {449        log.push(`${this.props.logName} componentWillUpdate`);450      }451      componentDidUpdate() {452        log.push(`${this.props.logName} componentDidUpdate`);453      }454      componentWillUnmount() {455        log.push(`${this.props.logName} componentWillUnmount`);456      }457    };458    ErrorBoundary.defaultProps = {459      logName: 'ErrorBoundary',460      renderError(error, props) {461        return (462          <div ref={props.errorMessageRef}>463            Caught an error: {error.message}.464          </div>465        );466      },467    };468    RetryErrorBoundary = class extends React.Component {469      constructor(props) {470        super(props);471        log.push('RetryErrorBoundary constructor');472      }473      render() {474        log.push('RetryErrorBoundary render');475        return <BrokenRender />;476      }477      UNSAFE_componentWillMount() {478        log.push('RetryErrorBoundary componentWillMount');479      }480      componentDidMount() {481        log.push('RetryErrorBoundary componentDidMount');482      }483      componentWillUnmount() {484        log.push('RetryErrorBoundary componentWillUnmount');485      }486      componentDidCatch(error) {487        log.push('RetryErrorBoundary componentDidCatch [!]');488        // In Fiber, calling setState() (and failing) is treated as a rethrow.489        this.setState({});490      }491    };492    ErrorMessage = class extends React.Component {493      constructor(props) {494        super(props);495        log.push('ErrorMessage constructor');496      }497      UNSAFE_componentWillMount() {498        log.push('ErrorMessage componentWillMount');499      }500      componentDidMount() {501        log.push('ErrorMessage componentDidMount');502      }503      componentWillUnmount() {504        log.push('ErrorMessage componentWillUnmount');505      }506      render() {507        log.push('ErrorMessage render');508        return <div>Caught an error: {this.props.message}.</div>;509      }510    };511  });512  it('does not swallow exceptions on mounting without boundaries', () => {513    let container = document.createElement('div');514    expect(() => {515      ReactDOM.render(<BrokenRender />, container);516    }).toThrow('Hello');517    container = document.createElement('div');518    expect(() => {519      ReactDOM.render(<BrokenComponentWillMount />, container);520    }).toThrow('Hello');521    container = document.createElement('div');522    expect(() => {523      ReactDOM.render(<BrokenComponentDidMount />, container);524    }).toThrow('Hello');525  });526  it('does not swallow exceptions on updating without boundaries', () => {527    let container = document.createElement('div');528    ReactDOM.render(<BrokenComponentWillUpdate />, container);529    expect(() => {530      ReactDOM.render(<BrokenComponentWillUpdate />, container);531    }).toThrow('Hello');532    container = document.createElement('div');533    ReactDOM.render(<BrokenComponentWillReceiveProps />, container);534    expect(() => {535      ReactDOM.render(<BrokenComponentWillReceiveProps />, container);536    }).toThrow('Hello');537    container = document.createElement('div');538    ReactDOM.render(<BrokenComponentDidUpdate />, container);539    expect(() => {540      ReactDOM.render(<BrokenComponentDidUpdate />, container);541    }).toThrow('Hello');542  });543  it('does not swallow exceptions on unmounting without boundaries', () => {544    const container = document.createElement('div');545    ReactDOM.render(<BrokenComponentWillUnmount />, container);546    expect(() => {547      ReactDOM.unmountComponentAtNode(container);548    }).toThrow('Hello');549  });550  it('prevents errors from leaking into other roots', () => {551    const container1 = document.createElement('div');552    const container2 = document.createElement('div');553    const container3 = document.createElement('div');554    ReactDOM.render(<span>Before 1</span>, container1);555    expect(() => {556      ReactDOM.render(<BrokenRender />, container2);557    }).toThrow('Hello');558    ReactDOM.render(559      <ErrorBoundary>560        <BrokenRender />561      </ErrorBoundary>,562      container3,563    );564    expect(container1.firstChild.textContent).toBe('Before 1');565    expect(container2.firstChild).toBe(null);566    expect(container3.firstChild.textContent).toBe('Caught an error: Hello.');567    ReactDOM.render(<span>After 1</span>, container1);568    ReactDOM.render(<span>After 2</span>, container2);569    ReactDOM.render(570      <ErrorBoundary forceRetry={true}>After 3</ErrorBoundary>,571      container3,572    );573    expect(container1.firstChild.textContent).toBe('After 1');574    expect(container2.firstChild.textContent).toBe('After 2');575    expect(container3.firstChild.textContent).toBe('After 3');576    ReactDOM.unmountComponentAtNode(container1);577    ReactDOM.unmountComponentAtNode(container2);578    ReactDOM.unmountComponentAtNode(container3);579    expect(container1.firstChild).toBe(null);580    expect(container2.firstChild).toBe(null);581    expect(container3.firstChild).toBe(null);582  });583  it('renders an error state if child throws in render', () => {584    const container = document.createElement('div');585    ReactDOM.render(586      <ErrorBoundary>587        <BrokenRender />588      </ErrorBoundary>,589      container,590    );591    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');592    expect(log).toEqual([593      'ErrorBoundary constructor',594      'ErrorBoundary componentWillMount',595      'ErrorBoundary render success',596      'BrokenRender constructor',597      'BrokenRender componentWillMount',598      'BrokenRender render [!]',599      // Fiber mounts with null children before capturing error600      'ErrorBoundary componentDidMount',601      // Catch and render an error message602      'ErrorBoundary componentDidCatch',603      'ErrorBoundary componentWillUpdate',604      'ErrorBoundary render error',605      'ErrorBoundary componentDidUpdate',606    ]);607    log.length = 0;608    ReactDOM.unmountComponentAtNode(container);609    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);610  });611  it('renders an error state if child throws in constructor', () => {612    const container = document.createElement('div');613    ReactDOM.render(614      <ErrorBoundary>615        <BrokenConstructor />616      </ErrorBoundary>,617      container,618    );619    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');620    expect(log).toEqual([621      'ErrorBoundary constructor',622      'ErrorBoundary componentWillMount',623      'ErrorBoundary render success',624      'BrokenConstructor constructor [!]',625      // Fiber mounts with null children before capturing error626      'ErrorBoundary componentDidMount',627      // Catch and render an error message628      'ErrorBoundary componentDidCatch',629      'ErrorBoundary componentWillUpdate',630      'ErrorBoundary render error',631      'ErrorBoundary componentDidUpdate',632    ]);633    log.length = 0;634    ReactDOM.unmountComponentAtNode(container);635    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);636  });637  it('renders an error state if child throws in componentWillMount', () => {638    const container = document.createElement('div');639    ReactDOM.render(640      <ErrorBoundary>641        <BrokenComponentWillMount />642      </ErrorBoundary>,643      container,644    );645    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');646    expect(log).toEqual([647      'ErrorBoundary constructor',648      'ErrorBoundary componentWillMount',649      'ErrorBoundary render success',650      'BrokenComponentWillMount constructor',651      'BrokenComponentWillMount componentWillMount [!]',652      'ErrorBoundary componentDidMount',653      'ErrorBoundary componentDidCatch',654      'ErrorBoundary componentWillUpdate',655      'ErrorBoundary render error',656      'ErrorBoundary componentDidUpdate',657    ]);658    log.length = 0;659    ReactDOM.unmountComponentAtNode(container);660    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);661  });662  it('renders an error state if context provider throws in componentWillMount', () => {663    class BrokenComponentWillMountWithContext extends React.Component {664      static childContextTypes = {foo: PropTypes.number};665      getChildContext() {666        return {foo: 42};667      }668      render() {669        return <div>{this.props.children}</div>;670      }671      UNSAFE_componentWillMount() {672        throw new Error('Hello');673      }674    }675    const container = document.createElement('div');676    ReactDOM.render(677      <ErrorBoundary>678        <BrokenComponentWillMountWithContext />679      </ErrorBoundary>,680      container,681    );682    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');683  });684  it('renders an error state if module-style context provider throws in componentWillMount', () => {685    function BrokenComponentWillMountWithContext() {686      return {687        getChildContext() {688          return {foo: 42};689        },690        render() {691          return <div>{this.props.children}</div>;692        },693        UNSAFE_componentWillMount() {694          throw new Error('Hello');695        },696      };697    }698    BrokenComponentWillMountWithContext.childContextTypes = {699      foo: PropTypes.number,700    };701    const container = document.createElement('div');702    ReactDOM.render(703      <ErrorBoundary>704        <BrokenComponentWillMountWithContext />705      </ErrorBoundary>,706      container,707    );708    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');709  });710  it('mounts the error message if mounting fails', () => {711    function renderError(error) {712      return <ErrorMessage message={error.message} />;713    }714    const container = document.createElement('div');715    ReactDOM.render(716      <ErrorBoundary renderError={renderError}>717        <BrokenRender />718      </ErrorBoundary>,719      container,720    );721    expect(log).toEqual([722      'ErrorBoundary constructor',723      'ErrorBoundary componentWillMount',724      'ErrorBoundary render success',725      'BrokenRender constructor',726      'BrokenRender componentWillMount',727      'BrokenRender render [!]',728      'ErrorBoundary componentDidMount',729      'ErrorBoundary componentDidCatch',730      'ErrorBoundary componentWillUpdate',731      'ErrorBoundary render error',732      'ErrorMessage constructor',733      'ErrorMessage componentWillMount',734      'ErrorMessage render',735      'ErrorMessage componentDidMount',736      'ErrorBoundary componentDidUpdate',737    ]);738    log.length = 0;739    ReactDOM.unmountComponentAtNode(container);740    expect(log).toEqual([741      'ErrorBoundary componentWillUnmount',742      'ErrorMessage componentWillUnmount',743    ]);744  });745  it('propagates errors on retry on mounting', () => {746    const container = document.createElement('div');747    ReactDOM.render(748      <ErrorBoundary>749        <RetryErrorBoundary>750          <BrokenRender />751        </RetryErrorBoundary>752      </ErrorBoundary>,753      container,754    );755    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');756    expect(log).toEqual([757      'ErrorBoundary constructor',758      'ErrorBoundary componentWillMount',759      'ErrorBoundary render success',760      'RetryErrorBoundary constructor',761      'RetryErrorBoundary componentWillMount',762      'RetryErrorBoundary render',763      'BrokenRender constructor',764      'BrokenRender componentWillMount',765      'BrokenRender render [!]',766      // In Fiber, failed error boundaries render null before attempting to recover767      'RetryErrorBoundary componentDidMount',768      'RetryErrorBoundary componentDidCatch [!]',769      'ErrorBoundary componentDidMount',770      // Retry771      'RetryErrorBoundary render',772      'BrokenRender constructor',773      'BrokenRender componentWillMount',774      'BrokenRender render [!]',775      // This time, the error propagates to the higher boundary776      'RetryErrorBoundary componentWillUnmount',777      'ErrorBoundary componentDidCatch',778      // Render the error779      'ErrorBoundary componentWillUpdate',780      'ErrorBoundary render error',781      'ErrorBoundary componentDidUpdate',782    ]);783    log.length = 0;784    ReactDOM.unmountComponentAtNode(container);785    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);786  });787  it('propagates errors inside boundary during componentWillMount', () => {788    const container = document.createElement('div');789    ReactDOM.render(790      <ErrorBoundary>791        <BrokenComponentWillMountErrorBoundary />792      </ErrorBoundary>,793      container,794    );795    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');796    expect(log).toEqual([797      'ErrorBoundary constructor',798      'ErrorBoundary componentWillMount',799      'ErrorBoundary render success',800      'BrokenComponentWillMountErrorBoundary constructor',801      'BrokenComponentWillMountErrorBoundary componentWillMount [!]',802      // The error propagates to the higher boundary803      'ErrorBoundary componentDidMount',804      'ErrorBoundary componentDidCatch',805      'ErrorBoundary componentWillUpdate',806      'ErrorBoundary render error',807      'ErrorBoundary componentDidUpdate',808    ]);809    log.length = 0;810    ReactDOM.unmountComponentAtNode(container);811    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);812  });813  it('propagates errors inside boundary while rendering error state', () => {814    const container = document.createElement('div');815    ReactDOM.render(816      <ErrorBoundary>817        <BrokenRenderErrorBoundary>818          <BrokenRender />819        </BrokenRenderErrorBoundary>820      </ErrorBoundary>,821      container,822    );823    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');824    expect(log).toEqual([825      'ErrorBoundary constructor',826      'ErrorBoundary componentWillMount',827      'ErrorBoundary render success',828      'BrokenRenderErrorBoundary constructor',829      'BrokenRenderErrorBoundary componentWillMount',830      'BrokenRenderErrorBoundary render success',831      'BrokenRender constructor',832      'BrokenRender componentWillMount',833      'BrokenRender render [!]',834      // The first error boundary catches the error835      // It adjusts state but throws displaying the message836      // Finish mounting with null children837      'BrokenRenderErrorBoundary componentDidMount',838      // Attempt to handle the error839      'BrokenRenderErrorBoundary componentDidCatch',840      'ErrorBoundary componentDidMount',841      'BrokenRenderErrorBoundary render error [!]',842      // Boundary fails with new error, propagate to next boundary843      'BrokenRenderErrorBoundary componentWillUnmount',844      // Attempt to handle the error again845      'ErrorBoundary componentDidCatch',846      'ErrorBoundary componentWillUpdate',847      'ErrorBoundary render error',848      'ErrorBoundary componentDidUpdate',849    ]);850    log.length = 0;851    ReactDOM.unmountComponentAtNode(container);852    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);853  });854  it('does not call componentWillUnmount when aborting initial mount', () => {855    const container = document.createElement('div');856    ReactDOM.render(857      <ErrorBoundary>858        <Normal />859        <BrokenRender />860        <Normal />861      </ErrorBoundary>,862      container,863    );864    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');865    expect(log).toEqual([866      'ErrorBoundary constructor',867      'ErrorBoundary componentWillMount',868      'ErrorBoundary render success',869      // Render first child870      'Normal constructor',871      'Normal componentWillMount',872      'Normal render',873      // Render second child (it throws)874      'BrokenRender constructor',875      'BrokenRender componentWillMount',876      'BrokenRender render [!]',877      // Render third child, even though an earlier sibling threw.878      'Normal constructor',879      'Normal componentWillMount',880      'Normal render',881      // Finish mounting with null children882      'ErrorBoundary componentDidMount',883      // Handle the error884      'ErrorBoundary componentDidCatch',885      // Render the error message886      'ErrorBoundary componentWillUpdate',887      'ErrorBoundary render error',888      'ErrorBoundary componentDidUpdate',889    ]);890    log.length = 0;891    ReactDOM.unmountComponentAtNode(container);892    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);893  });894  it('resets callback refs if mounting aborts', () => {895    function childRef(x) {896      log.push('Child ref is set to ' + x);897    }898    function errorMessageRef(x) {899      log.push('Error message ref is set to ' + x);900    }901    const container = document.createElement('div');902    ReactDOM.render(903      <ErrorBoundary errorMessageRef={errorMessageRef}>904        <div ref={childRef} />905        <BrokenRender />906      </ErrorBoundary>,907      container,908    );909    expect(container.textContent).toBe('Caught an error: Hello.');910    expect(log).toEqual([911      'ErrorBoundary constructor',912      'ErrorBoundary componentWillMount',913      'ErrorBoundary render success',914      'BrokenRender constructor',915      'BrokenRender componentWillMount',916      'BrokenRender render [!]',917      // Handle error:918      // Finish mounting with null children919      'ErrorBoundary componentDidMount',920      // Handle the error921      'ErrorBoundary componentDidCatch',922      // Render the error message923      'ErrorBoundary componentWillUpdate',924      'ErrorBoundary render error',925      'Error message ref is set to [object HTMLDivElement]',926      'ErrorBoundary componentDidUpdate',927    ]);928    log.length = 0;929    ReactDOM.unmountComponentAtNode(container);930    expect(log).toEqual([931      'ErrorBoundary componentWillUnmount',932      'Error message ref is set to null',933    ]);934  });935  it('resets object refs if mounting aborts', () => {936    let childRef = React.createRef();937    let errorMessageRef = React.createRef();938    const container = document.createElement('div');939    ReactDOM.render(940      <ErrorBoundary errorMessageRef={errorMessageRef}>941        <div ref={childRef} />942        <BrokenRender />943      </ErrorBoundary>,944      container,945    );946    expect(container.textContent).toBe('Caught an error: Hello.');947    expect(log).toEqual([948      'ErrorBoundary constructor',949      'ErrorBoundary componentWillMount',950      'ErrorBoundary render success',951      'BrokenRender constructor',952      'BrokenRender componentWillMount',953      'BrokenRender render [!]',954      // Handle error:955      // Finish mounting with null children956      'ErrorBoundary componentDidMount',957      // Handle the error958      'ErrorBoundary componentDidCatch',959      // Render the error message960      'ErrorBoundary componentWillUpdate',961      'ErrorBoundary render error',962      'ErrorBoundary componentDidUpdate',963    ]);964    expect(errorMessageRef.current.toString()).toEqual(965      '[object HTMLDivElement]',966    );967    log.length = 0;968    ReactDOM.unmountComponentAtNode(container);969    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);970    expect(errorMessageRef.current).toEqual(null);971  });972  it('successfully mounts if no error occurs', () => {973    const container = document.createElement('div');974    ReactDOM.render(975      <ErrorBoundary>976        <div>Mounted successfully.</div>977      </ErrorBoundary>,978      container,979    );980    expect(container.firstChild.textContent).toBe('Mounted successfully.');981    expect(log).toEqual([982      'ErrorBoundary constructor',983      'ErrorBoundary componentWillMount',984      'ErrorBoundary render success',985      'ErrorBoundary componentDidMount',986    ]);987    log.length = 0;988    ReactDOM.unmountComponentAtNode(container);989    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);990  });991  it('catches if child throws in constructor during update', () => {992    const container = document.createElement('div');993    ReactDOM.render(994      <ErrorBoundary>995        <Normal />996      </ErrorBoundary>,997      container,998    );999    log.length = 0;1000    ReactDOM.render(1001      <ErrorBoundary>1002        <Normal />1003        <Normal logName="Normal2" />1004        <BrokenConstructor />1005      </ErrorBoundary>,1006      container,1007    );1008    expect(container.textContent).toBe('Caught an error: Hello.');1009    expect(log).toEqual([1010      'ErrorBoundary componentWillReceiveProps',1011      'ErrorBoundary componentWillUpdate',1012      'ErrorBoundary render success',1013      'Normal componentWillReceiveProps',1014      'Normal componentWillUpdate',1015      'Normal render',1016      // Normal2 will attempt to mount:1017      'Normal2 constructor',1018      'Normal2 componentWillMount',1019      'Normal2 render',1020      // BrokenConstructor will abort rendering:1021      'BrokenConstructor constructor [!]',1022      // Finish updating with null children1023      'Normal componentWillUnmount',1024      'ErrorBoundary componentDidUpdate',1025      // Handle the error1026      'ErrorBoundary componentDidCatch',1027      // Render the error message1028      'ErrorBoundary componentWillUpdate',1029      'ErrorBoundary render error',1030      'ErrorBoundary componentDidUpdate',1031    ]);1032    log.length = 0;1033    ReactDOM.unmountComponentAtNode(container);1034    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);1035  });1036  it('catches if child throws in componentWillMount during update', () => {1037    const container = document.createElement('div');1038    ReactDOM.render(1039      <ErrorBoundary>1040        <Normal />1041      </ErrorBoundary>,1042      container,1043    );1044    log.length = 0;1045    ReactDOM.render(1046      <ErrorBoundary>1047        <Normal />1048        <Normal logName="Normal2" />1049        <BrokenComponentWillMount />1050      </ErrorBoundary>,1051      container,1052    );1053    expect(container.textContent).toBe('Caught an error: Hello.');1054    expect(log).toEqual([1055      'ErrorBoundary componentWillReceiveProps',1056      'ErrorBoundary componentWillUpdate',1057      'ErrorBoundary render success',1058      'Normal componentWillReceiveProps',1059      'Normal componentWillUpdate',1060      'Normal render',1061      // Normal2 will attempt to mount:1062      'Normal2 constructor',1063      'Normal2 componentWillMount',1064      'Normal2 render',1065      // BrokenComponentWillMount will abort rendering:1066      'BrokenComponentWillMount constructor',1067      'BrokenComponentWillMount componentWillMount [!]',1068      // Finish updating with null children1069      'Normal componentWillUnmount',1070      'ErrorBoundary componentDidUpdate',1071      // Handle the error1072      'ErrorBoundary componentDidCatch',1073      // Render the error message1074      'ErrorBoundary componentWillUpdate',1075      'ErrorBoundary render error',1076      'ErrorBoundary componentDidUpdate',1077    ]);1078    log.length = 0;1079    ReactDOM.unmountComponentAtNode(container);1080    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);1081  });1082  it('catches if child throws in componentWillReceiveProps during update', () => {1083    const container = document.createElement('div');1084    ReactDOM.render(1085      <ErrorBoundary>1086        <Normal />1087        <BrokenComponentWillReceiveProps />1088      </ErrorBoundary>,1089      container,1090    );1091    log.length = 0;1092    ReactDOM.render(1093      <ErrorBoundary>1094        <Normal />1095        <BrokenComponentWillReceiveProps />1096      </ErrorBoundary>,1097      container,1098    );1099    expect(container.textContent).toBe('Caught an error: Hello.');1100    expect(log).toEqual([1101      'ErrorBoundary componentWillReceiveProps',1102      'ErrorBoundary componentWillUpdate',1103      'ErrorBoundary render success',1104      'Normal componentWillReceiveProps',1105      'Normal componentWillUpdate',1106      'Normal render',1107      // BrokenComponentWillReceiveProps will abort rendering:1108      'BrokenComponentWillReceiveProps componentWillReceiveProps [!]',1109      // Finish updating with null children1110      'Normal componentWillUnmount',1111      'BrokenComponentWillReceiveProps componentWillUnmount',1112      'ErrorBoundary componentDidUpdate',1113      // Handle the error1114      'ErrorBoundary componentDidCatch',1115      'ErrorBoundary componentWillUpdate',1116      'ErrorBoundary render error',1117      'ErrorBoundary componentDidUpdate',1118    ]);1119    log.length = 0;1120    ReactDOM.unmountComponentAtNode(container);1121    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);1122  });1123  it('catches if child throws in componentWillUpdate during update', () => {1124    const container = document.createElement('div');1125    ReactDOM.render(1126      <ErrorBoundary>1127        <Normal />1128        <BrokenComponentWillUpdate />1129      </ErrorBoundary>,1130      container,1131    );1132    log.length = 0;1133    ReactDOM.render(1134      <ErrorBoundary>1135        <Normal />1136        <BrokenComponentWillUpdate />1137      </ErrorBoundary>,1138      container,1139    );1140    expect(container.textContent).toBe('Caught an error: Hello.');1141    expect(log).toEqual([1142      'ErrorBoundary componentWillReceiveProps',1143      'ErrorBoundary componentWillUpdate',1144      'ErrorBoundary render success',1145      'Normal componentWillReceiveProps',1146      'Normal componentWillUpdate',1147      'Normal render',1148      // BrokenComponentWillUpdate will abort rendering:1149      'BrokenComponentWillUpdate componentWillReceiveProps',1150      'BrokenComponentWillUpdate componentWillUpdate [!]',1151      // Finish updating with null children1152      'Normal componentWillUnmount',1153      'BrokenComponentWillUpdate componentWillUnmount',1154      'ErrorBoundary componentDidUpdate',1155      // Handle the error1156      'ErrorBoundary componentDidCatch',1157      'ErrorBoundary componentWillUpdate',1158      'ErrorBoundary render error',1159      'ErrorBoundary componentDidUpdate',1160    ]);1161    log.length = 0;1162    ReactDOM.unmountComponentAtNode(container);1163    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);1164  });1165  it('catches if child throws in render during update', () => {1166    const container = document.createElement('div');1167    ReactDOM.render(1168      <ErrorBoundary>1169        <Normal />1170      </ErrorBoundary>,1171      container,1172    );1173    log.length = 0;1174    ReactDOM.render(1175      <ErrorBoundary>1176        <Normal />1177        <Normal logName="Normal2" />1178        <BrokenRender />1179      </ErrorBoundary>,1180      container,1181    );1182    expect(container.textContent).toBe('Caught an error: Hello.');1183    expect(log).toEqual([1184      'ErrorBoundary componentWillReceiveProps',1185      'ErrorBoundary componentWillUpdate',1186      'ErrorBoundary render success',1187      'Normal componentWillReceiveProps',1188      'Normal componentWillUpdate',1189      'Normal render',1190      // Normal2 will attempt to mount:1191      'Normal2 constructor',1192      'Normal2 componentWillMount',1193      'Normal2 render',1194      // BrokenRender will abort rendering:1195      'BrokenRender constructor',1196      'BrokenRender componentWillMount',1197      'BrokenRender render [!]',1198      // Finish updating with null children1199      'Normal componentWillUnmount',1200      'ErrorBoundary componentDidUpdate',1201      // Handle the error1202      'ErrorBoundary componentDidCatch',1203      'ErrorBoundary componentWillUpdate',1204      'ErrorBoundary render error',1205      'ErrorBoundary componentDidUpdate',1206    ]);1207    log.length = 0;1208    ReactDOM.unmountComponentAtNode(container);1209    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);1210  });1211  it('keeps refs up-to-date during updates', () => {1212    function child1Ref(x) {1213      log.push('Child1 ref is set to ' + x);1214    }1215    function child2Ref(x) {1216      log.push('Child2 ref is set to ' + x);1217    }1218    function errorMessageRef(x) {1219      log.push('Error message ref is set to ' + x);1220    }1221    const container = document.createElement('div');1222    ReactDOM.render(1223      <ErrorBoundary errorMessageRef={errorMessageRef}>1224        <div ref={child1Ref} />1225      </ErrorBoundary>,1226      container,1227    );1228    expect(log).toEqual([1229      'ErrorBoundary constructor',1230      'ErrorBoundary componentWillMount',1231      'ErrorBoundary render success',1232      'Child1 ref is set to [object HTMLDivElement]',1233      'ErrorBoundary componentDidMount',1234    ]);1235    log.length = 0;1236    ReactDOM.render(1237      <ErrorBoundary errorMessageRef={errorMessageRef}>1238        <div ref={child1Ref} />1239        <div ref={child2Ref} />1240        <BrokenRender />1241      </ErrorBoundary>,1242      container,1243    );1244    expect(container.textContent).toBe('Caught an error: Hello.');1245    expect(log).toEqual([1246      'ErrorBoundary componentWillReceiveProps',1247      'ErrorBoundary componentWillUpdate',1248      'ErrorBoundary render success',1249      // BrokenRender will abort rendering:1250      'BrokenRender constructor',1251      'BrokenRender componentWillMount',1252      'BrokenRender render [!]',1253      // Finish updating with null children1254      'Child1 ref is set to null',1255      'ErrorBoundary componentDidUpdate',1256      // Handle the error1257      'ErrorBoundary componentDidCatch',1258      'ErrorBoundary componentWillUpdate',1259      'ErrorBoundary render error',1260      'Error message ref is set to [object HTMLDivElement]',1261      // Child2 ref is never set because its mounting aborted1262      'ErrorBoundary componentDidUpdate',1263    ]);1264    log.length = 0;1265    ReactDOM.unmountComponentAtNode(container);1266    expect(log).toEqual([1267      'ErrorBoundary componentWillUnmount',1268      'Error message ref is set to null',1269    ]);1270  });1271  it('recovers from componentWillUnmount errors on update', () => {1272    const container = document.createElement('div');1273    ReactDOM.render(1274      <ErrorBoundary>1275        <BrokenComponentWillUnmount />1276        <BrokenComponentWillUnmount />1277        <Normal />1278      </ErrorBoundary>,1279      container,1280    );1281    log.length = 0;1282    ReactDOM.render(1283      <ErrorBoundary>1284        <BrokenComponentWillUnmount />1285      </ErrorBoundary>,1286      container,1287    );1288    expect(container.textContent).toBe('Caught an error: Hello.');1289    expect(log).toEqual([1290      'ErrorBoundary componentWillReceiveProps',1291      'ErrorBoundary componentWillUpdate',1292      'ErrorBoundary render success',1293      // Update existing child:1294      'BrokenComponentWillUnmount componentWillReceiveProps',1295      'BrokenComponentWillUnmount componentWillUpdate',1296      'BrokenComponentWillUnmount render',1297      // Unmounting throws:1298      'BrokenComponentWillUnmount componentWillUnmount [!]',1299      // Fiber proceeds with lifecycles despite errors1300      'Normal componentWillUnmount',1301      // The components have updated in this phase1302      'BrokenComponentWillUnmount componentDidUpdate',1303      'ErrorBoundary componentDidUpdate',1304      // Now that commit phase is done, Fiber unmounts the boundary's children1305      'BrokenComponentWillUnmount componentWillUnmount [!]',1306      'ErrorBoundary componentDidCatch',1307      // The initial render was aborted, so1308      // Fiber retries from the root.1309      'ErrorBoundary componentWillUpdate',1310      'ErrorBoundary componentDidUpdate',1311      // The second willUnmount error should be captured and logged, too.1312      'ErrorBoundary componentDidCatch',1313      'ErrorBoundary componentWillUpdate',1314      // Render an error now (stack will do it later)1315      'ErrorBoundary render error',1316      // Attempt to unmount previous child:1317      // Done1318      'ErrorBoundary componentDidUpdate',1319    ]);1320    log.length = 0;1321    ReactDOM.unmountComponentAtNode(container);1322    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);1323  });1324  it('recovers from nested componentWillUnmount errors on update', () => {1325    const container = document.createElement('div');1326    ReactDOM.render(1327      <ErrorBoundary>1328        <Normal>1329          <BrokenComponentWillUnmount />1330        </Normal>1331        <BrokenComponentWillUnmount />1332      </ErrorBoundary>,1333      container,1334    );1335    log.length = 0;1336    ReactDOM.render(1337      <ErrorBoundary>1338        <Normal>1339          <BrokenComponentWillUnmount />1340        </Normal>1341      </ErrorBoundary>,1342      container,1343    );1344    expect(container.textContent).toBe('Caught an error: Hello.');1345    expect(log).toEqual([1346      'ErrorBoundary componentWillReceiveProps',1347      'ErrorBoundary componentWillUpdate',1348      'ErrorBoundary render success',1349      // Update existing children:1350      'Normal componentWillReceiveProps',1351      'Normal componentWillUpdate',1352      'Normal render',1353      'BrokenComponentWillUnmount componentWillReceiveProps',1354      'BrokenComponentWillUnmount componentWillUpdate',1355      'BrokenComponentWillUnmount render',1356      // Unmounting throws:1357      'BrokenComponentWillUnmount componentWillUnmount [!]',1358      // Fiber proceeds with lifecycles despite errors1359      'BrokenComponentWillUnmount componentDidUpdate',1360      'Normal componentDidUpdate',1361      'ErrorBoundary componentDidUpdate',1362      'Normal componentWillUnmount',1363      'BrokenComponentWillUnmount componentWillUnmount [!]',1364      // Now that commit phase is done, Fiber handles errors1365      'ErrorBoundary componentDidCatch',1366      // The initial render was aborted, so1367      // Fiber retries from the root.1368      'ErrorBoundary componentWillUpdate',1369      'ErrorBoundary componentDidUpdate',1370      // The second willUnmount error should be captured and logged, too.1371      'ErrorBoundary componentDidCatch',1372      'ErrorBoundary componentWillUpdate',1373      // Render an error now (stack will do it later)1374      'ErrorBoundary render error',1375      // Done1376      'ErrorBoundary componentDidUpdate',1377    ]);1378    log.length = 0;1379    ReactDOM.unmountComponentAtNode(container);1380    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);1381  });1382  it('picks the right boundary when handling unmounting errors', () => {1383    function renderInnerError(error) {1384      return <div>Caught an inner error: {error.message}.</div>;1385    }1386    function renderOuterError(error) {1387      return <div>Caught an outer error: {error.message}.</div>;1388    }1389    const container = document.createElement('div');1390    ReactDOM.render(1391      <ErrorBoundary1392        logName="OuterErrorBoundary"1393        renderError={renderOuterError}>1394        <ErrorBoundary1395          logName="InnerErrorBoundary"1396          renderError={renderInnerError}>1397          <BrokenComponentWillUnmount />1398        </ErrorBoundary>1399      </ErrorBoundary>,1400      container,1401    );1402    log.length = 0;1403    ReactDOM.render(1404      <ErrorBoundary1405        logName="OuterErrorBoundary"1406        renderError={renderOuterError}>1407        <ErrorBoundary1408          logName="InnerErrorBoundary"1409          renderError={renderInnerError}1410        />1411      </ErrorBoundary>,1412      container,1413    );1414    expect(container.textContent).toBe('Caught an inner error: Hello.');1415    expect(log).toEqual([1416      // Update outer boundary1417      'OuterErrorBoundary componentWillReceiveProps',1418      'OuterErrorBoundary componentWillUpdate',1419      'OuterErrorBoundary render success',1420      // Update inner boundary1421      'InnerErrorBoundary componentWillReceiveProps',1422      'InnerErrorBoundary componentWillUpdate',1423      'InnerErrorBoundary render success',1424      // Try unmounting child1425      'BrokenComponentWillUnmount componentWillUnmount [!]',1426      // Fiber proceeds with lifecycles despite errors1427      // Inner and outer boundaries have updated in this phase1428      'InnerErrorBoundary componentDidUpdate',1429      'OuterErrorBoundary componentDidUpdate',1430      // Now that commit phase is done, Fiber handles errors1431      // Only inner boundary receives the error:1432      'InnerErrorBoundary componentDidCatch',1433      'InnerErrorBoundary componentWillUpdate',1434      // Render an error now1435      'InnerErrorBoundary render error',1436      // In Fiber, this was a local update to the1437      // inner boundary so only its hook fires1438      'InnerErrorBoundary componentDidUpdate',1439    ]);1440    log.length = 0;1441    ReactDOM.unmountComponentAtNode(container);1442    expect(log).toEqual([1443      'OuterErrorBoundary componentWillUnmount',1444      'InnerErrorBoundary componentWillUnmount',1445    ]);1446  });1447  it('can recover from error state', () => {1448    const container = document.createElement('div');1449    ReactDOM.render(1450      <ErrorBoundary>1451        <BrokenRender />1452      </ErrorBoundary>,1453      container,1454    );1455    ReactDOM.render(1456      <ErrorBoundary>1457        <Normal />1458      </ErrorBoundary>,1459      container,1460    );1461    // Error boundary doesn't retry by itself:1462    expect(container.textContent).toBe('Caught an error: Hello.');1463    // Force the success path:1464    log.length = 0;1465    ReactDOM.render(1466      <ErrorBoundary forceRetry={true}>1467        <Normal />1468      </ErrorBoundary>,1469      container,1470    );1471    expect(container.textContent).not.toContain('Caught an error');1472    expect(log).toEqual([1473      'ErrorBoundary componentWillReceiveProps',1474      'ErrorBoundary componentWillUpdate',1475      'ErrorBoundary render success',1476      // Mount children:1477      'Normal constructor',1478      'Normal componentWillMount',1479      'Normal render',1480      // Finalize updates:1481      'Normal componentDidMount',1482      'ErrorBoundary componentDidUpdate',1483    ]);1484    log.length = 0;1485    ReactDOM.unmountComponentAtNode(container);1486    expect(log).toEqual([1487      'ErrorBoundary componentWillUnmount',1488      'Normal componentWillUnmount',1489    ]);1490  });1491  it('can update multiple times in error state', () => {1492    const container = document.createElement('div');1493    ReactDOM.render(1494      <ErrorBoundary>1495        <BrokenRender />1496      </ErrorBoundary>,1497      container,1498    );1499    expect(container.textContent).toBe('Caught an error: Hello.');1500    ReactDOM.render(1501      <ErrorBoundary>1502        <BrokenRender />1503      </ErrorBoundary>,1504      container,1505    );1506    expect(container.textContent).toBe('Caught an error: Hello.');1507    ReactDOM.render(<div>Other screen</div>, container);1508    expect(container.textContent).toBe('Other screen');1509    ReactDOM.unmountComponentAtNode(container);1510  });1511  it("doesn't get into inconsistent state during removals", () => {1512    const container = document.createElement('div');1513    ReactDOM.render(1514      <ErrorBoundary>1515        <Normal />1516        <BrokenComponentWillUnmount />1517        <Normal />1518      </ErrorBoundary>,1519      container,1520    );1521    ReactDOM.render(<ErrorBoundary />, container);1522    expect(container.textContent).toBe('Caught an error: Hello.');1523    log.length = 0;1524    ReactDOM.unmountComponentAtNode(container);1525    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);1526  });1527  it("doesn't get into inconsistent state during additions", () => {1528    const container = document.createElement('div');1529    ReactDOM.render(<ErrorBoundary />, container);1530    ReactDOM.render(1531      <ErrorBoundary>1532        <Normal />1533        <BrokenRender />1534        <Normal />1535      </ErrorBoundary>,1536      container,1537    );1538    expect(container.textContent).toBe('Caught an error: Hello.');1539    log.length = 0;1540    ReactDOM.unmountComponentAtNode(container);1541    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);1542  });1543  it("doesn't get into inconsistent state during reorders", () => {1544    function getAMixOfNormalAndBrokenRenderElements() {1545      const elements = [];1546      for (let i = 0; i < 100; i++) {1547        elements.push(<Normal key={i} />);1548      }1549      elements.push(<MaybeBrokenRender key={100} />);1550      let currentIndex = elements.length;1551      while (0 !== currentIndex) {1552        const randomIndex = Math.floor(Math.random() * currentIndex);1553        currentIndex -= 1;1554        const temporaryValue = elements[currentIndex];1555        elements[currentIndex] = elements[randomIndex];1556        elements[randomIndex] = temporaryValue;1557      }1558      return elements;1559    }1560    class MaybeBrokenRender extends React.Component {1561      render() {1562        if (fail) {1563          throw new Error('Hello');1564        }1565        return <div>{this.props.children}</div>;1566      }1567    }1568    let fail = false;1569    const container = document.createElement('div');1570    ReactDOM.render(1571      <ErrorBoundary>{getAMixOfNormalAndBrokenRenderElements()}</ErrorBoundary>,1572      container,1573    );1574    expect(container.textContent).not.toContain('Caught an error');1575    fail = true;1576    ReactDOM.render(1577      <ErrorBoundary>{getAMixOfNormalAndBrokenRenderElements()}</ErrorBoundary>,1578      container,1579    );1580    expect(container.textContent).toBe('Caught an error: Hello.');1581    log.length = 0;1582    ReactDOM.unmountComponentAtNode(container);1583    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);1584  });1585  it('catches errors originating downstream', () => {1586    let fail = false;1587    class Stateful extends React.Component {1588      state = {shouldThrow: false};1589      render() {1590        if (fail) {1591          log.push('Stateful render [!]');1592          throw new Error('Hello');1593        }1594        return <div>{this.props.children}</div>;1595      }1596    }1597    let statefulInst;1598    const container = document.createElement('div');1599    ReactDOM.render(1600      <ErrorBoundary>1601        <Stateful ref={inst => (statefulInst = inst)} />1602      </ErrorBoundary>,1603      container,1604    );1605    log.length = 0;1606    expect(() => {1607      fail = true;1608      statefulInst.forceUpdate();1609    }).not.toThrow();1610    expect(log).toEqual([1611      'Stateful render [!]',1612      'ErrorBoundary componentDidCatch',1613      'ErrorBoundary componentWillUpdate',1614      'ErrorBoundary render error',1615      'ErrorBoundary componentDidUpdate',1616    ]);1617    log.length = 0;1618    ReactDOM.unmountComponentAtNode(container);1619    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);1620  });1621  it('catches errors in componentDidMount', () => {1622    const container = document.createElement('div');1623    ReactDOM.render(1624      <ErrorBoundary>1625        <BrokenComponentWillUnmount>1626          <Normal />1627        </BrokenComponentWillUnmount>1628        <BrokenComponentDidMount />1629        <Normal logName="LastChild" />1630      </ErrorBoundary>,1631      container,1632    );1633    expect(log).toEqual([1634      'ErrorBoundary constructor',1635      'ErrorBoundary componentWillMount',1636      'ErrorBoundary render success',1637      'BrokenComponentWillUnmount constructor',1638      'BrokenComponentWillUnmount componentWillMount',1639      'BrokenComponentWillUnmount render',1640      'Normal constructor',1641      'Normal componentWillMount',1642      'Normal render',1643      'BrokenComponentDidMount constructor',1644      'BrokenComponentDidMount componentWillMount',1645      'BrokenComponentDidMount render',1646      'LastChild constructor',1647      'LastChild componentWillMount',1648      'LastChild render',1649      // Start flushing didMount queue1650      'Normal componentDidMount',1651      'BrokenComponentWillUnmount componentDidMount',1652      'BrokenComponentDidMount componentDidMount [!]',1653      // Continue despite the error1654      'LastChild componentDidMount',1655      'ErrorBoundary componentDidMount',1656      // Now we are ready to handle the error1657      // Safely unmount every child1658      'BrokenComponentWillUnmount componentWillUnmount [!]',1659      // Continue unmounting safely despite any errors1660      'Normal componentWillUnmount',1661      'BrokenComponentDidMount componentWillUnmount',1662      'LastChild componentWillUnmount',1663      // Handle the error1664      'ErrorBoundary componentDidCatch',1665      'ErrorBoundary componentWillUpdate',1666      // The willUnmount error should be captured and logged, too.1667      'ErrorBoundary componentDidUpdate',1668      'ErrorBoundary componentDidCatch',1669      'ErrorBoundary componentWillUpdate',1670      'ErrorBoundary render error',1671      // The update has finished1672      'ErrorBoundary componentDidUpdate',1673    ]);1674    log.length = 0;1675    ReactDOM.unmountComponentAtNode(container);1676    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);1677  });1678  it('catches errors in componentDidUpdate', () => {1679    const container = document.createElement('div');1680    ReactDOM.render(1681      <ErrorBoundary>1682        <BrokenComponentDidUpdate />1683      </ErrorBoundary>,1684      container,1685    );1686    log.length = 0;1687    ReactDOM.render(1688      <ErrorBoundary>1689        <BrokenComponentDidUpdate />1690      </ErrorBoundary>,1691      container,1692    );1693    expect(log).toEqual([1694      'ErrorBoundary componentWillReceiveProps',1695      'ErrorBoundary componentWillUpdate',1696      'ErrorBoundary render success',1697      'BrokenComponentDidUpdate componentWillReceiveProps',1698      'BrokenComponentDidUpdate componentWillUpdate',1699      'BrokenComponentDidUpdate render',1700      // All lifecycles run1701      'BrokenComponentDidUpdate componentDidUpdate [!]',1702      'ErrorBoundary componentDidUpdate',1703      'BrokenComponentDidUpdate componentWillUnmount',1704      // Then, error is handled1705      'ErrorBoundary componentDidCatch',1706      'ErrorBoundary componentWillUpdate',1707      'ErrorBoundary render error',1708      'ErrorBoundary componentDidUpdate',1709    ]);1710    log.length = 0;1711    ReactDOM.unmountComponentAtNode(container);1712    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);1713  });1714  it('propagates errors inside boundary during componentDidMount', () => {1715    const container = document.createElement('div');1716    ReactDOM.render(1717      <ErrorBoundary>1718        <BrokenComponentDidMountErrorBoundary1719          renderError={error => (1720            <div>We should never catch our own error: {error.message}.</div>1721          )}1722        />1723      </ErrorBoundary>,1724      container,1725    );1726    expect(container.firstChild.textContent).toBe('Caught an error: Hello.');1727    expect(log).toEqual([1728      'ErrorBoundary constructor',1729      'ErrorBoundary componentWillMount',1730      'ErrorBoundary render success',1731      'BrokenComponentDidMountErrorBoundary constructor',1732      'BrokenComponentDidMountErrorBoundary componentWillMount',1733      'BrokenComponentDidMountErrorBoundary render success',1734      'BrokenComponentDidMountErrorBoundary componentDidMount [!]',1735      // Fiber proceeds with the hooks1736      'ErrorBoundary componentDidMount',1737      'BrokenComponentDidMountErrorBoundary componentWillUnmount',1738      // The error propagates to the higher boundary1739      'ErrorBoundary componentDidCatch',1740      // Fiber retries from the root1741      'ErrorBoundary componentWillUpdate',1742      'ErrorBoundary render error',1743      'ErrorBoundary componentDidUpdate',1744    ]);1745    log.length = 0;1746    ReactDOM.unmountComponentAtNode(container);1747    expect(log).toEqual(['ErrorBoundary componentWillUnmount']);1748  });1749  it('calls componentDidCatch for each error that is captured', () => {1750    function renderUnmountError(error) {1751      return <div>Caught an unmounting error: {error.message}.</div>;1752    }1753    function renderUpdateError(error) {1754      return <div>Caught an updating error: {error.message}.</div>;1755    }1756    const container = document.createElement('div');1757    ReactDOM.render(1758      <ErrorBoundary logName="OuterErrorBoundary">1759        <ErrorBoundary1760          logName="InnerUnmountBoundary"1761          renderError={renderUnmountError}>1762          <BrokenComponentWillUnmount errorText="E1" />1763          <BrokenComponentWillUnmount errorText="E2" />1764        </ErrorBoundary>1765        <ErrorBoundary1766          logName="InnerUpdateBoundary"1767          renderError={renderUpdateError}>1768          <BrokenComponentDidUpdate errorText="E3" />1769          <BrokenComponentDidUpdate errorText="E4" />1770        </ErrorBoundary>1771      </ErrorBoundary>,1772      container,1773    );1774    log.length = 0;1775    ReactDOM.render(1776      <ErrorBoundary logName="OuterErrorBoundary">1777        <ErrorBoundary1778          logName="InnerUnmountBoundary"1779          renderError={renderUnmountError}1780        />1781        <ErrorBoundary1782          logName="InnerUpdateBoundary"1783          renderError={renderUpdateError}>1784          <BrokenComponentDidUpdate errorText="E3" />1785          <BrokenComponentDidUpdate errorText="E4" />1786        </ErrorBoundary>1787      </ErrorBoundary>,1788      container,1789    );1790    expect(container.firstChild.textContent).toBe(1791      'Caught an unmounting error: E2.' + 'Caught an updating error: E4.',1792    );1793    expect(log).toEqual([1794      // Begin update phase1795      'OuterErrorBoundary componentWillReceiveProps',1796      'OuterErrorBoundary componentWillUpdate',1797      'OuterErrorBoundary render success',1798      'InnerUnmountBoundary componentWillReceiveProps',1799      'InnerUnmountBoundary componentWillUpdate',1800      'InnerUnmountBoundary render success',1801      'InnerUpdateBoundary componentWillReceiveProps',1802      'InnerUpdateBoundary componentWillUpdate',1803      'InnerUpdateBoundary render success',1804      // First come the updates1805      'BrokenComponentDidUpdate componentWillReceiveProps',1806      'BrokenComponentDidUpdate componentWillUpdate',1807      'BrokenComponentDidUpdate render',1808      'BrokenComponentDidUpdate componentWillReceiveProps',1809      'BrokenComponentDidUpdate componentWillUpdate',1810      'BrokenComponentDidUpdate render',1811      // We're in commit phase now, deleting1812      'BrokenComponentWillUnmount componentWillUnmount [!]',1813      'BrokenComponentWillUnmount componentWillUnmount [!]',1814      // Continue despite errors, handle them after commit is done1815      'InnerUnmountBoundary componentDidUpdate',1816      // We're still in commit phase, now calling update lifecycles1817      'BrokenComponentDidUpdate componentDidUpdate [!]',1818      // Again, continue despite errors, we'll handle them later1819      'BrokenComponentDidUpdate componentDidUpdate [!]',1820      'InnerUpdateBoundary componentDidUpdate',1821      'OuterErrorBoundary componentDidUpdate',1822      // After the commit phase, attempt to recover from any errors that1823      // were captured1824      'BrokenComponentDidUpdate componentWillUnmount',1825      'BrokenComponentDidUpdate componentWillUnmount',1826      'InnerUnmountBoundary componentDidCatch',1827      'InnerUnmountBoundary componentDidCatch',1828      'InnerUpdateBoundary componentDidCatch',1829      'InnerUpdateBoundary componentDidCatch',1830      'InnerUnmountBoundary componentWillUpdate',1831      'InnerUnmountBoundary render error',1832      'InnerUpdateBoundary componentWillUpdate',1833      'InnerUpdateBoundary render error',1834      'InnerUnmountBoundary componentDidUpdate',1835      'InnerUpdateBoundary componentDidUpdate',1836    ]);1837    log.length = 0;1838    ReactDOM.unmountComponentAtNode(container);1839    expect(log).toEqual([1840      'OuterErrorBoundary componentWillUnmount',1841      'InnerUnmountBoundary componentWillUnmount',1842      'InnerUpdateBoundary componentWillUnmount',1843    ]);1844  });1845  it('discards a bad root if the root component fails', () => {1846    const X = null;1847    const Y = undefined;1848    let err1;1849    let err2;1850    try {1851      let container = document.createElement('div');1852      expect(() => ReactDOM.render(<X />, container)).toWarnDev(1853        'React.createElement: type is invalid -- expected a string ' +1854          '(for built-in components) or a class/function ' +1855          '(for composite components) but got: null.',1856      );1857    } catch (err) {1858      err1 = err;1859    }1860    try {1861      let container = document.createElement('div');1862      expect(() => ReactDOM.render(<Y />, container)).toWarnDev(1863        'React.createElement: type is invalid -- expected a string ' +1864          '(for built-in components) or a class/function ' +1865          '(for composite components) but got: undefined.',1866      );1867    } catch (err) {1868      err2 = err;1869    }1870    expect(err1.message).toMatch(/got: null/);1871    expect(err2.message).toMatch(/got: undefined/);1872  });1873  it('renders empty output if error boundary does not handle the error', () => {1874    const container = document.createElement('div');1875    expect(() => {1876      ReactDOM.render(1877        <div>1878          Sibling1879          <NoopErrorBoundary>1880            <BrokenRender />1881          </NoopErrorBoundary>1882        </div>,1883        container,1884      );1885    }).toWarnDev(1886      'ErrorBoundary: Error boundaries should implement getDerivedStateFromError()',1887      {withoutStack: true},1888    );1889    expect(container.firstChild.textContent).toBe('Sibling');1890    expect(log).toEqual([1891      'NoopErrorBoundary constructor',1892      'NoopErrorBoundary componentWillMount',1893      'NoopErrorBoundary render',1894      'BrokenRender constructor',1895      'BrokenRender componentWillMount',1896      'BrokenRender render [!]',1897      // In Fiber, noop error boundaries render null1898      'NoopErrorBoundary componentDidMount',1899      'NoopErrorBoundary componentDidCatch',1900      // Nothing happens.1901    ]);1902    log.length = 0;1903    ReactDOM.unmountComponentAtNode(container);1904    expect(log).toEqual(['NoopErrorBoundary componentWillUnmount']);1905  });1906  it('passes first error when two errors happen in commit', () => {1907    const errors = [];1908    let caughtError;1909    class Parent extends React.Component {1910      render() {1911        return <Child />;1912      }1913      componentDidMount() {1914        errors.push('parent sad');1915        throw new Error('parent sad');1916      }1917    }1918    class Child extends React.Component {1919      render() {1920        return <div />;1921      }1922      componentDidMount() {1923        errors.push('child sad');1924        throw new Error('child sad');1925      }1926    }1927    const container = document.createElement('div');1928    try {1929      // Here, we test the behavior where there is no error boundary and we1930      // delegate to the host root.1931      ReactDOM.render(<Parent />, container);1932    } catch (e) {1933      if (e.message !== 'parent sad' && e.message !== 'child sad') {1934        throw e;1935      }1936      caughtError = e;1937    }1938    expect(errors).toEqual(['child sad', 'parent sad']);1939    // Error should be the first thrown1940    expect(caughtError.message).toBe('child sad');1941  });1942  it('propagates uncaught error inside unbatched initial mount', () => {1943    function Foo() {1944      throw new Error('foo error');1945    }1946    const container = document.createElement('div');1947    expect(() => {1948      ReactDOM.unstable_batchedUpdates(() => {1949        ReactDOM.render(<Foo />, container);1950      });1951    }).toThrow('foo error');1952  });1953  it('handles errors that occur in before-mutation commit hook', () => {1954    const errors = [];1955    let caughtError;1956    class Parent extends React.Component {1957      getSnapshotBeforeUpdate() {1958        errors.push('parent sad');1959        throw new Error('parent sad');1960      }1961      componentDidUpdate() {}1962      render() {1963        return <Child {...this.props} />;1964      }1965    }1966    class Child extends React.Component {1967      getSnapshotBeforeUpdate() {1968        errors.push('child sad');1969        throw new Error('child sad');1970      }1971      componentDidUpdate() {}1972      render() {1973        return <div />;1974      }1975    }1976    const container = document.createElement('div');1977    ReactDOM.render(<Parent value={1} />, container);1978    try {1979      ReactDOM.render(<Parent value={2} />, container);1980    } catch (e) {1981      if (e.message !== 'parent sad' && e.message !== 'child sad') {1982        throw e;1983      }1984      caughtError = e;1985    }1986    expect(errors).toEqual(['child sad', 'parent sad']);1987    // Error should be the first thrown1988    expect(caughtError.message).toBe('child sad');1989  });...