Remove ReactNativeElement from Fantom tests (nullthrows/HostInstance/HTMLElement) (#57468)

Summary:
Pull Request resolved: #57468

Removes the `ensureInstance(ref.current, ReactNativeElement)` pattern from Fantom tests. Host refs are typed as `HostInstance` and read with `nullthrows(ref.current)`; component-specific instance types (e.g. `React.ElementRef<typeof TextInput>`, `React.ElementRef<typeof ScrollView>`) are kept only where a test actually uses a component's imperative API (`focus`/`blur`/`clear`, `getInnerViewRef`, etc.). This drops the `ReactNativeElement`/`ensureInstance` imports from tests that only needed a non-null host instance.

Where a test genuinely needs a runtime type check, `instanceof ReactNativeElement` / `toBeInstanceOf(ReactNativeElement)` is replaced with the standard `instanceof HTMLElement` (a global), since React Native elements are instances of `HTMLElement` at runtime.

This also covers the internal `-itest.fb.js` tests and the shared ShadowNode test utilities (`ShadowNodeReferenceCounter`/`ShadowNodeRevisionGetter`), which now type their refs as `HostInstance`.

Known follow-up: the RN Flow global type definitions still need to be fixed. At the type level `HTMLElement` does not match `HostInstance` yet, even though the runtime values do. Because of this, `HTMLElement` cannot be used where a narrowed value flows into RN-internal APIs typed as `HostInstance`/`ReadOnlyNode` (e.g. `VirtualView`, which instead types its helper params as `HostInstance` directly and passes them through without a narrowing check). Aligning the `HTMLElement` global definition with `HostInstance` would let those remaining spots use `HTMLElement` too.

This is a test-only change with no runtime or user-facing impact.

Changelog:
[Internal]

Reviewed By: christophpurrer

Differential Revision: D110888634

fbshipit-source-id: c570700ed82fd8333093ee01816e872c486f3e8f

Author: rubennorte

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

@@ -13,13 +13,13 @@ import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
 import type {HostInstance} from 'react-native';
 
-import ensureInstance from '../../../src/private/__tests__/utilities/ensureInstance';
 import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import * as Fantom from '@react-native/fantom';
+import nullthrows from 'nullthrows';
+import * as React from 'react';
 import {createRef} from 'react';
 import {Animated, Easing, View, useAnimatedValue} from 'react-native';
 import {allowStyleProp} from 'react-native/Libraries/Animated/NativeAnimatedAllowlist';
-import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
 
 // Deferred start outputs the initial value on the first animation frame and
 // re-anchors timing on the second. This delays animation progress by one
@@ -54,7 +54,7 @@ test('moving box by 100 points', () => {
     root.render(<MyApp />);
   });
 
-  const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+  const viewElement = nullthrows(viewRef.current);
 
   expect(viewElement.getBoundingClientRect().x).toBe(0);
 
@@ -119,7 +119,7 @@ test('native-driven interpolation honors custom easing', () => {
     root.render(<MyApp />);
   });
 
-  const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+  const viewElement = nullthrows(viewRef.current);
 
   Fantom.runTask(() => {
     Animated.timing(_progress, {
@@ -179,7 +179,7 @@ test('native-driven interpolation preserves easing overshoot under clamp', () =>
     root.render(<MyApp />);
   });
 
-  const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+  const viewElement = nullthrows(viewRef.current);
 
   Fantom.runTask(() => {
     Animated.timing(_progress, {
@@ -231,7 +231,7 @@ function startTimingAnimationAndGetTranslateXAfterFirstFrame(): number {
     root.render(<MyApp />);
   });
 
-  const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+  const viewElement = nullthrows(viewRef.current);
 
   Fantom.runTask(() => {
     Animated.timing(_translateX, {
@@ -326,11 +326,8 @@ test('animation driven by onScroll event', () => {
     root.render(<PressableWithNativeDriver />);
   });
 
-  const scrollViewelement = ensureInstance(
-    scrollViewRef.current,
-    ReactNativeElement,
-  );
-  const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+  const scrollViewelement = nullthrows(scrollViewRef.current);
+  const viewElement = nullthrows(viewRef.current);
 
   Fantom.scrollTo(scrollViewelement, {
     x: 0,
@@ -397,10 +394,7 @@ test('animation driven by onScroll event when animated view is unmounted', () =>
     root.render(<PressableWithNativeDriver mountAnimatedView={false} />);
   });
 
-  const scrollViewelement = ensureInstance(
-    scrollViewRef.current,
-    ReactNativeElement,
-  );
+  const scrollViewelement = nullthrows(scrollViewRef.current);
 
   Fantom.scrollTo(scrollViewelement, {
     x: 0,
@@ -438,7 +432,7 @@ test('animated opacity', () => {
     root.render(<MyApp />);
   });
 
-  const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+  const viewElement = nullthrows(viewRef.current);
 
   expect(viewElement.getBoundingClientRect().x).toBe(0);
 
@@ -492,7 +486,7 @@ test('moving box by 50 points with offset 10', () => {
     root.render(<MyApp />);
   });
 
-  const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+  const viewElement = nullthrows(viewRef.current);
 
   expect(viewElement.getBoundingClientRect().x).toBe(0);
 
@@ -592,11 +586,8 @@ describe('Value.flattenOffset', () => {
       _onScroll.addListener(fn);
     });
 
-    const scrollViewelement = ensureInstance(
-      scrollViewRef.current,
-      ReactNativeElement,
-    );
-    const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+    const scrollViewelement = nullthrows(scrollViewRef.current);
+    const viewElement = nullthrows(viewRef.current);
 
     Fantom.scrollTo(scrollViewelement, {
       x: 0,
@@ -676,11 +667,8 @@ describe('Value.extractOffset', () => {
       _onScroll.addListener(fn);
     });
 
-    const scrollViewelement = ensureInstance(
-      scrollViewRef.current,
-      ReactNativeElement,
-    );
-    const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+    const scrollViewelement = nullthrows(scrollViewRef.current);
+    const viewElement = nullthrows(viewRef.current);
 
     Fantom.scrollTo(scrollViewelement, {
       x: 0,
@@ -751,7 +739,7 @@ test('animate layout props', () => {
     root.render(<MyApp />);
   });
 
-  const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+  const viewElement = nullthrows(viewRef.current);
 
   Fantom.runTask(() => {
     _heightAnimation = Animated.timing(_animatedHeight, {
@@ -819,7 +807,7 @@ test('AnimatedValue.interpolate', () => {
     root.render(<MyApp outputRangeX={1} />);
   });
 
-  const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+  const viewElement = nullthrows(viewRef.current);
 
   expect(_valueX?.__getValue()).toBe(0.5);
   expect(_interpolatedValueX?.__getValue()).toBe(50);
@@ -891,7 +879,7 @@ test('Animated.sequence', () => {
     root.render(<MyApp />);
   });
 
-  const element = ensureInstance(elementRef.current, ReactNativeElement);
+  const element = nullthrows(elementRef.current);
 
   expect(element.getBoundingClientRect().y).toBe(0);
 

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

@@ -13,13 +13,12 @@ import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
 import type {HostInstance} from 'react-native';
 
-import ensureInstance from '../../../src/private/__tests__/utilities/ensureInstance';
 import * as Fantom from '@react-native/fantom';
+import nullthrows from 'nullthrows';
 import * as React from 'react';
 import {Component, createRef, memo, useEffect, useMemo, useState} from 'react';
 import {Animated, View, useAnimatedValue} from 'react-native';
 import {allowStyleProp} from 'react-native/Libraries/Animated/NativeAnimatedAllowlist';
-import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
 
 // marginLeft (and the other margin props) are only on the native animated
 // allowlist when the shared backend is enabled. This test deliberately does NOT
@@ -108,7 +107,7 @@ test('animated opacity', () => {
     root.render(<MyApp />);
   });
 
-  const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+  const viewElement = nullthrows(viewRef.current);
 
   expect(viewElement.getBoundingClientRect().x).toBe(0);
 
@@ -414,7 +413,7 @@ test('animate non-layout props and rerender', () => {
     root.render(<MyApp />);
   });
 
-  const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+  const viewElement = nullthrows(viewRef.current);
 
   Fantom.runTask(() => {
     _opacityAnimation = Animated.timing(_animatedOpacity, {

packages/react-native/Libraries/Components/ActivityIndicator/__tests__/ActivityIndicator-itest.js

@@ -10,12 +10,13 @@
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
-import ensureInstance from '../../../../src/private/__tests__/utilities/ensureInstance';
+import type {HostInstance} from 'react-native';
+
 import * as Fantom from '@react-native/fantom';
+import nullthrows from 'nullthrows';
 import * as React from 'react';
 import {createRef} from 'react';
 import {ActivityIndicator} from 'react-native';
-import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
 
 describe('<ActivityIndicator>', () => {
   it('sets displayName', () => {
@@ -167,28 +168,26 @@ describe('<ActivityIndicator>', () => {
   });
 
   describe('ref', () => {
-    it('provides a valid ReactNativeElement instance', () => {
-      const elementRef =
-        createRef<React.ElementRef<typeof ActivityIndicator>>();
+    it('provides a valid HTMLElement instance', () => {
+      const elementRef = createRef<HostInstance>();
       const root = Fantom.createRoot();
 
       Fantom.runTask(() => {
         root.render(<ActivityIndicator ref={elementRef} />);
       });
 
-      expect(elementRef.current).toBeInstanceOf(ReactNativeElement);
+      expect(elementRef.current).toBeInstanceOf(HTMLElement);
     });
 
     it('has the correct tag name', () => {
-      const elementRef =
-        createRef<React.ElementRef<typeof ActivityIndicator>>();
+      const elementRef = createRef<HostInstance>();
       const root = Fantom.createRoot();
 
       Fantom.runTask(() => {
         root.render(<ActivityIndicator ref={elementRef} />);
       });
 
-      const element = ensureInstance(elementRef.current, ReactNativeElement);
+      const element = nullthrows(elementRef.current);
       expect(element.tagName).toBe('RN:AndroidProgressBar');
     });
   });

packages/react-native/Libraries/Components/Pressable/__tests__/Pressable-itest.js

@@ -11,16 +11,16 @@
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
-import type {AccessibilityProps, HostInstance} from 'react-native';
+import type {HostInstance} from 'react-native';
+import type {AccessibilityProps} from 'react-native';
 
 import * as Fantom from '@react-native/fantom';
+import nullthrows from 'nullthrows';
 import * as React from 'react';
 import {createRef} from 'react';
 import {Pressable} from 'react-native';
 import {PlatformColor, Text} from 'react-native';
 import accessibilityPropsSuite from 'react-native/src/private/__tests__/utilities/accessibilityPropsSuite';
-import ensureInstance from 'react-native/src/private/__tests__/utilities/ensureInstance';
-import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
 
 describe('<Pressable>', () => {
   describe('props', () => {
@@ -94,7 +94,7 @@ describe('<Pressable>', () => {
           );
         });
 
-        const element = ensureInstance(elementRef.current, ReactNativeElement);
+        const element = nullthrows(elementRef.current);
         Fantom.dispatchNativeEvent(element, 'click');
 
         expect(onPressCallback).toHaveBeenCalledTimes(1);
@@ -118,7 +118,7 @@ describe('<Pressable>', () => {
           );
         });
 
-        const element = ensureInstance(elementRef.current, ReactNativeElement);
+        const element = nullthrows(elementRef.current);
         Fantom.dispatchNativeEvent(element, 'change', {value: true});
 
         expect(onPressCallback).toHaveBeenCalledTimes(0);
@@ -263,7 +263,7 @@ describe('<Pressable>', () => {
             </Pressable>,
           );
         });
-        const element = ensureInstance(elementRef.current, ReactNativeElement);
+        const element = nullthrows(elementRef.current);
 
         expect(element.childNodes.length).toBe(1);
 
@@ -302,7 +302,7 @@ describe('<Pressable>', () => {
           root.render(<Pressable ref={elementRef} />);
         });
 
-        expect(elementRef.current).toBeInstanceOf(ReactNativeElement);
+        expect(elementRef.current).toBeInstanceOf(HTMLElement);
       });
 
       it('uses the "RN:View" tag name', () => {
@@ -314,7 +314,7 @@ describe('<Pressable>', () => {
           root.render(<Pressable ref={elementRef} />);
         });
 
-        const element = ensureInstance(elementRef.current, ReactNativeElement);
+        const element = nullthrows(elementRef.current);
         // Pressable is implemented with a <View> under the hood
         expect(element.tagName).toBe('RN:View');
       });

packages/react-native/Libraries/Components/ScrollView/__tests__/ScrollView-itest.js

@@ -17,8 +17,6 @@ import nullthrows from 'nullthrows';
 import * as React from 'react';
 import {createRef} from 'react';
 import {ScrollView, Text, View} from 'react-native';
-import ensureInstance from 'react-native/src/private/__tests__/utilities/ensureInstance';
-import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
 
 describe('<ScrollView>', () => {
   describe('rendering', () => {
@@ -93,7 +91,7 @@ describe('<ScrollView>', () => {
         root.render(<ScrollView innerViewRef={ref} />);
       });
 
-      expect(ref.mock.lastCall[0]).toBeInstanceOf(ReactNativeElement);
+      expect(ref.mock.lastCall[0]).toBeInstanceOf(HTMLElement);
 
       Fantom.runTask(() => {
         root.render(<></>);
@@ -111,14 +109,14 @@ describe('<ScrollView>', () => {
         root.render(<ScrollView innerViewRef={refA} />);
       });
 
-      expect(refA.mock.lastCall[0]).toBeInstanceOf(ReactNativeElement);
+      expect(refA.mock.lastCall[0]).toBeInstanceOf(HTMLElement);
 
       Fantom.runTask(() => {
         root.render(<ScrollView innerViewRef={refB} />);
       });
 
       expect(refA.mock.lastCall[0]).toBe(null);
-      expect(refB.mock.lastCall[0]).toBeInstanceOf(ReactNativeElement);
+      expect(refB.mock.lastCall[0]).toBeInstanceOf(HTMLElement);
     });
   });
 
@@ -131,10 +129,7 @@ describe('<ScrollView>', () => {
         root.render(<ScrollView ref={ref} />);
       });
 
-      const innerView = ensureInstance(
-        nullthrows(ref.current).getInnerViewRef(),
-        ReactNativeElement,
-      );
+      const innerView = nullthrows(nullthrows(ref.current).getInnerViewRef());
       expect(innerView.tagName).toBe('RN:View');
     });
   });

packages/react-native/Libraries/Components/Switch/__tests__/Switch-itest.js

@@ -9,14 +9,14 @@
  */
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
 import type {HostInstance} from 'react-native';
 
 import * as Fantom from '@react-native/fantom';
+import nullthrows from 'nullthrows';
 import * as React from 'react';
 import {createRef} from 'react';
 import {Switch} from 'react-native';
-import ensureInstance from 'react-native/src/private/__tests__/utilities/ensureInstance';
-import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
 
 describe('<ExampleComponent>', () => {
   describe('props', () => {
@@ -38,8 +38,8 @@ describe('<ExampleComponent>', () => {
           root.render(<Switch ref={elementRef} />);
         });
 
-        expect(elementRef.current).toBeInstanceOf(ReactNativeElement);
-        const element = ensureInstance(elementRef.current, ReactNativeElement);
+        expect(elementRef.current).toBeInstanceOf(HTMLElement);
+        const element = nullthrows(elementRef.current);
         expect(element.tagName).toBe('RN:Switch');
       });
     });