Error with jest-canvas-mock and React.lazy

[DavidArmendariz]

I am using Lottie to render some animations in React and I am using Jest with React Testing Library. When I test a component like this:

const TestComponent = () => {
  return (
    <div>
      <Lottie animationData={TestAnimation} loop={false} />
    </div>
  );
};

Everything goes fine.

But if I test a component that imports this component via lazy loading like this:

const ComponentThatRendersLottie = lazy(() => import('./ComponentThatRendersLottie'));

const App = () => {

  return (
    <>
      <Suspense fallback={<div />}>
        <Routes>
          <Route element={<ComponentThatRendersLottie />} path="/some-path" />
        </Routes>
      </Suspense>
    </>
  );
};

Then I get an error like this:

Error: Uncaught [TypeError: Cannot set properties of undefined (setting 'fillStyle')]
The above error occurred in one of your React components:
      
     at Lazy
     at ...
     at ...
     ...
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

I am using jest-canvas-mock and just importing it in my setupTest.ts file. I have read their documentation but I haven't found any solution.