From 3c135681079d41db6b2691221bffc0827457af2a Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Wed, 4 Sep 2024 04:14:23 -0700
Subject: [PATCH] Chore: Mobile tests: Fix CodeMirror-related warnings (#10978)

---
 .../components/ExtendedWebView/index.jest.tsx | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/app-mobile/components/ExtendedWebView/index.jest.tsx b/packages/app-mobile/components/ExtendedWebView/index.jest.tsx
index 46af76b6c..ad8c6f6d2 100644
--- a/packages/app-mobile/components/ExtendedWebView/index.jest.tsx
+++ b/packages/app-mobile/components/ExtendedWebView/index.jest.tsx
@@ -15,7 +15,7 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 	const dom = useMemo(() => {
 		// Note: Adding `runScripts: 'dangerously'` to allow running inline <script></script>s.
 		// Use with caution.
-		return new JSDOM(props.html, { runScripts: 'dangerously' });
+		return new JSDOM(props.html, { runScripts: 'dangerously', pretendToBeVisual: true });
 	}, [props.html]);
 
 	useImperativeHandle(ref, (): WebViewControl => {
@@ -46,6 +46,25 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 	injectedJavaScriptRef.current = props.injectedJavaScript;
 
 	useEffect(() => {
+		// JSDOM polyfills
+		dom.window.eval(`
+			// Prevents the CodeMirror error "getClientRects is undefined".
+			// See https://github.com/jsdom/jsdom/issues/3002#issue-652790925
+			document.createRange = () => {
+				const range = new Range();
+				range.getBoundingClientRect = () => {};
+				range.getClientRects = () => {
+					return {
+						length: 0,
+						item: () => null,
+						[Symbol.iterator]: () => {},
+					};
+				};
+
+				return range;
+			};
+		`);
+
 		dom.window.eval(`
 			window.setWebViewApi = (api) => {
 				window.ReactNativeWebView = api;