Suppressing error boundary logs doesn't work with enzyme-adapter-react-16

[hpurmann]

This is a cross-post from the React issue tracker

Describe the bug
In React 16.5, @gaearon added a way to suppress error bounday logs in tests (described in this issue].

Unfortunately, this doesn't work when importing enzyme-adapter-react-16. The import is enough for it to fail.

To Reproduce
Steps to reproduce the behavior:

1. Clone the reproducing repository
2. yarn install
3. yarn test

Expected behavior
I expect the error to be swallowed and counted by the global error handler in expectRenderError.
Instead, the error is shown as before. When not importing the adapter, everything is working fine.

[ljharb]

I'm confused why you'd need to suppress them - if you're wrapping an error boundary, then your error boundary gets the error information in its componentDidCatch.

I don't think that workaround is particularly useful; your tests should be exercising your error boundaries the same way they'd be used in production.

In other words, i'd expect you to mount or shallow around an ErrorBoundary that wrapped your component-under-test, and use your tests to assert on what arguments componentDidCatch received. See enzyme's own tests for an example: https://github.com/airbnb/enzyme/blob/master/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx#L5112-L5146

[hpurmann]

The problem is the logging of the error boundary output, e.g.

The above error occurred in the <Darth> component:
        in Darth
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Even though it looks ugly, mocha is fine with it and the tests succeed. However, when running the test in Karma it fails.

Thanks for that code pointer, @ljharb! I didn't know about enzymes simulateError. It successfully suppresses this log as well 👍

---

I'm now wondering why I can't find the specific ErrorInfo component on error. The html() output looks perfectly fine.

ErrorBoundary:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
  }

  componentDidCatch() {
    this.setState({ hasError: true })
  }

  render() {
    if (this.state.hasError) {
      return <ErrorInfo />
    }
    return this.props.children
  }
}

Test

    it('should render the ErrorInfo component on error', () => {
      const wrapper = mount(
        <PageErrorBoundary>
          <Child />
        </PageErrorBoundary>)

      expect(() => wrapper.find(Child).simulateError(DummyError)).not.to.throw()

      console.log(wrapper.html()) // output looks perfectly fine
      expect(wrapper.find(ErrorInfo)).to.have.lengthOf(1) // fails
    })

[hpurmann]

Apparently, I need to call wrapper.update() explicitly after simulating the error. Then finding the component does work. Now I'm only wondering why that is :)

[ljharb]

@hpurmann see the merged but unreleased #1812 which fixes that.