diff --git a/package.json b/package.json index 5bd7a5d26..c5fd3ff69 100644 --- a/package.json +++ b/package.json @@ -114,6 +114,7 @@ "react-contexify": "^6.0.0", "react-dom": "18.3.1", "react-draggable": "^4.4.4", + "react-error-boundary": "^4.0.13", "react-h5-audio-player": "^3.2.0", "react-intersection-observer": "^9.7.0", "react-mentions": "^4.4.9", diff --git a/ts/test/components/renderComponent.tsx b/ts/test/components/renderComponent.tsx index ad8c46ded..35ce3a12d 100644 --- a/ts/test/components/renderComponent.tsx +++ b/ts/test/components/renderComponent.tsx @@ -1,13 +1,22 @@ /* eslint-disable import/no-extraneous-dependencies */ import { render, RenderOptions } from '@testing-library/react'; -import { AnimatePresence } from 'framer-motion'; +import { AnimatePresence, MotionGlobalConfig } from 'framer-motion'; import { ReactElement, ReactNode } from 'react'; import { SessionTheme } from '../../themes/SessionTheme'; +import { ErrorBoundary } from 'react-error-boundary'; const Providers = ({ children }: { children: ReactNode }) => { + MotionGlobalConfig.skipAnimations = false; + return ( - {children} + + {`Failed to render a component!\n\t${JSON.stringify(children)}`}} + > + {children} + + ); }; diff --git a/ts/test/test-utils/utils/stubbing.ts b/ts/test/test-utils/utils/stubbing.ts index 8a5f63a7b..2d61c5eff 100644 --- a/ts/test/test-utils/utils/stubbing.ts +++ b/ts/test/test-utils/utils/stubbing.ts @@ -86,6 +86,16 @@ export function stubWindow(fn: K, value: WindowValue) }; } +/** + * Resolves "SVGElement is undefined error" in motion components by making JSDOM treat SVG elements as regular DOM elements + * @link https://github.com/jsdom/jsdom/issues/2734#issuecomment-569416871 + * */ +export function stubSVGElement() { + if (!globalAny.SVGElement) { + globalAny.SVGElement = globalAny.Element; + } +} + export const enableLogRedirect = false; export const stubWindowLog = () => { diff --git a/yarn.lock b/yarn.lock index 8f476254a..18b2c91f0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6188,6 +6188,13 @@ react-draggable@^4.4.4: clsx "^1.1.1" prop-types "^15.8.1" +react-error-boundary@^4.0.13: + version "4.0.13" + resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.13.tgz#80386b7b27b1131c5fbb7368b8c0d983354c7947" + integrity sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ== + dependencies: + "@babel/runtime" "^7.12.5" + react-h5-audio-player@^3.2.0: version "3.9.1" resolved "https://registry.yarnpkg.com/react-h5-audio-player/-/react-h5-audio-player-3.9.1.tgz#8a9721fd7a5ff6a9185ce626435207bee1774e83"