componentDidCatch and act not working as expected

👋 I think I found a bug 🙂

https://github.com/calebeby/preact-act-bug

I have a feeling it is more of a bug with componentDidCatch than it is with act, but maybe not.

const ThrowingComponent = () => {
  throw new Error('its a broken component')
}

class ErrorBoundary extends Component {
  componentDidCatch(error) {}
  render() {
    return this.props.children
  }
}

test('act', () => {
  jest.spyOn(console, 'error').mockImplementation(() => {})
  act(() => {
    const target = document.createElement('div')
    render(
      <ErrorBoundary>
        <ThrowingComponent />
      </ErrorBoundary>,
      target,
    )
  })
})

In React, this passes, in Preact, it doesn’t. Somehow the error is escaping past the componentDidCatch and up into the test, causing the test to fail. Any idea why?

It isn’t because of act. The 2nd test in each file in the repro repo doesn’t use act, and you can still see the issue (the uncaught promise error in the console). I think act is just making the issue more visible by synchronously causing the error to show itself.

[JoviDeCroock]

Still works though

	it.only('act', () => {
		let spy = sinon.spy();
		const ThrowingComponent = () => {
			throw new Error('Fatal');
		};

		class ErrorBoundary extends Component {
			componentDidCatch(error) {
				spy();
				this.setState({ error });
			}
			render() {
				return this.state.error ? 'error' : this.props.children;
			}
		}

		act(() => {
			render(
				<ErrorBoundary>
					<ThrowingComponent />
				</ErrorBoundary>,
				scratch,
			);
		});

		expect(spy).to.be.calledOnce;
		expect(scratch.innerHTML).to.equal('error');
	});

[calebeby]

@JoviDeCroock your test passes because there isn’t anything that throws 😕

ThrowingComponent renders undefined