[No QA][TS migration] Migrate multiple unit and Performance test to Typescript

src/components/DragAndDrop/Provider/types.ts

@@ -8,7 +8,7 @@ type DragAndDropProviderProps = {
     isDisabled?: boolean;
 
     /** Indicate that users are dragging file or not */
-    setIsDraggingOver: (value: boolean) => void;
+    setIsDraggingOver?: (value: boolean) => void;
 };
 
 type SetOnDropHandlerCallback = (event: DragEvent) => void;

src/libs/actions/EmojiPickerAction.ts

@@ -112,4 +112,4 @@ function resetEmojiPopoverAnchor() {
 }
 
 export {emojiPickerRef, showEmojiPicker, hideEmojiPicker, isActive, clearActive, isEmojiPickerVisible, resetEmojiPopoverAnchor};
-export type {AnchorOrigin};
+export type {AnchorOrigin, EmojiPickerRef};

tests/perf-test/ReportActionCompose.perf-test.js → tests/perf-test/ReportActionCompose.perf-test.tsx

@@ -1,25 +1,34 @@
 import {fireEvent, screen} from '@testing-library/react-native';
+import type {ComponentType} from 'react';
 import React from 'react';
 import Onyx from 'react-native-onyx';
+import type Animated from 'react-native-reanimated';
 import {measurePerformance} from 'reassure';
-import ComposeProviders from '../../src/components/ComposeProviders';
-import {LocaleContextProvider} from '../../src/components/LocaleContextProvider';
-import OnyxProvider from '../../src/components/OnyxProvider';
-import {KeyboardStateProvider} from '../../src/components/withKeyboardState';
-import {WindowDimensionsProvider} from '../../src/components/withWindowDimensions';
-import * as Localize from '../../src/libs/Localize';
-import ONYXKEYS from '../../src/ONYXKEYS';
-import ReportActionCompose from '../../src/pages/home/report/ReportActionCompose/ReportActionCompose';
+import type {WithNavigationFocusProps} from '@components/withNavigationFocus';
+import type {EmojiPickerRef} from '@libs/actions/EmojiPickerAction';
+import type Navigation from '@libs/Navigation/Navigation';
+import ComposeProviders from '@src/components/ComposeProviders';
+import {LocaleContextProvider} from '@src/components/LocaleContextProvider';
+import OnyxProvider from '@src/components/OnyxProvider';
+import {KeyboardStateProvider} from '@src/components/withKeyboardState';
+import {WindowDimensionsProvider} from '@src/components/withWindowDimensions';
+import * as Localize from '@src/libs/Localize';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ReportActionCompose from '@src/pages/home/report/ReportActionCompose/ReportActionCompose';
 import * as LHNTestUtils from '../utils/LHNTestUtils';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 
 // mock PortalStateContext
 jest.mock('@gorhom/portal');
 
-jest.mock('react-native-reanimated', () => ({
-    ...jest.requireActual('react-native-reanimated/mock'),
-    useAnimatedRef: jest.fn,
-}));
+jest.mock(
+    'react-native-reanimated',
+    () =>
+        ({
+            ...jest.requireActual('react-native-reanimated/mock'),
+            useAnimatedRef: jest.fn(),
+        } as typeof Animated),
+);
 
 jest.mock('@react-navigation/native', () => {
     const actualNav = jest.requireActual('@react-navigation/native');
@@ -32,11 +41,11 @@ jest.mock('@react-navigation/native', () => {
         useIsFocused: () => ({
             navigate: jest.fn(),
         }),
-    };
+    } as typeof Navigation;
 });
 
-jest.mock('../../src/libs/actions/EmojiPickerAction', () => {
-    const actualEmojiPickerAction = jest.requireActual('../../src/libs/actions/EmojiPickerAction');
+jest.mock('@src/libs/actions/EmojiPickerAction', () => {
+    const actualEmojiPickerAction = jest.requireActual('@src/libs/actions/EmojiPickerAction');
     return {
         ...actualEmojiPickerAction,
         emojiPickerRef: {
@@ -47,15 +56,15 @@ jest.mock('../../src/libs/actions/EmojiPickerAction', () => {
         showEmojiPicker: jest.fn(),
         hideEmojiPicker: jest.fn(),
         isActive: () => true,
-    };
+    } as EmojiPickerRef;
 });
 
-jest.mock('../../src/components/withNavigationFocus', () => (Component) => {
-    function WithNavigationFocus(props) {
+jest.mock('@src/components/withNavigationFocus', <TProps extends WithNavigationFocusProps>() => (Component: ComponentType<TProps>) => {
+    function WithNavigationFocus(props: Omit<TProps, keyof WithNavigationFocusProps>) {
         return (
             <Component
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
+                {...(props as TProps)}
                 isFocused={false}
             />
         );
@@ -70,7 +79,6 @@ beforeAll(() =>
     Onyx.init({
         keys: ONYXKEYS,
         safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
-        registerStorageEventListener: () => {},
     }),
 );
 
@@ -87,6 +95,8 @@ function ReportActionComposeWrapper() {
                 reportID="1"
                 disabled={false}
                 report={LHNTestUtils.getFakeReport()}
+                isComposerFullSize
+                listHeight={200}
             />
         </ComposeProviders>
     );

tests/perf-test/ReportActionsList.perf-test.js → tests/perf-test/ReportActionsList.perf-test.tsx

@@ -1,16 +1,19 @@
 import {fireEvent, screen} from '@testing-library/react-native';
+import type {ComponentType} from 'react';
 import Onyx from 'react-native-onyx';
 import {measurePerformance} from 'reassure';
-import ComposeProviders from '../../src/components/ComposeProviders';
-import {LocaleContextProvider} from '../../src/components/LocaleContextProvider';
-import OnyxProvider from '../../src/components/OnyxProvider';
-import {WindowDimensionsProvider} from '../../src/components/withWindowDimensions';
-import * as Localize from '../../src/libs/Localize';
-import ONYXKEYS from '../../src/ONYXKEYS';
-import ReportActionsList from '../../src/pages/home/report/ReportActionsList';
-import {ReportAttachmentsProvider} from '../../src/pages/home/report/ReportAttachmentsContext';
-import {ActionListContext, ReactionListContext} from '../../src/pages/home/ReportScreenContext';
-import variables from '../../src/styles/variables';
+import type {WithNavigationFocusProps} from '@components/withNavigationFocus';
+import type Navigation from '@libs/Navigation/Navigation';
+import ComposeProviders from '@src/components/ComposeProviders';
+import {LocaleContextProvider} from '@src/components/LocaleContextProvider';
+import OnyxProvider from '@src/components/OnyxProvider';
+import {WindowDimensionsProvider} from '@src/components/withWindowDimensions';
+import * as Localize from '@src/libs/Localize';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ReportActionsList from '@src/pages/home/report/ReportActionsList';
+import {ReportAttachmentsProvider} from '@src/pages/home/report/ReportAttachmentsContext';
+import {ActionListContext, ReactionListContext} from '@src/pages/home/ReportScreenContext';
+import variables from '@src/styles/variables';
 import * as LHNTestUtils from '../utils/LHNTestUtils';
 import PusherHelper from '../utils/PusherHelper';
 import * as ReportTestUtils from '../utils/ReportTestUtils';
@@ -19,12 +22,12 @@ import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatch
 
 const mockedNavigate = jest.fn();
 
-jest.mock('../../src/components/withNavigationFocus', () => (Component) => {
-    function WithNavigationFocus(props) {
+jest.mock('@src/components/withNavigationFocus', <TProps extends WithNavigationFocusProps>() => (Component: ComponentType<TProps>) => {
+    function WithNavigationFocus(props: Omit<TProps, keyof WithNavigationFocusProps>) {
         return (
             <Component
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
+                {...(props as TProps)}
                 isFocused={false}
             />
         );
@@ -40,16 +43,15 @@ jest.mock('@react-navigation/native', () => {
     return {
         ...actualNav,
         useRoute: () => mockedNavigate,
-    };
+    } as typeof Navigation;
 });
 
-jest.mock('../../src/components/ConfirmedRoute.tsx');
+jest.mock('@src/components/ConfirmedRoute.tsx');
 
 beforeAll(() =>
     Onyx.init({
         keys: ONYXKEYS,
         safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
-        registerStorageEventListener: () => {},
     }),
 );
 
@@ -60,7 +62,7 @@ afterAll(() => {
 const mockOnLayout = jest.fn();
 const mockOnScroll = jest.fn();
 const mockLoadChats = jest.fn();
-const mockRef = {current: null};
+const mockRef = {current: null, flatListRef: null, scrollPosition: null, setScrollPosition: () => {}};
 
 // Initialize the network key for OfflineWithFeedback
 beforeEach(() => {

tests/perf-test/ReportScreen.perf-test.js → tests/perf-test/ReportScreen.perf-test.tsx

@@ -1,19 +1,26 @@
+import type {StackNavigationProp} from '@react-navigation/stack';
 import {fireEvent, screen, waitFor} from '@testing-library/react-native';
+import type {ComponentType} from 'react';
 import React from 'react';
 import Onyx from 'react-native-onyx';
+import type Animated from 'react-native-reanimated';
 import {measurePerformance} from 'reassure';
-import ComposeProviders from '../../src/components/ComposeProviders';
-import DragAndDropProvider from '../../src/components/DragAndDrop/Provider';
-import {LocaleContextProvider} from '../../src/components/LocaleContextProvider';
-import OnyxProvider from '../../src/components/OnyxProvider';
-import {CurrentReportIDContextProvider} from '../../src/components/withCurrentReportID';
-import {KeyboardStateProvider} from '../../src/components/withKeyboardState';
-import {WindowDimensionsProvider} from '../../src/components/withWindowDimensions';
-import CONST from '../../src/CONST';
-import * as Localize from '../../src/libs/Localize';
-import ONYXKEYS from '../../src/ONYXKEYS';
-import {ReportAttachmentsProvider} from '../../src/pages/home/report/ReportAttachmentsContext';
-import ReportScreen from '../../src/pages/home/ReportScreen';
+import type {WithNavigationFocusProps} from '@components/withNavigationFocus';
+import type Navigation from '@libs/Navigation/Navigation';
+import type {RootStackParamList} from '@libs/Navigation/types';
+import ComposeProviders from '@src/components/ComposeProviders';
+import DragAndDropProvider from '@src/components/DragAndDrop/Provider';
+import {LocaleContextProvider} from '@src/components/LocaleContextProvider';
+import OnyxProvider from '@src/components/OnyxProvider';
+import {CurrentReportIDContextProvider} from '@src/components/withCurrentReportID';
+import {KeyboardStateProvider} from '@src/components/withKeyboardState';
+import {WindowDimensionsProvider} from '@src/components/withWindowDimensions';
+import CONST from '@src/CONST';
+import * as Localize from '@src/libs/Localize';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {ReportAttachmentsProvider} from '@src/pages/home/report/ReportAttachmentsContext';
+import ReportScreen from '@src/pages/home/ReportScreen';
+import type * as OnyxTypes from '@src/types/onyx';
 import createCollection from '../utils/collections/createCollection';
 import createPersonalDetails from '../utils/collections/personalDetails';
 import createRandomPolicy from '../utils/collections/policies';
@@ -24,21 +31,28 @@ import * as TestHelper from '../utils/TestHelper';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatchedUpdates';
 
-jest.mock('react-native-reanimated', () => ({
-    ...jest.requireActual('react-native-reanimated/mock'),
-    useSharedValue: jest.fn,
-    useAnimatedStyle: jest.fn,
-    useAnimatedRef: jest.fn,
-}));
+type ReportScreenWrapperProps = {
+    navigation: StackNavigationProp<RootStackParamList>;
+};
+
+jest.mock('react-native-reanimated', () => {
+    const actualNav = jest.requireActual('react-native-reanimated/mock');
+    return {
+        ...actualNav,
+        useSharedValue: jest.fn,
+        useAnimatedStyle: jest.fn,
+        useAnimatedRef: jest.fn,
+    } as typeof Animated;
+});
 
-jest.mock('../../src/components/ConfirmedRoute.tsx');
+jest.mock('@src/components/ConfirmedRoute.tsx');
 
-jest.mock('../../src/components/withNavigationFocus', () => (Component) => {
-    function WithNavigationFocus(props) {
+jest.mock('@src/components/withNavigationFocus', <TProps extends WithNavigationFocusProps>() => (Component: ComponentType<TProps>) => {
+    function WithNavigationFocus(props: Omit<TProps, keyof WithNavigationFocusProps>) {
         return (
             <Component
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
+                {...(props as TProps)}
                 isFocused={false}
             />
         );
@@ -49,7 +63,7 @@ jest.mock('../../src/components/withNavigationFocus', () => (Component) => {
     return WithNavigationFocus;
 });
 
-jest.mock('../../src/hooks/useEnvironment', () =>
+jest.mock('@src/hooks/useEnvironment', () =>
     jest.fn(() => ({
         environment: 'development',
         environmentURL: 'https://new.expensify.com',
@@ -58,13 +72,13 @@ jest.mock('../../src/hooks/useEnvironment', () =>
     })),
 );
 
-jest.mock('../../src/libs/Permissions', () => ({
+jest.mock('@src/libs/Permissions', () => ({
     canUseLinkPreviews: jest.fn(() => true),
     canUseDefaultRooms: jest.fn(() => true),
 }));
-jest.mock('../../src/hooks/usePermissions.ts');
+jest.mock('@src/hooks/usePermissions.ts');
 
-jest.mock('../../src/libs/Navigation/Navigation');
+jest.mock('@src/libs/Navigation/Navigation');
 
 const mockedNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => {
@@ -81,7 +95,7 @@ jest.mock('@react-navigation/native', () => {
             addListener: () => jest.fn(),
         }),
         createNavigationContainerRef: jest.fn(),
-    };
+    } as typeof Navigation;
 });
 
 // mock PortalStateContext
@@ -91,12 +105,12 @@ beforeAll(() =>
     Onyx.init({
         keys: ONYXKEYS,
         safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
-        registerStorageEventListener: () => {},
     }),
 );
 
 // Initialize the network key for OfflineWithFeedback
 beforeEach(() => {
+    // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript.
     global.fetch = TestHelper.getGlobalFetchMock();
     wrapOnyxWithWaitForBatchedUpdates(Onyx);
     Onyx.merge(ONYXKEYS.NETWORK, {isOffline: false});
@@ -109,18 +123,18 @@ afterEach(() => {
 });
 
 const policies = createCollection(
-    (item) => `${ONYXKEYS.COLLECTION.POLICY}${item.id}`,
-    (index) => createRandomPolicy(index),
+    (item: OnyxTypes.Policy) => `${ONYXKEYS.COLLECTION.POLICY}${item.id}`,
+    (index: number) => createRandomPolicy(index),
     10,
 );
 
 const personalDetails = createCollection(
-    (item) => item.accountID,
-    (index) => createPersonalDetails(index),
+    (item: OnyxTypes.PersonalDetails) => item.accountID,
+    (index: number) => createPersonalDetails(index),
     20,
 );
 
-function ReportScreenWrapper(args) {
+function ReportScreenWrapper(props: ReportScreenWrapperProps) {
     return (
         <ComposeProviders
             components={[
@@ -135,7 +149,8 @@ function ReportScreenWrapper(args) {
         >
             <ReportScreen
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...args}
+                {...props}
+                // @ts-expect-error TODO: Remove this once ReportScreen (https://github.com/Expensify/App/issues/25216) is migrated to TypeScript.
                 navigation={args.navigation}
             />
         </ComposeProviders>
@@ -147,6 +162,7 @@ const reportActions = ReportTestUtils.getMockedReportActionsMap(500);
 const mockRoute = {params: {reportID: '1'}};
 
 test('[ReportScreen] should render ReportScreen with composer interactions', () => {
+    // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript.
     const {triggerTransitionEnd, addListener} = TestHelper.createAddListenerMock();
     const scenario = async () => {
         /**
@@ -196,6 +212,7 @@ test('[ReportScreen] should render ReportScreen with composer interactions', ()
         .then(() =>
             measurePerformance(
                 <ReportScreenWrapper
+                    // @ts-expect-error TODO: Remove this once ReportScreen (https://github.com/Expensify/App/issues/25216) is migrated to TypeScript.
                     navigation={navigation}
                     route={mockRoute}
                 />,
@@ -205,6 +222,7 @@ test('[ReportScreen] should render ReportScreen with composer interactions', ()
 });
 
 test('[ReportScreen] should press of the report item', () => {
+    // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript.
     const {triggerTransitionEnd, addListener} = TestHelper.createAddListenerMock();
     const scenario = async () => {
         /**
@@ -245,6 +263,7 @@ test('[ReportScreen] should press of the report item', () => {
         .then(() =>
             measurePerformance(
                 <ReportScreenWrapper
+                    // @ts-expect-error TODO: Remove this once ReportScreen is migrated to TypeScript.
                     navigation={navigation}
                     route={mockRoute}
                 />,