Migrate Image, Text, and NativeComponent Jest tests to Fantom (#57262)

Summary:
Pull Request resolved: #57262

Migrates `Image`, `Text`, and `NativeComponent` unit tests from regular Jest (`-test.js`) to Fantom (`-itest.js`).

Folded missing cases into the existing `Image`, `ImageBackground`, and `Text` Fantom tests (asserting real Fabric output such as `rn-image`/`rn-paragraph` instead of the previously mocked `RCTImageView`/`RCTText`), and migrated the pure-logic helpers `AssetUtils`, `ImageSourceUtils`, `assetRelativePathInSnapshot`, and `StaticViewConfigValidator`. Obsolete mocked-output snapshots were removed.

`resolveAssetSource` remains on Jest because it relies on `jest.resetModules` to reset module-level state between cases, which Fantom does not support.

Changelog: [Internal]

Reviewed By: sammy-SC

Differential Revision: D108759081

fbshipit-source-id: 5863056c3f7a754f37e3ebe6d6f646a0f7a4da5e

Author: rubennorte

…aries/Image/__tests__/AssetUtils-test.js …ries/Image/__tests__/AssetUtils-itest.jspackages/react-native/Libraries/Image/__tests__/AssetUtils-test.js renamed to packages/react-native/Libraries/Image/__tests__/AssetUtils-itest.js packages/react-native/Libraries/Image/__tests__/AssetUtils-test.js renamed to packages/react-native/Libraries/Image/__tests__/AssetUtils-itest.js

@@ -8,17 +8,24 @@
  * @format
  */
 
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
 import {getUrlCacheBreaker, setUrlCacheBreaker} from '../AssetUtils';
 
+const originalConsoleWarn = console.warn;
+
 describe('AssetUtils', () => {
   afterEach(() => {
+    // $FlowFixMe[cannot-write]
+    console.warn = originalConsoleWarn;
     // $FlowFixMe[cannot-write]
     global.__DEV__ = true;
-    jest.clearAllMocks();
   });
 
   it('should return empty string and warn once if no cacheBreaker set (DEV)', () => {
-    const mockWarn = jest.spyOn(console, 'warn').mockReturnValue(undefined);
+    const mockWarn = jest.fn();
+    // $FlowFixMe[cannot-write]
+    console.warn = mockWarn;
     // $FlowFixMe[cannot-write]
     global.__DEV__ = true;
     expect(getUrlCacheBreaker()).toEqual('');
@@ -27,7 +34,9 @@ describe('AssetUtils', () => {
   });
 
   it('should return empty string if no cacheBreaker set in prod', () => {
-    const mockWarn = jest.spyOn(console, 'warn');
+    const mockWarn = jest.fn();
+    // $FlowFixMe[cannot-write]
+    console.warn = mockWarn;
     // $FlowFixMe[cannot-write]
     global.__DEV__ = false;
     expect(getUrlCacheBreaker()).toEqual('');

packages/react-native/Libraries/Image/__tests__/Image-itest.js

@@ -16,6 +16,7 @@ import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
 import {createRef} from 'react';
 import {Image} from 'react-native';
+import * as ImageInjection from 'react-native/Libraries/Image/ImageInjection';
 import accessibilityPropsSuite from 'react-native/src/private/__tests__/utilities/accessibilityPropsSuite';
 import {testIDPropSuite} from 'react-native/src/private/__tests__/utilities/commonPropsSuite';
 import ensureInstance from 'react-native/src/private/__tests__/utilities/ensureInstance';
@@ -657,6 +658,275 @@ describe('<Image>', () => {
     });
   });
 
+  describe('resolveAssetSource', () => {
+    it('resolves a plain source object to itself', () => {
+      expect(Image.resolveAssetSource({uri: 'foo-bar.jpg'})).toEqual({
+        uri: 'foo-bar.jpg',
+      });
+    });
+  });
+
+  describe('image attached callbacks', () => {
+    it('invokes original ref callbacks correctly when using image attached callbacks', () => {
+      let imageInstanceFromCallback = null;
+      let imageInstanceFromRef1 = null;
+      let imageInstanceFromRef2 = null;
+
+      const callback = jest.fn((instance: HostInstance) => {
+        imageInstanceFromCallback = instance;
+
+        return () => {
+          imageInstanceFromCallback = null;
+        };
+      });
+
+      ImageInjection.unstable_registerImageAttachedCallback(callback);
+
+      expect(imageInstanceFromCallback).toBe(null);
+
+      const root = Fantom.createRoot();
+
+      const ref1 = jest.fn();
+      const ref1Setter = (instance: HostInstance | null): void => {
+        imageInstanceFromRef1 = instance;
+        ref1(instance);
+      };
+
+      Fantom.runTask(() => {
+        root.render(<Image source={LOGO_SOURCE} ref={ref1Setter} />);
+      });
+
+      expect(imageInstanceFromCallback).not.toBe(null);
+      expect(imageInstanceFromRef1).not.toBe(null);
+      expect(imageInstanceFromCallback).toBe(imageInstanceFromRef1);
+      expect(callback).toHaveBeenCalledTimes(1);
+      expect(ref1).toHaveBeenCalledTimes(1);
+
+      const ref2 = jest.fn();
+      const ref2Setter = (instance: HostInstance | null): void => {
+        imageInstanceFromRef2 = instance;
+        ref2(instance);
+      };
+
+      Fantom.runTask(() => {
+        root.render(<Image source={LOGO_SOURCE} ref={ref2Setter} />);
+      });
+
+      expect(imageInstanceFromCallback).not.toBe(null);
+      expect(imageInstanceFromRef1).toBe(null);
+      expect(imageInstanceFromRef2).not.toBe(null);
+      expect(imageInstanceFromCallback).toBe(imageInstanceFromRef2);
+      expect(callback).toHaveBeenCalledTimes(2);
+      expect(ref1).toHaveBeenCalledTimes(2);
+      expect(ref2).toHaveBeenCalledTimes(1);
+
+      Fantom.runTask(() => {
+        root.render(<Image source={LOGO_SOURCE} ref={ref2Setter} />);
+      });
+
+      expect(callback).toHaveBeenCalledTimes(2);
+      expect(ref2).toHaveBeenCalledTimes(1);
+
+      ImageInjection.unstable_unregisterImageAttachedCallback(callback);
+      Fantom.runTask(() => {
+        root.render(<></>);
+      });
+    });
+
+    it('calls image attached callbacks (basic)', () => {
+      let imageInstanceFromCallback = null;
+      let imageInstanceFromRef = null;
+
+      const callback = (instance: HostInstance) => {
+        imageInstanceFromCallback = instance;
+
+        return () => {
+          imageInstanceFromCallback = null;
+        };
+      };
+
+      ImageInjection.unstable_registerImageAttachedCallback(callback);
+
+      expect(imageInstanceFromCallback).toBe(null);
+
+      const root = Fantom.createRoot();
+
+      Fantom.runTask(() => {
+        root.render(
+          <Image
+            source={LOGO_SOURCE}
+            ref={instance => {
+              imageInstanceFromRef = instance;
+            }}
+          />,
+        );
+      });
+
+      expect(imageInstanceFromCallback).not.toBe(null);
+      expect(imageInstanceFromRef).not.toBe(null);
+      expect(imageInstanceFromCallback).toBe(imageInstanceFromRef);
+
+      Fantom.runTask(() => {
+        root.render(<></>);
+      });
+
+      expect(imageInstanceFromCallback).toBe(null);
+      expect(imageInstanceFromRef).toBe(null);
+
+      ImageInjection.unstable_unregisterImageAttachedCallback(callback);
+
+      Fantom.runTask(() => {
+        root.render(
+          <Image
+            source={LOGO_SOURCE}
+            ref={instance => {
+              imageInstanceFromRef = instance;
+            }}
+          />,
+        );
+      });
+
+      expect(imageInstanceFromRef).not.toBe(null);
+      expect(imageInstanceFromCallback).toBe(null);
+
+      Fantom.runTask(() => {
+        root.render(<></>);
+      });
+    });
+
+    it('calls image attached callbacks (multiple callbacks)', () => {
+      let imageInstanceFromCallback1 = null;
+      let imageInstanceFromCallback2 = null;
+      let imageInstanceFromRef = null;
+
+      const callback1 = (instance: HostInstance) => {
+        imageInstanceFromCallback1 = instance;
+
+        return () => {
+          imageInstanceFromCallback1 = null;
+        };
+      };
+      const callback2 = (instance: HostInstance) => {
+        imageInstanceFromCallback2 = instance;
+
+        return () => {
+          imageInstanceFromCallback2 = null;
+        };
+      };
+
+      ImageInjection.unstable_registerImageAttachedCallback(callback1);
+      ImageInjection.unstable_registerImageAttachedCallback(callback2);
+
+      expect(imageInstanceFromCallback1).toBe(null);
+      expect(imageInstanceFromCallback2).toBe(null);
+
+      const root = Fantom.createRoot();
+
+      Fantom.runTask(() => {
+        root.render(
+          <Image
+            source={LOGO_SOURCE}
+            ref={instance => {
+              imageInstanceFromRef = instance;
+            }}
+          />,
+        );
+      });
+
+      expect(imageInstanceFromRef).not.toBe(null);
+      expect(imageInstanceFromCallback1).not.toBe(null);
+      expect(imageInstanceFromCallback2).not.toBe(null);
+      expect(imageInstanceFromCallback1).toBe(imageInstanceFromRef);
+      expect(imageInstanceFromCallback2).toBe(imageInstanceFromRef);
+
+      Fantom.runTask(() => {
+        root.render(<></>);
+      });
+
+      expect(imageInstanceFromRef).toBe(null);
+      expect(imageInstanceFromCallback1).toBe(null);
+      expect(imageInstanceFromCallback2).toBe(null);
+
+      ImageInjection.unstable_unregisterImageAttachedCallback(callback1);
+      ImageInjection.unstable_unregisterImageAttachedCallback(callback2);
+    });
+
+    it('calls image attached callbacks (multiple images)', () => {
+      let imageInstancesFromCallback = new Set<HostInstance>();
+
+      const callback = (instance: HostInstance) => {
+        imageInstancesFromCallback.add(instance);
+
+        return () => {
+          imageInstancesFromCallback.delete(instance);
+        };
+      };
+
+      ImageInjection.unstable_registerImageAttachedCallback(callback);
+
+      expect(imageInstancesFromCallback.size).toBe(0);
+
+      const root = Fantom.createRoot();
+
+      let firstInstance;
+      let secondInstance;
+
+      const firstImageElement = (
+        <Image
+          key="first-image"
+          source={LOGO_SOURCE}
+          ref={instance => {
+            firstInstance = instance;
+          }}
+        />
+      );
+
+      const secondImageElement = (
+        <Image
+          key="second-image"
+          source={LOGO_SOURCE}
+          ref={instance => {
+            secondInstance = instance;
+          }}
+        />
+      );
+
+      Fantom.runTask(() => {
+        root.render(
+          <>
+            {firstImageElement}
+            {secondImageElement}
+          </>,
+        );
+      });
+
+      expect(firstInstance).not.toBe(null);
+      expect(secondInstance).not.toBe(null);
+      expect(imageInstancesFromCallback.size).toBe(2);
+      expect([...imageInstancesFromCallback][0]).toBe(firstInstance);
+      expect([...imageInstancesFromCallback][1]).toBe(secondInstance);
+
+      Fantom.runTask(() => {
+        root.render(<>{secondImageElement}</>);
+      });
+
+      expect(firstInstance).toBe(null);
+      expect(secondInstance).not.toBe(null);
+      expect(imageInstancesFromCallback.size).toBe(1);
+      expect([...imageInstancesFromCallback][0]).toBe(secondInstance);
+
+      Fantom.runTask(() => {
+        root.render(<></>);
+      });
+
+      expect(firstInstance).toBe(null);
+      expect(secondInstance).toBe(null);
+      expect(imageInstancesFromCallback.size).toBe(0);
+
+      ImageInjection.unstable_unregisterImageAttachedCallback(callback);
+    });
+  });
+
   describe('static methods', () => {
     afterEach(() => {
       NativeFantom.clearAllImages();