Migrate Animated Jest tests to Fantom

Summary:
Migrates 10 Animated unit tests from regular Jest (`-test.js`) to Fantom (`-itest.js`) so they run on Hermes in the real React Native runtime.

Migrated: `Easing`, `bezier`, `Interpolation`, `AnimatedObject`, `AnimatedValue`, `AnimatedMock`, `TimingAnimation`, `createAnimatedPropsHook`, `createAnimatedPropsMemoHook`. The two `Libraries/Animated/nodes/AnimatedProps` cases were folded into the existing `AnimatedProps-itest.js` (importing the same module), with no loss of coverage.

Adaptations (no behavioral coverage weakened):
- Drove animation timing with Fantom scheduling instead of jest fake timers, and asserted against the real native animated backend rather than mocking it.
- Replaced `react-test-renderer` rendering with Fantom `createRoot` + `runTask`, asserting real Fabric output / element refs.

Four Animated tests intentionally remain on Jest because they depend on capabilities Fantom does not provide (jest fake timers and/or module mocks of the native animated module): `Animated`, `Animated-web`, `AnimatedNative`, and `NativeAnimatedAllowlist`.

Changelog: [Internal]

Differential Revision: D108759083

Author: rubennorte

packages/react-native/Libraries/Animated/__tests__/AnimatedMock-itest.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import AnimatedImplementation from '../AnimatedImplementation';
+import AnimatedMock from '../AnimatedMock';
+
+describe('Animated Mock', () => {
+  it('matches implementation keys', () => {
+    expect(Object.keys(AnimatedMock)).toEqual(
+      Object.keys(AnimatedImplementation),
+    );
+  });
+  it('matches implementation params', () => {
+    Object.keys(AnimatedImplementation).forEach(key => {
+      if (AnimatedImplementation[key].length !== AnimatedMock[key].length) {
+        throw new Error(
+          'key ' +
+            key +
+            ' had different lengths: ' +
+            JSON.stringify(
+              {
+                impl: {
+                  len: AnimatedImplementation[key].length,
+                  type: typeof AnimatedImplementation[key],
+                  val: AnimatedImplementation[key].toString(),
+                },
+                mock: {
+                  len: AnimatedMock[key].length,
+                  type: typeof AnimatedMock[key],
+                  val: AnimatedMock[key].toString(),
+                },
+              },
+              null,
+              2,
+            ),
+        );
+      }
+    });
+  });
+});

packages/react-native/Libraries/Animated/__tests__/AnimatedMock-test.js

@@ -8,19 +8,13 @@
  * @format
  */
 
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import Animated from '../Animated';
+import AnimatedObject from '../nodes/AnimatedObject';
 import nullthrows from 'nullthrows';
 
 describe('AnimatedObject', () => {
-  let Animated;
-  let AnimatedObject;
-
-  beforeEach(() => {
-    jest.resetModules();
-
-    Animated = require('../Animated').default;
-    AnimatedObject = require('../nodes/AnimatedObject').default;
-  });
-
   it('should get the proper value', () => {
     const anim = new Animated.Value(0);
     const translateAnim = anim.interpolate({

…nimated/__tests__/AnimatedObject-test.js …imated/__tests__/AnimatedObject-itest.jspackages/react-native/Libraries/Animated/__tests__/AnimatedObject-test.js renamed to packages/react-native/Libraries/Animated/__tests__/AnimatedObject-itest.js packages/react-native/Libraries/Animated/__tests__/AnimatedObject-test.js renamed to packages/react-native/Libraries/Animated/__tests__/AnimatedObject-itest.js

@@ -8,9 +8,33 @@
  * @format
  */
 
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
+import AnimatedValue from '../nodes/AnimatedValue';
+
 describe('AnimatedValue', () => {
-  let NativeAnimatedHelper;
-  let AnimatedValue;
+  // Fantom uses the real native animated module and does not support
+  // `jest.spyOn`, so we wrap the relevant `NativeAnimatedHelper.API` methods
+  // with call-through mocks that count invocations and restore them afterwards.
+  const restoreAPI: Array<() => void> = [];
+
+  function spyOnAPI(name: string) {
+    // $FlowFixMe[invalid-computed-prop]
+    const original = NativeAnimatedHelper.API[name];
+    const spy = jest.fn((...args: Array<unknown>) =>
+      original.apply(NativeAnimatedHelper.API, args),
+    );
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
+    NativeAnimatedHelper.API[name] = spy;
+    restoreAPI.push(() => {
+      // $FlowFixMe[prop-missing]
+      // $FlowFixMe[cannot-write]
+      NativeAnimatedHelper.API[name] = original;
+    });
+    return spy;
+  }
 
   function createNativeAnimatedValue(): AnimatedValue {
     return new AnimatedValue(0, {useNativeDriver: true});
@@ -32,31 +56,17 @@ describe('AnimatedValue', () => {
   }
 
   beforeEach(() => {
-    jest.resetModules();
-
-    jest.mock('../NativeAnimatedTurboModule', () => ({
-      __esModule: true,
-      default: {
-        addListener: jest.fn(),
-        createAnimatedNode: jest.fn(),
-        dropAnimatedNode: jest.fn(),
-        removeListeners: jest.fn(),
-        startListeningToAnimatedNodeValue: jest.fn(),
-        stopListeningToAnimatedNodeValue: jest.fn(),
-        extractAnimatedNodeOffset: jest.fn(),
-        // ...
-      },
-    }));
-
-    NativeAnimatedHelper =
-      require('../../../src/private/animated/NativeAnimatedHelper').default;
-    AnimatedValue = require('../nodes/AnimatedValue').default;
-
-    jest.spyOn(NativeAnimatedHelper.API, 'createAnimatedNode');
-    jest.spyOn(NativeAnimatedHelper.API, 'dropAnimatedNode');
-    jest.spyOn(NativeAnimatedHelper.API, 'startListeningToAnimatedNodeValue');
-    jest.spyOn(NativeAnimatedHelper.API, 'setWaitingForIdentifier');
-    jest.spyOn(NativeAnimatedHelper.API, 'unsetWaitingForIdentifier');
+    spyOnAPI('createAnimatedNode');
+    spyOnAPI('dropAnimatedNode');
+    spyOnAPI('startListeningToAnimatedNodeValue');
+    spyOnAPI('setWaitingForIdentifier');
+    spyOnAPI('unsetWaitingForIdentifier');
+  });
+
+  afterEach(() => {
+    while (restoreAPI.length > 0) {
+      restoreAPI.pop()?.();
+    }
   });
 
   it('emits update events for listeners added', () => {
@@ -217,15 +227,22 @@ describe('AnimatedValue', () => {
 
       emitMockUpdate(node, 123, 50);
 
-      const spy = jest.spyOn(node, '__onAnimatedValueUpdateReceived');
+      // $FlowFixMe[method-unbinding]
+      const original = node.__onAnimatedValueUpdateReceived;
+      const spy = jest.fn((...args: Array<unknown>) =>
+        original.apply(node, args),
+      );
+      // $FlowFixMe[cannot-write]
+      node.__onAnimatedValueUpdateReceived = spy;
 
       const mockValue = 100;
       const mockOffset = 50;
 
       emitMockUpdate(node, mockValue, mockOffset);
 
       expect(spy).toHaveBeenCalledWith(mockValue, mockOffset);
-      spy.mockRestore();
+      // $FlowFixMe[cannot-write]
+      node.__onAnimatedValueUpdateReceived = original;
     });
   });
 });

packages/react-native/Libraries/Animated/__tests__/AnimatedProps-test.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-'use strict';
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
 import Easing from '../Easing';
 

…Animated/__tests__/AnimatedValue-test.js …nimated/__tests__/AnimatedValue-itest.jspackages/react-native/Libraries/Animated/__tests__/AnimatedValue-test.js renamed to packages/react-native/Libraries/Animated/__tests__/AnimatedValue-itest.js packages/react-native/Libraries/Animated/__tests__/AnimatedValue-test.js renamed to packages/react-native/Libraries/Animated/__tests__/AnimatedValue-itest.js

@@ -8,6 +8,8 @@
  * @format
  */
 
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
 import type {
   InterpolationConfigSupportedOutputType,
   InterpolationConfigType,
@@ -33,6 +35,13 @@ function createInterpolation<T extends InterpolationConfigSupportedOutputType>(
 }
 
 describe('Interpolation', () => {
+  const originalConsoleWarn = console.warn;
+
+  afterEach(() => {
+    // $FlowFixMe[cannot-write]
+    console.warn = originalConsoleWarn;
+  });
+
   it('should work with defaults', () => {
     const interpolation = createInterpolation({
       inputRange: [0, 1],
@@ -365,7 +374,10 @@ describe('Interpolation', () => {
   });
 
   it('should work with PlatformColor', () => {
-    jest.spyOn(console, 'warn').mockImplementationOnce(() => {});
+    const mockWarn = jest.fn();
+    // $FlowFixMe[cannot-write]
+    console.warn = mockWarn;
+
     const interpolation = createInterpolation({
       inputRange: [0, 1],
       outputRange: [
@@ -381,28 +393,28 @@ describe('Interpolation', () => {
     expect(interpolation(2 / 3)).toStrictEqual(
       PlatformColor('@android:color/white'),
     );
-    expect(console.warn).toBeCalledWith(
+    expect(mockWarn).toBeCalledWith(
       'PlatformColor interpolation should happen natively, here we fallback to the closest color',
     );
     expect(interpolation(1)).toStrictEqual(
       PlatformColor('@android:color/darker_gray'),
     );
   });
 
-  it.each([
+  for (const [label, outputRange, expected] of [
     ['radians', ['1rad', '2rad'], [1, 2]],
     ['degrees', ['90deg', '180deg'], [Math.PI / 2, Math.PI]],
     ['numbers', [1024, Math.PI], [1024, Math.PI]],
     ['unknown', ['5foo', '10foo'], ['5foo', '10foo']],
-  ])(
-    'should convert %s to numbers in the native config',
-    (_, outputRange, expected) => {
+  ]) {
+    it(`should convert ${label} to numbers in the native config`, () => {
       const config = new AnimatedInterpolation(
         // $FlowFixMe[incompatible-type]
         {},
+        // $FlowFixMe[incompatible-call]
         {inputRange: [0, 1], outputRange},
       ).__getNativeConfig();
       expect(config.outputRange).toEqual(expected);
-    },
-  );
+    });
+  }
 });

…raries/Animated/__tests__/Easing-test.js …aries/Animated/__tests__/Easing-itest.jspackages/react-native/Libraries/Animated/__tests__/Easing-test.js renamed to packages/react-native/Libraries/Animated/__tests__/Easing-itest.js packages/react-native/Libraries/Animated/__tests__/Easing-test.js renamed to packages/react-native/Libraries/Animated/__tests__/Easing-itest.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-'use strict';
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
 import TimingAnimation from '../animations/TimingAnimation';
 

…Animated/__tests__/Interpolation-test.js …nimated/__tests__/Interpolation-itest.jspackages/react-native/Libraries/Animated/__tests__/Interpolation-test.js renamed to packages/react-native/Libraries/Animated/__tests__/Interpolation-itest.js packages/react-native/Libraries/Animated/__tests__/Interpolation-test.js renamed to packages/react-native/Libraries/Animated/__tests__/Interpolation-itest.js

@@ -14,7 +14,7 @@
  * @copyright 2014-2015 Gaetan Renaudeau. MIT License.
  */
 
-'use strict';
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
 import bezier from '../bezier';
 

…imated/__tests__/TimingAnimation-test.js …mated/__tests__/TimingAnimation-itest.jspackages/react-native/Libraries/Animated/__tests__/TimingAnimation-test.js renamed to packages/react-native/Libraries/Animated/__tests__/TimingAnimation-itest.js packages/react-native/Libraries/Animated/__tests__/TimingAnimation-test.js renamed to packages/react-native/Libraries/Animated/__tests__/TimingAnimation-itest.js

@@ -13,6 +13,7 @@ import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
 import {Animated} from 'react-native';
+import AnimatedProps from 'react-native/Libraries/Animated/nodes/AnimatedProps';
 import NativeAnimatedHelper from 'react-native/src/private/animated/NativeAnimatedHelper';
 
 function mockNativeAnimatedHelperAPI() {
@@ -58,3 +59,22 @@ test('connects and disconnects views', () => {
   // TODO: investigate why previous task enqueues more tasks.
   Fantom.runWorkLoop();
 });
+
+describe('AnimatedProps#__getValue', () => {
+  function getValue(inputProps: {[string]: unknown}) {
+    const animatedProps = new AnimatedProps(inputProps, jest.fn());
+    return animatedProps.__getValue();
+  }
+
+  test('returns original `style` if it has no nodes', () => {
+    const style = {color: 'red'};
+    expect(getValue({style}).style).toBe(style);
+  });
+
+  test('returns original `style` for invalid style values', () => {
+    const values = [undefined, null, function () {}, true, 123, 'foo'];
+    for (const value of values) {
+      expect(getValue({style: value})).toEqual({style: value});
+    }
+  });
+});