@office-iss/react-native-win32 0.74.4 → 0.75.0-preview.2

package/Libraries/Utilities/HMRClient.js

@@ -26,6 +26,7 @@ let hmrUnavailableReason: string | null = null;
 let currentCompileErrorMessage: string | null = null;
 let didConnect: boolean = false;
 let pendingLogs: Array<[LogLevel, $ReadOnlyArray<mixed>]> = [];
+let pendingFuseboxConsoleNotification = false;
 
 type LogLevel =
   | 'trace'
@@ -51,6 +52,7 @@ export type HMRClientNativeInterface = {|
     isEnabled: boolean,
     scheme?: string,
   ): void,
+  unstable_notifyFuseboxConsoleEnabled(): void,
 |};
 
 /**
@@ -68,7 +70,7 @@ const HMRClient: HMRClientNativeInterface = {
     }
 
     invariant(hmrClient, 'Expected HMRClient.setup() call at startup.');
-    const LoadingView = require('./LoadingView');
+    const DevLoadingView = require('./DevLoadingView');
 
     // We use this for internal logging only.
     // It doesn't affect the logic.
@@ -79,13 +81,13 @@ const HMRClient: HMRClientNativeInterface = {
     const hasUpdates = hmrClient.hasPendingUpdates();
 
     if (hasUpdates) {
-      LoadingView.showMessage('Refreshing...', 'refresh');
+      DevLoadingView.showMessage('Refreshing...', 'refresh');
     }
     try {
       hmrClient.enable();
     } finally {
       if (hasUpdates) {
-        LoadingView.hide();
+        DevLoadingView.hide();
       }
     }
 
@@ -140,6 +142,29 @@ const HMRClient: HMRClientNativeInterface = {
     }
   },
 
+  unstable_notifyFuseboxConsoleEnabled() {
+    if (!hmrClient) {
+      pendingFuseboxConsoleNotification = true;
+      return;
+    }
+    hmrClient.send(
+      JSON.stringify({
+        type: 'log',
+        level: 'info',
+        data: [
+          '\n' +
+            '\x1b[7m' +
+            ' \x1b[1mJavaScript logs have moved!\x1b[22m They will now appear in the debugger console. ' +
+            'Tip: Type \x1b[1mj\x1b[22m in the terminal to open the debugger (requires Google Chrome ' +
+            'or Microsoft Edge).' +
+            '\x1b[27m' +
+            '\n',
+        ],
+      }),
+    );
+    pendingFuseboxConsoleNotification = false;
+  },
+
   // Called once by the bridge on startup, even if Fast Refresh is off.
   // It creates the HMR client but doesn't actually set up the socket yet.
   setup(
@@ -156,7 +181,7 @@ const HMRClient: HMRClientNativeInterface = {
     invariant(!hmrClient, 'Cannot initialize hmrClient twice');
 
     // Moving to top gives errors due to NativeModules not being initialized
-    const LoadingView = require('./LoadingView');
+    const DevLoadingView = require('./DevLoadingView');
 
     const serverHost = port !== null && port !== '' ? `${host}:${port}` : host;
 
@@ -205,7 +230,7 @@ Error: ${e.message}`;
       didConnect = true;
 
       if (client.isEnabled() && !isInitialUpdate) {
-        LoadingView.showMessage('Refreshing...', 'refresh');
+        DevLoadingView.showMessage('Refreshing...', 'refresh');
       }
     });
 
@@ -217,11 +242,11 @@ Error: ${e.message}`;
     });
 
     client.on('update-done', () => {
-      LoadingView.hide();
+      DevLoadingView.hide();
     });
 
     client.on('error', data => {
-      LoadingView.hide();
+      DevLoadingView.hide();
 
       if (data.type === 'GraphNotFoundError') {
         client.close();
@@ -242,7 +267,7 @@ Error: ${e.message}`;
     });
 
     client.on('close', closeEvent => {
-      LoadingView.hide();
+      DevLoadingView.hide();
 
       // https://www.rfc-editor.org/rfc/rfc6455.html#section-7.4.1
       // https://www.rfc-editor.org/rfc/rfc6455.html#section-7.1.5
@@ -316,6 +341,9 @@ function flushEarlyLogs(client: MetroHMRClient) {
     pendingLogs.forEach(([level, data]) => {
       HMRClient.log(level, data);
     });
+    if (pendingFuseboxConsoleNotification) {
+      HMRClient.unstable_notifyFuseboxConsoleEnabled();
+    }
   } finally {
     pendingLogs.length = 0;
   }

package/Libraries/Utilities/HMRClientProdShim.js

@@ -25,6 +25,7 @@ const HMRClientProdShim: HMRClientNativeInterface = {
   disable() {},
   registerBundle() {},
   log() {},
+  unstable_notifyFuseboxConsoleEnabled() {},
 };
 
 module.exports = HMRClientProdShim;

package/Libraries/Utilities/Platform.android.js

@@ -31,7 +31,7 @@ const Platform: PlatformType = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?number,
+      prerelease: ?string,
     |},
     Version: number,
     Release: string,
@@ -78,10 +78,10 @@ const Platform: PlatformType = {
       ? // $FlowFixMe[incompatible-return]
         spec.android
       : 'native' in spec
-      ? // $FlowFixMe[incompatible-return]
-        spec.native
-      : // $FlowFixMe[incompatible-return]
-        spec.default,
+        ? // $FlowFixMe[incompatible-return]
+          spec.native
+        : // $FlowFixMe[incompatible-return]
+          spec.default,
 };
 
 module.exports = Platform;

package/Libraries/Utilities/Platform.d.ts

@@ -24,7 +24,7 @@ type PlatformConstants = {
     major: number;
     minor: number;
     patch: number;
-    prerelease?: number | null | undefined;
+    prerelease?: string | null | undefined;
   };
 };
 interface PlatformStatic {

package/Libraries/Utilities/Platform.flow.js

@@ -32,7 +32,7 @@ type IOSPlatform = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?number,
+      prerelease: ?string,
     |},
     systemName: string,
     isMacCatalyst?: boolean,
@@ -65,7 +65,7 @@ type AndroidPlatform = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?number,
+      prerelease: ?string,
     |},
     Version: number,
     Release: string,

package/Libraries/Utilities/Platform.flow.win32.js

@@ -34,7 +34,7 @@ type IOSPlatform = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?string | number,
+      prerelease: ?string,
     |},
     isMacCatalyst?: boolean,
   |},
@@ -66,7 +66,7 @@ type AndroidPlatform = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?number,
+      prerelease: ?string,
     |},
     Version: number,
     Release: string,
@@ -105,7 +105,7 @@ type Win32Platform = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?string | number,
+      prerelease: ?string,
     |},
     systemName: string,
     isMacCatalyst?: boolean,

package/Libraries/Utilities/Platform.ios.js

@@ -34,7 +34,7 @@ const Platform: PlatformType = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?number,
+      prerelease: ?string,
     |},
     systemName: string,
     isMacCatalyst?: boolean,

package/Libraries/Utilities/Platform.win32.js

@@ -32,7 +32,7 @@ const Platform: PlatformType = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?string | number,
+      prerelease: ?string,
     |},
     systemName: string,
     isMacCatalyst?: boolean,

package/Libraries/Utilities/RCTLog.js

@@ -38,6 +38,7 @@ const RCTLog = {
 
   // Log to console regardless of nativeLoggingHook
   logToConsole(level: string, ...args: Array<mixed>): void {
+    // $FlowFixMe[invalid-computed-prop]
     const logFn = levelsMap[level];
     invariant(
       logFn,

package/Libraries/Utilities/ReactNativeTestTools.js

@@ -12,20 +12,16 @@
 
 import type {ReactTestRenderer as ReactTestRendererType} from 'react-test-renderer';
 
+import TouchableWithoutFeedback from '../Components/Touchable/TouchableWithoutFeedback';
+
 const Switch = require('../Components/Switch/Switch').default;
 const TextInput = require('../Components/TextInput/TextInput');
 const View = require('../Components/View/View');
 const Text = require('../Text/Text');
 const {VirtualizedList} = require('@react-native/virtualized-lists');
 const React = require('react');
-const ShallowRenderer = require('react-shallow-renderer');
 const ReactTestRenderer = require('react-test-renderer');
 
-/* $FlowFixMe[not-a-function] (>=0.125.1 site=react_native_fb) This comment
- * suppresses an error found when Flow v0.125.1 was deployed. To see the error,
- * delete this comment and run Flow. */
-// $FlowFixMe[invalid-constructor]
-const shallowRenderer = new ShallowRenderer();
 export type ReactTestInstance = $PropertyType<ReactTestRendererType, 'root'>;
 export type Predicate = (node: ReactTestInstance) => boolean;
 /* $FlowFixMe[value-as-type] (>=0.125.1 site=react_native_fb) This comment
@@ -49,6 +45,9 @@ function byClickable(): Predicate {
       (node.type === Switch && node.props && node.props.disabled !== true) ||
       (node.type === View &&
         node?.props?.onStartShouldSetResponder?.testOnly_pressabilityConfig) ||
+      (node.type === TouchableWithoutFeedback &&
+        node.props &&
+        typeof node.props.onPress === 'function') ||
       // HACK: Find components that use `Pressability`.
       node.instance?.state?.pressability != null ||
       // TODO: Remove this after deleting `Touchable`.
@@ -114,7 +113,7 @@ function expectNoConsoleError() {
   });
 }
 
-function expectRendersMatchingSnapshot(
+async function expectRendersMatchingSnapshot(
   name: string,
   ComponentProvider: () => React.Element<any>,
   unmockComponent: () => mixed,
@@ -123,7 +122,9 @@ function expectRendersMatchingSnapshot(
 
   jest.resetAllMocks();
 
-  instance = ReactTestRenderer.create(<ComponentProvider />);
+  await ReactTestRenderer.act(() => {
+    instance = ReactTestRenderer.create(<ComponentProvider />);
+  });
   expect(instance).toMatchSnapshot(
     'should deep render when mocked (please verify output manually)',
   );
@@ -131,22 +132,9 @@ function expectRendersMatchingSnapshot(
   jest.resetAllMocks();
   unmockComponent();
 
-  instance = shallowRenderer.render(<ComponentProvider />);
-  expect(instance).toMatchSnapshot(
-    `should shallow render as <${name} /> when not mocked`,
-  );
-
-  jest.resetAllMocks();
-
-  instance = shallowRenderer.render(<ComponentProvider />);
-  expect(instance).toMatchSnapshot(
-    `should shallow render as <${name} /> when mocked`,
-  );
-
-  jest.resetAllMocks();
-  unmockComponent();
-
-  instance = ReactTestRenderer.create(<ComponentProvider />);
+  await ReactTestRenderer.act(() => {
+    instance = ReactTestRenderer.create(<ComponentProvider />);
+  });
   expect(instance).toMatchSnapshot(
     'should deep render when not mocked (please verify output manually)',
   );

package/Libraries/Utilities/verifyComponentAttributeEquivalence.js

@@ -104,16 +104,21 @@ export function getConfigWithoutViewProps(
   viewConfig: ViewConfig,
   propName: string,
 ): {...} {
+  // $FlowFixMe[invalid-computed-prop]
   if (!viewConfig[propName]) {
     return {};
   }
 
-  return Object.keys(viewConfig[propName])
-    .filter(prop => !PlatformBaseViewConfig[propName][prop])
-    .reduce<{[string]: any}>((obj, prop) => {
-      obj[prop] = viewConfig[propName][prop];
-      return obj;
-    }, {});
+  return (
+    Object.keys(viewConfig[propName])
+      // $FlowFixMe[invalid-computed-prop]
+      .filter(prop => !PlatformBaseViewConfig[propName][prop])
+      .reduce<{[string]: any}>((obj, prop) => {
+        // $FlowFixMe[invalid-computed-prop]
+        obj[prop] = viewConfig[propName][prop];
+        return obj;
+      }, {})
+  );
 }
 
 export function stringifyViewConfig(viewConfig: any): string {

package/Libraries/__tests__/ButtonWin32-test.js

@@ -2,15 +2,16 @@
 'use strict';
 
 const React = require('react');
-const ReactTestRenderer = require('react-test-renderer');
+const renderer = require('react-native/jest/renderer');
 
 const {ButtonWin32} = require('@office-iss/react-native-win32');
 
 describe('ButtonWin32', () => {
-  it('renders native component', () => {
-    const component = ReactTestRenderer.create(
-      <ButtonWin32/>
-    );
-    expect(component).toMatchSnapshot();
+  it('renders native component', async () => {
+    expect(
+      await renderer.create(
+        <ButtonWin32/>,
+      ),
+    ).toMatchSnapshot();
   });
 });

package/Libraries/promiseRejectionTrackingOptions.js

@@ -52,6 +52,7 @@ let rejectionTrackingOptions: $NonMaybeType<Parameters<enable>[0]> = {
           substitutions: [],
         },
         componentStack: [],
+        componentStackType: null,
         stack,
         category: 'possible_unhandled_promise_rejection',
       });

package/jest/mockComponent.js

@@ -50,6 +50,13 @@ module.exports = (moduleName, instanceMethods, isESModule) => {
     }
   };
 
+  Object.defineProperty(Component, 'name', {
+    value: name,
+    writable: false,
+    enumerable: false,
+    configurable: true,
+  });
+
   Component.displayName = nameWithoutPrefix;
 
   Object.keys(RealComponent).forEach(classStatic => {

package/jest/renderer.js

@@ -9,22 +9,33 @@
  * @oncall react_native
  */
 
+import type {ReactTestRenderer} from 'react-test-renderer';
+
+import nullthrows from 'nullthrows';
 import * as React from 'react';
-import ShallowRenderer from 'react-shallow-renderer';
 import TestRenderer from 'react-test-renderer';
 
-const renderer = new ShallowRenderer();
-
-export const shallow = (Component: React.Element<any>): any => {
-  const Wrapper = (): React.Element<any> => Component;
-
-  return renderer.render(<Wrapper />);
-};
+export async function create(
+  Component: React.Element<any>,
+): Promise<ReactTestRenderer> {
+  let component;
+  await TestRenderer.act(async () => {
+    component = TestRenderer.create(Component);
+  });
+  return nullthrows(component);
+}
 
-export const shallowRender = (Component: React.Element<any>): any => {
-  return renderer.render(Component);
-};
+export async function unmount(testRenderer: ReactTestRenderer) {
+  await TestRenderer.act(async () => {
+    testRenderer.unmount();
+  });
+}
 
-export const create = (Component: React.Element<any>): any => {
-  return TestRenderer.create(Component);
-};
+export async function update(
+  testRenderer: ReactTestRenderer,
+  element: React.Element<any>,
+) {
+  await TestRenderer.act(async () => {
+    testRenderer.update(element);
+  });
+}

package/jest/setup.js

@@ -9,6 +9,11 @@
 
 'use strict';
 
+global.IS_REACT_ACT_ENVIRONMENT = true;
+// Suppress the `react-test-renderer` warnings until New Architecture and legacy
+// mode are no longer supported by React Native.
+global.IS_REACT_NATIVE_TEST_ENVIRONMENT = true;
+
 const MockNativeMethods = jest.requireActual('./MockNativeMethods');
 const mockComponent = jest.requireActual('./mockComponent');
 
@@ -112,17 +117,9 @@ jest
       Constants: {},
     },
   }))
-  .mock('../Libraries/Image/Image', () => {
-    const Image = mockComponent('../Libraries/Image/Image');
-    Image.getSize = jest.fn();
-    Image.getSizeWithHeaders = jest.fn();
-    Image.prefetch = jest.fn();
-    Image.prefetchWithMetadata = jest.fn();
-    Image.queryCache = jest.fn();
-    Image.resolveAssetSource = jest.fn();
-
-    return Image;
-  })
+  .mock('../Libraries/Image/Image', () =>
+    mockComponent('../Libraries/Image/Image'),
+  )
   .mock('../Libraries/Text/Text', () =>
     mockComponent('../Libraries/Text/Text', MockNativeMethods),
   )
@@ -145,7 +142,9 @@ jest
   .mock('../Libraries/Components/AccessibilityInfo/AccessibilityInfo', () => ({
     __esModule: true,
     default: {
-      addEventListener: jest.fn(),
+      addEventListener: jest.fn(() => ({
+        remove: jest.fn(),
+      })),
       announceForAccessibility: jest.fn(),
       isAccessibilityServiceEnabled: jest.fn(),
       isBoldTextEnabled: jest.fn(),
@@ -208,7 +207,9 @@ jest
     openURL: jest.fn(),
     canOpenURL: jest.fn(() => Promise.resolve(true)),
     openSettings: jest.fn(),
-    addEventListener: jest.fn(),
+    addEventListener: jest.fn(() => ({
+      remove: jest.fn(),
+    })),
     getInitialURL: jest.fn(() => Promise.resolve()),
     sendIntent: jest.fn(),
   }))
@@ -261,7 +262,12 @@ jest
     },
     ImageLoader: {
       getSize: jest.fn(url => Promise.resolve([320, 240])),
+      getSizeWithHeaders: jest.fn((url, headers) =>
+        Promise.resolve({height: 222, width: 333}),
+      ),
       prefetchImage: jest.fn(),
+      prefetchImageWithMetadata: jest.fn(),
+      queryCache: jest.fn(),
     },
     ImageViewManager: {
       getSize: jest.fn((uri, success) =>

package/jest.config.js

@@ -1,4 +1,5 @@
-module.exports = require('@rnx-kit/jest-preset')("win32", {
+module.exports = ("win32", {
+  preset: '@rnx-kit/jest-preset',
   verbose: true,
   snapshotResolver: './jest-snapshot-resolver.js',
   transform: {