chore: Performance testing with reassure

.reassure/current.perf

@@ -0,0 +1,2 @@
+{"metadata":{"creationDate":"2024-07-04T00:10:12.126Z","branch":"main","commitHash":"8db254ad21c577e266eeebeb10bb3f64dae02947"}}
+{"name":"RN CLI - WalletActions 10 runs","type":"render","runs":10,"meanDuration":3.5,"stdevDuration":0.5270462766947299,"durations":[3,4,4,3,3,4,3,4,4,3],"warmupDurations":[102],"meanCount":1,"stdevCount":0,"counts":[1,1,1,1,1,1,1,1,1,1],"issues":{"initialUpdateCount":0,"redundantUpdates":[]}}

app/components/Views/Wallet/ignore.tsx

@@ -0,0 +1,117 @@
+/* import React from 'react';
+import { measureRenders } from 'reassure';
+import Wallet from './'; // Adjust the import path if necessary
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import { mockInitialState } from './index.test';
+import { createMockAccountsControllerState } from '../../../util/test/accountsControllerTestUtils';
+
+import Engine from '../../../core/Engine';
+const mockEngine = Engine;
+const MOCK_ADDRESS = '0xc4955c0d639d99699bfd7ec54d9fafee40e4d272';
+
+const MOCK_ACCOUNTS_CONTROLLER_STATE = createMockAccountsControllerState([
+  MOCK_ADDRESS,
+]);
+jest.mock('../../../core/Engine', () => ({
+  init: () => mockEngine.init({}),
+  getTotalFiatAccountBalance: jest.fn(),
+  context: {
+    PreferencesController: {
+      selectedAddress: MOCK_ADDRESS,
+      identities: {
+        [MOCK_ADDRESS]: {
+          name: 'Account 1',
+          address: MOCK_ADDRESS,
+        },
+      },
+    },
+    NftController: {
+      allNfts: {
+        [MOCK_ADDRESS]: {
+          [MOCK_ADDRESS]: [],
+        },
+      },
+      allNftContracts: {
+        [MOCK_ADDRESS]: {
+          [MOCK_ADDRESS]: [],
+        },
+      },
+    },
+    TokenRatesController: {
+      poll: jest.fn(),
+    },
+    TokenDetectionController: {
+      detectTokens: jest.fn(),
+    },
+    NftDetectionController: {
+      detectNfts: jest.fn(),
+    },
+    AccountTrackerController: {
+      refresh: jest.fn(),
+    },
+    KeyringController: {
+      state: {
+        keyrings: [
+          {
+            accounts: ['0xC4955C0d639D99699Bfd7Ec54d9FaFEe40e4D272'],
+          },
+        ],
+      },
+    },
+    AccountsController: {
+      ...MOCK_ACCOUNTS_CONTROLLER_STATE,
+    },
+  },
+}));
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest
+    .fn()
+    .mockImplementation((callback) => callback(mockInitialState)),
+}));
+
+jest.mock('@react-navigation/native', () => {
+  const actualNav = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualNav,
+    useNavigation: () => ({
+      navigate: jest.fn(),
+      setOptions: jest.fn(),
+      goBack: jest.fn(),
+      reset: jest.fn(),
+      dangerouslyGetParent: () => ({
+        pop: jest.fn(),
+      }),
+    }),
+  };
+});
+
+jest.mock('react-native-scrollable-tab-view', () => {
+  const ScrollableTabViewMock = jest
+    .fn()
+    .mockImplementation(() => ScrollableTabViewMock);
+  // TODO - Clean up mock.
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  ScrollableTabViewMock.defaultProps = {
+    onChangeTab: jest.fn(),
+    renderTabBar: jest.fn(),
+  };
+  return ScrollableTabViewMock;
+});
+
+// Mock store setup
+const mockStore = configureMockStore();
+const store = mockStore(mockInitialState);
+
+test('Simple test', async () => {
+  const test = await measureRenders(
+    <Provider store={store}>
+      <Wallet />
+    </Provider>,
+  );
+  console.log('ENTER test', test);
+});
+ */

app/components/Views/Wallet/index.test.tsx

@@ -71,7 +71,16 @@ jest.mock('../../../core/Engine', () => ({
   },
 }));
 
-const mockInitialState = {
+// eslint-disable-next-line import/prefer-default-export
+export const mockInitialState = {
+  navigation: {
+    currentRoute: 'WalletView',
+    currentBottomNavRoute: 'Wallet',
+  },
+  legalNotices: {
+    newPrivacyPolicyToastShownDate: null,
+    newPrivacyPolicyToastClickedOrClosed: false,
+  },
   networkOnboarded: {
     networkOnboardedState: {
       '0x1': true,

app/components/Views/WalletActions/WalletActions.perf-test.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { measureRenders } from 'reassure';
+import WalletActions from './WalletActions';
+import { fireEvent, screen } from '@testing-library/react-native';
+import { WalletActionsModalSelectorsIDs } from '../../../../e2e/selectors/Modals/WalletActionsModal.selectors';
+import { createMockAccountsControllerState } from '../../../util/test/accountsControllerTestUtils';
+import initialBackgroundState from '../../../util/test/initial-background-state.json';
+jest.setTimeout(600_000);
+const MOCK_ADDRESS = '0xc4955c0d639d99699bfd7ec54d9fafee40e4d272';
+
+const MOCK_ACCOUNTS_CONTROLLER_STATE = createMockAccountsControllerState([
+  MOCK_ADDRESS,
+]);
+const mockInitialState = {
+  fiatOrders: {
+    networks: [],
+  },
+  browser: {
+    tabs: [],
+  },
+  navigation: {
+    currentRoute: 'WalletView',
+    currentBottomNavRoute: 'Wallet',
+  },
+  legalNotices: {
+    newPrivacyPolicyToastShownDate: null,
+    newPrivacyPolicyToastClickedOrClosed: false,
+  },
+  networkOnboarded: {
+    networkOnboardedState: {
+      '0x1': true,
+    },
+  },
+  security: {
+    dataCollectionForMarketing: true,
+  },
+  swaps: {
+    [MOCK_ADDRESS]: { isLive: true },
+    hasOnboarded: false,
+    isLive: true,
+  },
+  wizard: {
+    step: 0,
+  },
+  settings: {
+    primaryCurrency: 'usd',
+  },
+  engine: {
+    backgroundState: {
+      ...initialBackgroundState,
+      PreferencesController: {
+        selectedAddress: MOCK_ADDRESS,
+        identities: {
+          [MOCK_ADDRESS]: {
+            name: 'Account 1',
+            address: MOCK_ADDRESS,
+          },
+        },
+      },
+      AccountsController: {
+        ...MOCK_ACCOUNTS_CONTROLLER_STATE,
+      },
+    },
+  },
+};
+
+jest.mock('react-native-safe-area-context', () => {
+  // using disting digits for mock rects to make sure they are not mixed up
+  const inset = { top: 1, right: 2, bottom: 3, left: 4 };
+  const frame = { width: 5, height: 6, x: 7, y: 8 };
+  return {
+    SafeAreaProvider: jest.fn().mockImplementation(({ children }) => children),
+    SafeAreaConsumer: jest
+      .fn()
+      .mockImplementation(({ children }) => children(inset)),
+    useSafeAreaInsets: jest.fn().mockImplementation(() => inset),
+    useSafeAreaFrame: jest.fn().mockImplementation(() => frame),
+  };
+});
+jest.mock('@react-navigation/native', () => {
+  const actualNav = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualNav,
+    useNavigation: () => ({
+      navigate: jest.fn(),
+      setOptions: jest.fn(),
+      goBack: jest.fn(),
+      reset: jest.fn(),
+      dangerouslyGetParent: () => ({
+        pop: jest.fn(),
+      }),
+    }),
+  };
+});
+
+const mockDispatch = jest.fn();
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: jest.fn().mockImplementation(() => mockDispatch),
+  useSelector: jest
+    .fn()
+    .mockImplementation((callback) => callback(mockInitialState)),
+}));
+
+test('RN CLI - WalletActions 10 runs', async () => {
+  const scenario = async () => {
+    const button = screen.getByTestId(
+      WalletActionsModalSelectorsIDs.SEND_BUTTON,
+    );
+
+    /*   fireEvent.press(button);
+
+    await screen.findByText('Cancel'); */
+  };
+
+  await measureRenders(<WalletActions /> /* , { scenario, runs: 1 } */);
+});
+
+/* test('RN CLI - WalletActions 50 runs', async () => {
+  const scenario = async () => {
+    const button = screen.getByTestId(
+      WalletActionsModalSelectorsIDs.SEND_BUTTON,
+    );
+
+    /*    fireEvent.press(button);
+
+    await screen.findByText('Cancel');
+  };
+
+  await measureRenders(<WalletActions />, { scenario, runs: 50 });
+}); */

package.json

@@ -472,6 +472,7 @@
     "react-native-svg-asset-plugin": "^0.5.0",
     "react-native-svg-transformer": "^1.0.0",
     "react-test-renderer": "18.2.0",
+    "reassure": "^1.0.0",
     "regenerator-runtime": "0.13.9",
     "rn-nodeify": "10.3.0",
     "serve-handler": "^6.1.5",
@@ -571,4 +572,4 @@
     }
   },
   "packageManager": "yarn@1.22.22"
-}
+}