How can I test error boundaries in a Create React App?

How can I test error boundaries in a Create React App?

You can test error boundaries in a Create React App by simulating an error in a child component and checking if the error boundary catches it.

Can you show me an example of how to implement an error boundary?

Sure! Here's a simple example:

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

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error('Error caught in ErrorBoundary:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

You can wrap your components with this ErrorBoundary.

How do I simulate an error in a child component?

You can create a child component that throws an error when it renders. For example:

function BuggyComponent() {
  throw new Error('I crashed!');
  return <div>This will not render.</div>;
}

Then, use this BuggyComponent inside your ErrorBoundary.

What should I do if the error boundary doesn't catch the error?

If the error boundary doesn't catch the error, ensure that the component throwing the error is a direct child of the error boundary. Also, check if the error is thrown during rendering, lifecycle methods, or in event handlers.