Remove React Native deep imports from Fantom (#58605)

Summary:
Pull Request resolved: #58605

Use global DOM APIs, supported React Native entry points, and package-relative implementation imports throughout Fantom. Use the renderer-only private interface for the existing public-instance conversion helpers instead of importing Node internals.

Changelog: [Internal]

Reviewed By: cipolleschi

Differential Revision: D120717572

Author: rubennorte

packages/react-native/Libraries/Components/Touchable/__tests__/TouchableOpacity-itest.js

@@ -189,7 +189,7 @@ describe('<TouchableOpacity>', () => {
         });
 
         const element = nullthrows(
-          root.document.documentElement.firstElementChild,
+          nullthrows(root.document.documentElement).firstElementChild,
         );
         expect(element.childNodes.length).toBe(1);
 

packages/react-native/Libraries/Components/Touchable/__tests__/TouchableWithoutFeedback-itest.js

@@ -141,7 +141,9 @@ describe('<TouchableWithoutFeedback>', () => {
         });
 
         expect(
-          nullthrows(root.document.documentElement.firstElementChild).tagName,
+          nullthrows(
+            nullthrows(root.document.documentElement).firstElementChild,
+          ).tagName,
         ).toBe('RN:Paragraph');
 
         Fantom.runTask(() => {
@@ -155,7 +157,9 @@ describe('<TouchableWithoutFeedback>', () => {
         });
 
         expect(
-          nullthrows(root.document.documentElement.firstElementChild).tagName,
+          nullthrows(
+            nullthrows(root.document.documentElement).firstElementChild,
+          ).tagName,
         ).toBe('RN:View');
       });
     });

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

@@ -77,7 +77,7 @@ describe('<Button>', () => {
         // This is necessary because `<Button>` doesn't provide a `<View>` ref
         // but an instance of `Touchable` that isn't a ReactNativeElement.
         const buttonViewNode = nullthrows(
-          root.document.documentElement.firstElementChild,
+          nullthrows(root.document.documentElement).firstElementChild,
         );
 
         Fantom.dispatchNativeEvent(buttonViewNode, 'click', {});
@@ -123,7 +123,7 @@ describe('<Button>', () => {
         // This is necessary because `<Button>` doesn't provide a `<View>` ref
         // but an instance of `Touchable` that isn't a ReactNativeElement.
         const buttonViewNode = nullthrows(
-          root.document.documentElement.firstElementChild,
+          nullthrows(root.document.documentElement).firstElementChild,
         );
 
         Fantom.dispatchNativeEvent(buttonViewNode, 'click', {});
@@ -152,7 +152,7 @@ describe('<Button>', () => {
         // This is necessary because `<Button>` doesn't provide a `<View>` ref
         // but an instance of `Touchable` that isn't a ReactNativeElement.
         const buttonViewNode = nullthrows(
-          root.document.documentElement.firstElementChild,
+          nullthrows(root.document.documentElement).firstElementChild,
         );
 
         Fantom.dispatchNativeEvent(buttonViewNode, 'click', {});
@@ -193,7 +193,7 @@ describe('<Button>', () => {
         // This is necessary because `<Button>` doesn't provide a `<View>` ref
         // but an instance of `Touchable` that isn't a ReactNativeElement.
         const buttonViewNode = nullthrows(
-          root.document.documentElement.firstElementChild,
+          nullthrows(root.document.documentElement).firstElementChild,
         );
 
         Fantom.dispatchNativeEvent(buttonViewNode, 'click', {});
@@ -235,7 +235,7 @@ describe('<Button>', () => {
         // This is necessary because `<Button>` doesn't provide a `<View>` ref
         // but an instance of `Touchable` that isn't a ReactNativeElement.
         const buttonViewNode = nullthrows(
-          root.document.documentElement.firstElementChild,
+          nullthrows(root.document.documentElement).firstElementChild,
         );
 
         Fantom.dispatchNativeEvent(buttonViewNode, 'click', {});

packages/react-native/Libraries/LogBox/__tests__/fantomHelpers.js

@@ -8,9 +8,6 @@
  * @format
  */
 
-import type ReactNativeDocument from '../../../src/private/webapis/dom/nodes/ReactNativeDocument';
-import type ReadOnlyElement from '../../../src/private/webapis/dom/nodes/ReadOnlyElement';
-
 import AppContainer from '../../ReactNative/AppContainer';
 import LogBoxInspectorContainer from '../LogBoxInspectorContainer';
 import * as Fantom from '@react-native/fantom';
@@ -35,7 +32,7 @@ interface NotificationUI {
 }
 
 function findTextByIds(
-  node: ReadOnlyElement,
+  node: Element,
   id: string,
   text: Array<string> = [],
 ): Array<string> {
@@ -52,7 +49,7 @@ function findTextByIds(
 }
 
 // Finds the LogBox notification UI by searching for the text IDs.
-function findLogBoxNotificationUI(doc: ReactNativeDocument): NotificationUI {
+function findLogBoxNotificationUI(doc: Document): NotificationUI {
   return {
     count: doc.getElementById('logbox_notification_count_text')?.textContent,
     message: doc.getElementById('logbox_notification_message_text')
@@ -61,17 +58,18 @@ function findLogBoxNotificationUI(doc: ReactNativeDocument): NotificationUI {
 }
 
 // Finds the LogBox inspector UI by searching for the text IDs.
-function findLogBoxInspectorUI(doc: ReactNativeDocument): InspectorUI {
+function findLogBoxInspectorUI(doc: Document): InspectorUI {
+  const documentElement = nullthrows(doc.documentElement);
   return {
     header: doc.getElementById('logbox_header_title_text')?.textContent,
     title: doc.getElementById('logbox_message_title_text')?.textContent,
     message: doc.getElementById('logbox_message_contents_text')?.textContent,
     // codeFrames: undefined,
     componentStackFrames: findTextByIds(
-      doc.documentElement,
+      documentElement,
       'logbox_component_stack_frame_text',
     ),
-    stackFrames: getStackFrames(doc.documentElement),
+    stackFrames: getStackFrames(documentElement),
     isDismissable:
       doc.getElementById('logbox_dismissable_text')?.textContent == null,
   };
@@ -96,7 +94,7 @@ function findLogBoxInspectorUI(doc: ReactNativeDocument): InspectorUI {
 //   ManualConsoleError
 //
 // If there are no matches, we return all frames, to prevent false negatives.
-function getStackFrames(node: ReadOnlyElement): ?Array<string> {
+function getStackFrames(node: Element): ?Array<string> {
   const text = findTextByIds(node, 'logbox_stack_frame_text');
   const mockConsoleIndex = text.includes('MockConsoleErrorForTesting')
     ? text.indexOf('MockConsoleErrorForTesting') + 1

packages/react-native/src/private/webapis/performance/__tests__/EventTimingAPI-itest.js

@@ -45,7 +45,9 @@ describe('Event Timing API', () => {
       root.render(<View />);
     });
 
-    const element = nullthrows(root.document.documentElement.firstElementChild);
+    const element = nullthrows(
+      nullthrows(root.document.documentElement).firstElementChild,
+    );
 
     expect(callback).not.toHaveBeenCalled();
 
@@ -95,7 +97,9 @@ describe('Event Timing API', () => {
       );
     });
 
-    const element = nullthrows(root.document.documentElement.firstElementChild);
+    const element = nullthrows(
+      nullthrows(root.document.documentElement).firstElementChild,
+    );
 
     expect(callback).not.toHaveBeenCalled();
 
@@ -154,7 +158,9 @@ describe('Event Timing API', () => {
       root.render(<MyComponent />);
     });
 
-    const element = nullthrows(root.document.documentElement.firstElementChild);
+    const element = nullthrows(
+      nullthrows(root.document.documentElement).firstElementChild,
+    );
 
     expect(callback).not.toHaveBeenCalled();
 
@@ -206,7 +212,9 @@ describe('Event Timing API', () => {
       );
     });
 
-    const element = nullthrows(root.document.documentElement.firstElementChild);
+    const element = nullthrows(
+      nullthrows(root.document.documentElement).firstElementChild,
+    );
 
     expect(callback).not.toHaveBeenCalled();
 
@@ -233,7 +241,9 @@ describe('Event Timing API', () => {
       root.render(<View />);
     });
 
-    const element = nullthrows(root.document.documentElement.firstElementChild);
+    const element = nullthrows(
+      nullthrows(root.document.documentElement).firstElementChild,
+    );
 
     expect(performance.eventCounts).not.toBeInstanceOf(Map);
 
@@ -328,7 +338,7 @@ describe('Event Timing API', () => {
       });
 
       const element = nullthrows(
-        root.document.documentElement.firstElementChild,
+        nullthrows(root.document.documentElement).firstElementChild,
       );
 
       expect(callback).not.toHaveBeenCalled();
@@ -374,7 +384,7 @@ describe('Event Timing API', () => {
       });
 
       const element = nullthrows(
-        root.document.documentElement.firstElementChild,
+        nullthrows(root.document.documentElement).firstElementChild,
       );
 
       expect(callback).not.toHaveBeenCalled();

private/react-native-fantom/__docs__/README.md

@@ -197,14 +197,13 @@ hi
 - Benchmark tests use the `-benchmark-itest.js` suffix.
 - Use `Fantom.runTask()` to render and run synchronous operations; it ensures
   the React work is flushed before assertions.
-- Access elements through refs and use the
-  [`ensureInstance`](../../../packages/react-native/src/private/__tests__/utilities/ensureInstance.js)
-  helper for type-safe access to the underlying instance:
+- Access elements through refs and use `nullthrows` for type-safe access to the
+  underlying instance:
 
   ```javascript
-  import ensureInstance from 'react-native/src/private/__tests__/utilities/ensureInstance';
+  import nullthrows from 'nullthrows';
 
-  const element = ensureInstance(elementRef.current, ReactNativeElement);
+  const element = nullthrows(elementRef.current);
   ```
 
 - Prefer component-specific instance types (`TextInputInstance`,
@@ -622,7 +621,7 @@ the test in the suite depending on the flag value for that run. E.g.:
  * @fantom_flags commonTestFlag:*
  */
 
-import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
+import {ReactNativeFeatureFlags} from 'react-native/react-private-interface';
 
 // The entire suite will be run with commonTestFlag set to true and false.
 describe('MyTest', () => {

private/react-native-fantom/runtime/repl-setup.js

@@ -364,7 +364,7 @@ function reportJSON(message: interface {}): void {
   }
   // Force the import of the native module to be lazy.
   const NativeFantom =
-    require('react-native/src/private/testing/fantom/specs/NativeFantom').default;
+    require('../../../packages/react-native/src/private/testing/fantom/specs/NativeFantom').default;
   NativeFantom.reportTestSuiteResultsJSON(json);
 }
 

private/react-native-fantom/runtime/setup.js

@@ -400,7 +400,7 @@ function runSuite(suite: Suite): TestCaseResult[] {
 function reportTestSuiteResult(testSuiteResult: TestSuiteResult): void {
   // Force the import of the native module to be lazy
   const NativeFantom =
-    require('react-native/src/private/testing/fantom/specs/NativeFantom').default;
+    require('../../../packages/react-native/src/private/testing/fantom/specs/NativeFantom').default;
 
   NativeFantom.reportTestSuiteResultsJSON(
     JSON.stringify({
@@ -413,14 +413,14 @@ function reportTestSuiteResult(testSuiteResult: TestSuiteResult): void {
 export function reportBenchmarkResult(result: BenchmarkResult): void {
   // Force the import of the native module to be lazy
   const NativeFantom =
-    require('react-native/src/private/testing/fantom/specs/NativeFantom').default;
+    require('../../../packages/react-native/src/private/testing/fantom/specs/NativeFantom').default;
   NativeFantom.reportTestSuiteResultsJSON(JSON.stringify(result));
 }
 
 function validateEmptyMessageQueue(): void {
   // Force the import of the native module to be lazy
   const NativeFantom =
-    require('react-native/src/private/testing/fantom/specs/NativeFantom').default;
+    require('../../../packages/react-native/src/private/testing/fantom/specs/NativeFantom').default;
 
   NativeFantom.validateEmptyMessageQueue();
 }
@@ -444,7 +444,7 @@ function runTest(): Array<TestCaseResult> {
 
   // Force the import of the native module to be lazy
   const NativeFantom =
-    require('react-native/src/private/testing/fantom/specs/NativeFantom').default;
+    require('../../../packages/react-native/src/private/testing/fantom/specs/NativeFantom').default;
 
   try {
     NativeFantom.startJSSamplingProfiler();

private/react-native-fantom/src/Benchmark.js

@@ -8,10 +8,10 @@
  * @format
  */
 
+import NativeCPUTime from '../../../packages/react-native/src/private/testing/fantom/specs/NativeCPUTime';
 import {reportBenchmarkResult} from '../runtime/setup';
 import {getConstants} from './index';
 import nullthrows from 'nullthrows';
-import NativeCPUTime from 'react-native/src/private/testing/fantom/specs/NativeCPUTime';
 import {
   Bench,
   type BenchOptions,

private/react-native-fantom/src/HighResTimeStampMock.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import NativeFantom from 'react-native/src/private/testing/fantom/specs/NativeFantom';
+import NativeFantom from '../../../packages/react-native/src/private/testing/fantom/specs/NativeFantom';
 
 /**
  * Represents a mocked clock for `HighResTimeStamp` values.