refactor(5566): fix lint and tests

Author: DDDDDanica

.storybook/preview.js

@@ -12,8 +12,7 @@ import localeList from '../app/_locales/index.json';
 import * as allLocales from './locales';
 import { I18nProvider, LegacyI18nProvider } from './i18n';
 import testData from './test-data.js';
-import { MemoryRouter } from 'react-router-dom';
-import { CompatRouter, Routes, Route } from 'react-router-dom-v5-compat';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
 import { setBackgroundConnection } from '../ui/store/background-connection';
 import { metamaskStorybookTheme } from './metamask-storybook-theme';
 import { DocsContainer } from '@storybook/addon-docs';
@@ -154,27 +153,25 @@ const metamaskDecorator = (story, context) => {
   return (
     <Provider store={store}>
       <MemoryRouter initialEntries={initialEntries}>
-        <CompatRouter>
-          <AlertMetricsProvider
-            metrics={{
-              trackAlertActionClicked: () => undefined,
-              trackAlertRender: () => undefined,
-              trackInlineAlertClicked: () => undefined,
-            }}
+        <AlertMetricsProvider
+          metrics={{
+            trackAlertActionClicked: () => undefined,
+            trackAlertRender: () => undefined,
+            trackInlineAlertClicked: () => undefined,
+          }}
+        >
+          <I18nProvider
+            currentLocale={currentLocale}
+            current={current}
+            en={allLocales.en}
           >
-            <I18nProvider
-              currentLocale={currentLocale}
-              current={current}
-              en={allLocales.en}
-            >
-              <LegacyI18nProvider>
-                <Routes>
-                  <Route path={path} element={<StoryComponent />} />
-                </Routes>
-              </LegacyI18nProvider>
-            </I18nProvider>
-          </AlertMetricsProvider>
-        </CompatRouter>
+            <LegacyI18nProvider>
+              <Routes>
+                <Route path={path} element={<StoryComponent />} />
+              </Routes>
+            </LegacyI18nProvider>
+          </I18nProvider>
+        </AlertMetricsProvider>
       </MemoryRouter>
     </Provider>
   );

test/jest/rendering.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { Provider } from 'react-redux';
 import { render } from '@testing-library/react';
-import { MemoryRouter, Router } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import { I18nContext, LegacyI18nProvider } from '../../ui/contexts/i18n';
@@ -78,42 +78,3 @@ export function renderWithProvider(component, store, initialEntries) {
 
   return render(component, { wrapper: Wrapper });
 }
-
-export function renderWithProviderAndHistory(
-  component,
-  store,
-  history,
-  renderer = render,
-) {
-  const mockTrackEvent = createMockTrackEvent();
-
-  const Wrapper = ({ children }) => {
-    const WithoutStore = () => (
-      <Router history={history}>
-        <I18nProvider currentLocale="en" current={en} en={en}>
-          <LegacyI18nProvider>
-            <MetaMetricsContext.Provider value={mockTrackEvent}>
-              <LegacyMetaMetricsProvider>{children}</LegacyMetaMetricsProvider>
-            </MetaMetricsContext.Provider>
-          </LegacyI18nProvider>
-        </I18nProvider>
-      </Router>
-    );
-    return store ? (
-      <Provider store={store}>
-        <WithoutStore />
-      </Provider>
-    ) : (
-      <WithoutStore />
-    );
-  };
-
-  Wrapper.propTypes = {
-    children: PropTypes.node,
-  };
-
-  return {
-    ...renderer(component, { wrapper: Wrapper }),
-    history,
-  };
-}

ui/components/app/network-connection-banner/network-connection-banner.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
-import { useNavigate } from 'react-router-dom';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
 
 import { useNetworkConnectionBanner } from '../../../hooks/useNetworkConnectionBanner';
@@ -24,7 +23,8 @@ jest.mock('../../../hooks/useNetworkConnectionBanner', () => ({
 
 const mockUseNavigate = jest.fn();
 jest.mock('react-router-dom', () => ({
-  useNavigate: mockUseNavigate,
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockUseNavigate,
 }));
 
 jest.mock('../../../hooks/useTheme', () => ({

ui/components/app/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers-navigate';
 import Button from '../../../ui/button';
 import TransactionBreakdownRow from '.';
 

ui/components/app/transaction-list-item-details/transaction-list-item-details.component.test.js

@@ -3,9 +3,8 @@ import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { TransactionStatus } from '@metamask/transaction-controller';
 import { act, waitFor } from '@testing-library/react';
-import { createMemoryHistory } from 'history';
 import { GAS_LIMITS } from '../../../../shared/constants/gas';
-import { renderWithProviderAndHistory } from '../../../../test/jest/rendering';
+import { renderWithProvider } from '../../../../test/lib/render-helpers-navigate';
 import mockState from '../../../../test/data/mock-state.json';
 import mockSwapTxGroup from '../../../../test/data/swap/mock-legacy-swap-transaction-group.json';
 import TransactionListItemDetails from '.';
@@ -37,23 +36,21 @@ const render = async (overrideProps) => {
     recipientAddress: '0x0000000000000000000000000000000000000000',
     senderAddress: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
     tryReverseResolveAddress: jest.fn(),
-    transactionStatus: () => <div></div>,
+    transactionStatus: () => <div />,
     blockExplorerLinkText,
     rpcPrefs,
     ...overrideProps,
   };
 
   const mockStore = configureMockStore([thunk])(mockState);
-  const history = createMemoryHistory();
 
   let result;
 
   await act(
     async () =>
-      (result = renderWithProviderAndHistory(
+      (result = renderWithProvider(
         <TransactionListItemDetails {...props} />,
         mockStore,
-        history,
       )),
   );
 

ui/components/app/transaction-list-item/transaction-list-item.component.test.js

@@ -4,7 +4,6 @@ import { fireEvent } from '@testing-library/react';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import configureStore from 'redux-mock-store';
-import { createMemoryHistory } from 'history';
 import {
   TrustSignalDisplayState,
   useTrustSignals,
@@ -17,7 +16,7 @@ import {
 import transactionGroup from '../../../../test/data/mock-pending-transaction-data.json';
 import mockLegacySwapTxGroup from '../../../../test/data/swap/mock-legacy-swap-transaction-group.json';
 import mockState from '../../../../test/data/mock-state.json';
-import { renderWithProviderAndHistory } from '../../../../test/jest';
+import { renderWithProvider } from '../../../../test/lib/render-helpers-navigate';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import { selectBridgeHistoryForAccountGroup } from '../../../ducks/bridge-status/selectors';
 import { getTokens } from '../../../ducks/metamask/metamask';
@@ -160,8 +159,6 @@ const generateUseSelectorRouter = (opts) => (selector) => {
 };
 
 describe('TransactionListItem', () => {
-  const history = createMemoryHistory();
-
   beforeAll(() => {
     useGasFeeEstimates.mockImplementation(
       () => FEE_MARKET_ESTIMATE_RETURN_VALUE,
@@ -179,9 +176,6 @@ describe('TransactionListItem', () => {
     useGasFeeEstimates.mockRestore();
   });
 
-  const renderWithProvider = (component, store) =>
-    renderWithProviderAndHistory(component, store, history);
-
   describe('ActivityListItem interactions', () => {
     it('should show the activity details popover and log metrics when the activity list item is clicked', () => {
       useSelector.mockImplementation(

ui/components/multichain-accounts/permissions/permission-review-page/multichain-review-permissions-page.test.tsx

@@ -31,12 +31,6 @@ jest.mock('react-router-dom', () => {
   };
 });
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useNavigate: () => jest.fn(),
-  useLocation: () => ({ pathname: '/test', search: '', hash: '', state: null }),
-}));
-
 jest.mock('../../../../hooks/useAccountGroupsForPermissions', () => ({
   useAccountGroupsForPermissions: jest.fn(() => ({
     supportedAccountGroups: [],

ui/hooks/bridge/useBridgeQueryParams.test.ts

@@ -10,7 +10,7 @@ import { mockNetworkState } from '../../../test/stub/networks';
 import { useBridgeQueryParams } from './useBridgeQueryParams';
 
 // Helper hook that combines useBridgeQueryParams with useLocation
-// so we can inspect the router state from the same v5-compat context
+// so we can inspect the router state from the same v6 context
 const useBridgeQueryParamsWithLocation = () => {
   const location = useLocation();
   useBridgeQueryParams();

ui/hooks/useSegmentContext.js

@@ -19,7 +19,6 @@ export function useSegmentContext() {
   const paths = getPaths();
 
   // Try to match the current location against each path
-  // Note: v5-compat matchPath uses v6 signature (pattern first, pathname second)
   let match;
   paths.find((path) => {
     match = matchPath(

ui/pages/bridge/index.tsx

@@ -10,7 +10,6 @@ import { clearSwapsState } from '../../ducks/swaps/swaps';
 import {
   DEFAULT_ROUTE,
   PREPARE_SWAP_ROUTE,
-  CROSS_CHAIN_SWAP_ROUTE,
   AWAITING_SIGNATURES_ROUTE,
   TRANSACTION_SHIELD_ROUTE,
 } from '../../helpers/constants/routes';