[Solved]-How to write test case for ErrorBoundary in React using Jest / Enzyme-Reactjs

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()
  });

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.
   

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 */
  }
}