Create @react-native/fantom package (#48125)

Summary:
Pull Request resolved: #48125

Changelog: [internal]

This just moves the runtime modules for Fantom to its own package.

Reviewed By: javache

Differential Revision: D66825478

fbshipit-source-id: ac4dbc23b86895f09abc46345d497c1c53737ae2

Author: rubennorte

jest/integration/config/jest.config.js

@@ -16,6 +16,7 @@ module.exports = {
   rootDir: path.resolve(__dirname, '../../..'),
   roots: [
     '<rootDir>/packages/react-native',
+    '<rootDir>/packages/react-native-fantom',
     '<rootDir>/jest/integration/runtime',
   ],
   moduleFileExtensions: [...baseConfig.moduleFileExtensions, 'cpp', 'h'],

packages/react-native-fantom/package.json

@@ -0,0 +1,10 @@
+{
+   "name": "@react-native/fantom",
+   "private": true,
+   "version": "0.77.0-main",
+   "main": "src/index.js",
+   "description": "Internal integration testing and benchmarking tool for React Native",
+   "peerDependencies":{
+      "jest":"^29.7.0"
+   }
+}

packages/react-native/src/private/__tests__/FantomRenderedOutput.js renamed to packages/react-native-fantom/src/FantomRenderedOutput.js

@@ -10,7 +10,7 @@
  * @fantom_flags commonTestFlag:true jsOnlyTestFlag:true
  */
 
-import * as ReactNativeFeatureFlags from '../featureflags/ReactNativeFeatureFlags';
+import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
 
 describe('FantomFeatureFlags', () => {
   it('allows overridding common feature flags', () => {

packages/react-native/src/private/__tests__/FantomFeatureFlags-itest.js renamed to packages/react-native-fantom/src/__tests__/FantomFeatureFlags-itest.js

@@ -9,8 +9,8 @@
  * @oncall react_native
  */
 
-import '../../../Libraries/Core/InitializeCore';
-import * as ReactNativeTester from './ReactNativeTester';
+import 'react-native/Libraries/Core/InitializeCore';
+import * as ReactNativeTester from '..';
 
 describe('ReactNativeTester', () => {
   describe('runTask', () => {

packages/react-native/src/private/__tests__/ReactNativeTester-itest.js renamed to packages/react-native-fantom/src/__tests__/ReactNativeTester-itest.js

@@ -14,8 +14,8 @@ import type {
 } from './FantomRenderedOutput';
 import type {MixedElement} from 'react';
 
-import ReactFabric from '../../../Libraries/Renderer/shims/ReactFabric';
 import getFantomRenderedOutput from './FantomRenderedOutput';
+import ReactFabric from 'react-native/Libraries/Renderer/shims/ReactFabric';
 
 let globalSurfaceIdCounter = 1;
 

packages/react-native/src/private/__tests__/expect-itest.js renamed to packages/react-native-fantom/src/__tests__/expect-itest.js

@@ -11,16 +11,16 @@
  */
 
 import '../../../Core/InitializeCore.js';
-import * as ReactNativeTester from '../../../../src/private/__tests__/ReactNativeTester';
 import TextInput from '../TextInput';
+import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
 import {useEffect, useLayoutEffect, useRef} from 'react';
 
 describe('TextInput', () => {
   it('creates view before dispatching view command from ref function', () => {
-    const root = ReactNativeTester.createRoot();
+    const root = Fantom.createRoot();
 
-    ReactNativeTester.runTask(() => {
+    Fantom.runTask(() => {
       root.render(
         <TextInput
           ref={node => {
@@ -42,7 +42,7 @@ describe('TextInput', () => {
   });
 
   it('creates view before dispatching view command from useLayoutEffect', () => {
-    const root = ReactNativeTester.createRoot();
+    const root = Fantom.createRoot();
 
     function Component() {
       const textInputRef = useRef<null | React.ElementRef<typeof TextInput>>(
@@ -55,7 +55,7 @@ describe('TextInput', () => {
 
       return <TextInput ref={textInputRef} />;
     }
-    ReactNativeTester.runTask(() => {
+    Fantom.runTask(() => {
       root.render(<Component />);
     });
 
@@ -69,7 +69,7 @@ describe('TextInput', () => {
   });
 
   it('creates view before dispatching view command from useEffect', () => {
-    const root = ReactNativeTester.createRoot();
+    const root = Fantom.createRoot();
 
     function Component() {
       const textInputRef = useRef<null | React.ElementRef<typeof TextInput>>(
@@ -82,7 +82,7 @@ describe('TextInput', () => {
 
       return <TextInput ref={textInputRef} />;
     }
-    ReactNativeTester.runTask(() => {
+    Fantom.runTask(() => {
       root.render(<Component />);
     });
 

packages/react-native/src/private/__tests__/ReactNativeTester.js renamed to packages/react-native-fantom/src/index.js

@@ -11,11 +11,11 @@
 
 import '../../../Core/InitializeCore.js';
 
-import * as ReactNativeTester from '../../../../src/private/__tests__/ReactNativeTester';
 import ReactNativeElement from '../../../../src/private/webapis/dom/nodes/ReactNativeElement';
 import TextInputState from '../../../Components/TextInput/TextInputState';
 import View from '../../../Components/View/View';
 import ReactFabricHostComponent from '../ReactFabricHostComponent';
+import * as Fantom from '@react-native/fantom';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
 
@@ -25,8 +25,8 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
     it('should provide instances of the right class as refs in host components', () => {
       let node;
 
-      const root = ReactNativeTester.createRoot();
-      ReactNativeTester.runTask(() => {
+      const root = Fantom.createRoot();
+      Fantom.runTask(() => {
         root.render(
           <View
             ref={receivedNode => {
@@ -43,11 +43,11 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
 
     describe('blur', () => {
       test('blur() invokes TextInputState', () => {
-        const root = ReactNativeTester.createRoot();
+        const root = Fantom.createRoot();
 
         let maybeNode;
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           root.render(
             <View
               ref={node => {
@@ -64,7 +64,7 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
         // We don't support view commands in Fantom yet, so we have to mock this.
         TextInputState.blurTextInput = blurTextInput;
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           node.blur();
         });
 
@@ -75,11 +75,11 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
 
     describe('focus', () => {
       test('focus() invokes TextInputState', () => {
-        const root = ReactNativeTester.createRoot();
+        const root = Fantom.createRoot();
 
         let maybeNode;
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           root.render(
             <View
               ref={node => {
@@ -96,7 +96,7 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
         // We don't support view commands in Fantom yet, so we have to mock this.
         TextInputState.focusTextInput = focusTextInput;
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           node.focus();
         });
 
@@ -107,11 +107,11 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
 
     describe('measure', () => {
       it('component.measure(...) invokes callback', () => {
-        const root = ReactNativeTester.createRoot();
+        const root = Fantom.createRoot();
 
         let maybeNode;
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           root.render(
             <View
               style={{width: 100, height: 100, left: 10, top: 10}}
@@ -132,11 +132,11 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
       });
 
       it('unmounted.measure(...) does nothing', () => {
-        const root = ReactNativeTester.createRoot();
+        const root = Fantom.createRoot();
 
         let maybeNode;
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           root.render(
             <View
               style={{width: 100, height: 100, left: 10, top: 10}}
@@ -149,7 +149,7 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
 
         const node = nullthrows(maybeNode);
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           root.render(<></>);
         });
 
@@ -162,11 +162,11 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
 
     describe('measureInWindow', () => {
       it('component.measureInWindow(...) invokes callback', () => {
-        const root = ReactNativeTester.createRoot();
+        const root = Fantom.createRoot();
 
         let maybeNode;
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           root.render(
             <View
               style={{width: 100, height: 100, left: 10, top: 10}}
@@ -187,11 +187,11 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
       });
 
       it('unmounted.measureInWindow(...) does nothing', () => {
-        const root = ReactNativeTester.createRoot();
+        const root = Fantom.createRoot();
 
         let maybeNode;
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           root.render(
             <View
               style={{width: 100, height: 100, left: 10, top: 10}}
@@ -204,7 +204,7 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
 
         const node = nullthrows(maybeNode);
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           root.render(<></>);
         });
 
@@ -217,12 +217,12 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
 
     describe('measureLayout', () => {
       it('component.measureLayout(component, ...) invokes callback', () => {
-        const root = ReactNativeTester.createRoot();
+        const root = Fantom.createRoot();
 
         let maybeParentNode;
         let maybeChildNode;
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           root.render(
             <View
               style={{width: 100, height: 100, left: 10, top: 10}}
@@ -250,12 +250,12 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
       });
 
       it('unmounted.measureLayout(component, ...) does nothing', () => {
-        const root = ReactNativeTester.createRoot();
+        const root = Fantom.createRoot();
 
         let maybeParentNode;
         let maybeChildNode;
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           root.render(
             <View
               style={{width: 100, height: 100, left: 10, top: 10}}
@@ -275,7 +275,7 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
         const parentNode = nullthrows(maybeParentNode);
         const childNode = nullthrows(maybeChildNode);
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           root.render(
             <View style={{width: 100, height: 100, left: 10, top: 10}} />,
           );
@@ -288,12 +288,12 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
       });
 
       it('component.measureLayout(unmounted, ...) does nothing', () => {
-        const root = ReactNativeTester.createRoot();
+        const root = Fantom.createRoot();
 
         let maybeParentNode;
         let maybeChildNode;
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           root.render(
             <View
               style={{width: 100, height: 100, left: 10, top: 10}}
@@ -313,7 +313,7 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
         const parentNode = nullthrows(maybeParentNode);
         const childNode = nullthrows(maybeChildNode);
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           root.render(
             <View style={{width: 100, height: 100, left: 10, top: 10}} />,
           );
@@ -326,12 +326,12 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
       });
 
       it('unmounted.measureLayout(unmounted, ...) does nothing', () => {
-        const root = ReactNativeTester.createRoot();
+        const root = Fantom.createRoot();
 
         let maybeParentNode;
         let maybeChildNode;
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           root.render(
             <View
               style={{width: 100, height: 100, left: 10, top: 10}}
@@ -351,7 +351,7 @@ export default function setUpTests({isModern}: {isModern: boolean}) {
         const parentNode = nullthrows(maybeParentNode);
         const childNode = nullthrows(maybeChildNode);
 
-        ReactNativeTester.runTask(() => {
+        Fantom.runTask(() => {
           root.render(<></>);
         });