score:0

Adding to @Andreas Köberle's comment since the hasError state changes on ComponentDidCatch lifecycle method, you could also use enzymes setState.

You also don't need to mount the comment, shallow would do.

  it('displays error message on error generated by child', () => {
    const wrapper = shallow(
      <ErrorBoundary > 
        <ComponentWithError />
      </ErrorBoundary> 
    );
    wrapper.setState({ hasError: true });
    wrapper.toMatchSnapshot()
  });

score:8

After additional research I found that it is an open issue that has to be solved by Enzyme. https://github.com/airbnb/enzyme/issues/1255

I have implemented it as follows:

function ProblemChild() {
  throw new Error('Error thrown from problem child');
  return <div>Error</div>; // eslint-disable-line
}

describe('<ErrorBoundary> window',()=> {  
  it('displays error message on error generated by child', () => {
    const spy = sinon.spy(ErrorBoundary.prototype, 'componentDidCatch')
    mount(<ErrorBoundary><ProblemChild /></ErrorBoundary>)
    chaiExpect(ErrorBoundary.prototype.componentDidCatch).to.have.property('callCount', 1)
  })
})

Proposed workaround works anyhow

  1. it is still not possible to test error message rendered to the app user by <ErrorBoundary>
  2. test console displays warnings:

    PASS src/ErrorBoundary.test.js ● Console

    console.error node_modules/react-dom/cjs/react-dom.development.js:9627
      The above error occurred in the <ProblemChild> component:
          in ProblemChild (at ErrorBoundary.test.js:37)
          in ErrorBoundry (created by WrapperComponent)
          in WrapperComponent
    
      React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundry.
    

score:20

Enzyme has simulateError helper now.

So this works very well for me:

const Something = () => null;

describe('ErrorBoundary', () => {
  it('should display an ErrorMessage if wrapped component throws', () => {
    const wrapper = mount(
      <ErrorBoundary>
        <Something />
      </ErrorBoundary>
    );

    const error = new Error('test');

    wrapper.find(Something).simulateError(error);

    /* The rest fo your test */
  }
}

Related Query

More Query from same tag