'How to simulate an Error in React functional component with Jest?

I would like to test if my App component handles any error and render the correct component (UnhandledError).

Here is an example for App component

export function App() {
return (
        <ErrorBoundary fallback={<UnhandledError />}>
            <Suspense fallback={<Loader />}>
                <div>Component tree that triggers Suspense...</div>
            </Suspense>
        </ErrorBoundary>
);}

I am a bit unsure how to setup test for this, I am assuming that the best approach would be to render App and mock Loader so that it throws an Error instead of rendering... I have been trying to mock my Loader without any luck making it work.

If this is the case, and assuming that the Loader is also a Functional Component, is there a way to mock it, and for a single test only, so that it throws an Error only for a specific test in test file ?

I am using Create React App (v5) with [email protected] and [email protected]. Any help would be very, very appreciated, thanks!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source