refactor(5564): fix lint and unit/e2e tests

Author: DDDDDanica

ui/pages/confirmations/components/confirm/smart-account-tab/smart-account-tab.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Hex } from '@metamask/utils';
 
 import mockState from '../../../../../../test/data/mock-state.json';
-import { renderWithProvider } from '../../../../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../../../../test/lib/render-helpers-navigate';
 import configureStore from '../../../../../store/store';
 import { SmartAccountTab } from './smart-account-tab';
 

ui/pages/confirmations/confirm-transaction/confirm-transaction.component.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
- import PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   Routes,

ui/pages/confirmations/confirm-transaction/confirm-transaction.test.js

@@ -7,7 +7,7 @@ import ReactRouterDOM from 'react-router-dom';
 import * as ConfirmTransactionDucks from '../../../ducks/confirm-transaction/confirm-transaction.duck';
 import * as Actions from '../../../store/actions';
 import _mockState from '../../../../test/data/mock-state.json';
-import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../../test/lib/render-helpers-navigate';
 import { setBackgroundConnection } from '../../../store/background-connection';
 
 import {
@@ -53,22 +53,13 @@ jest.mock(
   }),
 );
 
-jest.mock('react-router-dom', () => {
-  const original = jest.requireActual('react-router-dom');
-  return {
-    ...original,
-    useHistory: () => ({
-      replace: jest.fn(),
-    }),
-  };
-});
-
+const mockUseNavigate = jest.fn();
+const mockUseSearchParams = jest.fn();
 jest.mock('react-router-dom-v5-compat', () => {
-  const original = jest.requireActual('react-router-dom-v5-compat');
   return {
-    ...original,
-    useNavigate: () => jest.fn(),
-    useSearchParams: () => [new URLSearchParams(''), jest.fn()],
+    ...jest.requireActual('react-router-dom-v5-compat'),
+    useNavigate: () => mockUseNavigate,
+    useSearchParams: () => mockUseSearchParams(),
   };
 });
 
@@ -109,10 +100,13 @@ jest.mock('../confirm-transaction-switch', () => {
 
 describe('Confirmation Transaction Page', () => {
   beforeEach(() => {
+    jest.clearAllMocks();
     jest
       .spyOn(Actions, 'gasFeeStartPollingByNetworkClientId')
       .mockResolvedValue(null);
+    mockUseSearchParams.mockReturnValue([new URLSearchParams(''), jest.fn()]);
   });
+
   it('should display the Loading component when the transaction is invalid', () => {
     const mockStore = configureMockStore(middleware)({
       ...mockState,
@@ -190,7 +184,7 @@ describe('Confirmation Transaction Page', () => {
         ...mockState,
         metamask: { ...mockState.metamask, transactions: [] },
       });
-      jest.spyOn(ReactRouterDOM, 'useParams').mockImplementation(() => {
+      mockUseSearchParams.mockImplementation(() => {
         return { id: null };
       });
       ConfirmTransactionDucks.setTransactionToConfirm.mockClear();
@@ -203,17 +197,10 @@ describe('Confirmation Transaction Page', () => {
     });
 
     describe('when unapproved transactions exist or a sendTo recipient exists', () => {
-      it('should not call history.replace(mostRecentOverviewPage)', () => {
+      it('should not call navigate(mostRecentOverviewPage)', () => {
         const mockStore = configureMockStore(middleware)(mockState);
-        const replaceSpy = jest.fn();
-        jest.spyOn(ReactRouterDOM, 'useHistory').mockImplementation(() => {
-          return {
-            replace: replaceSpy,
-          };
-        });
-
         renderWithProvider(<ConfirmTransaction />, mockStore);
-        expect(replaceSpy).not.toHaveBeenCalled();
+        expect(mockUseNavigate).not.toHaveBeenCalled();
       });
     });
   });

ui/pages/confirmations/confirmation/templates/create-named-snap-account.test.js

@@ -5,7 +5,7 @@ import { waitFor } from '@testing-library/react';
 
 import { KeyringTypes } from '@metamask/keyring-controller';
 import Confirmation from '../confirmation';
-import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers-navigate';
 import { SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES } from '../../../../../shared/constants/app';
 import mockState from '../../../../../test/data/mock-state.json';
 import { ETH_EOA_METHODS } from '../../../../../shared/constants/eth-methods';

ui/pages/confirmations/confirmation/templates/error.test.js

@@ -4,7 +4,7 @@ import thunk from 'redux-thunk';
 import { waitFor } from '@testing-library/react';
 
 import { ApprovalType } from '@metamask/controller-utils';
-import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers-navigate';
 import Confirmation from '../confirmation';
 
 jest.mock('../../../../../shared/lib/fetch-with-cache');

ui/pages/confirmations/confirmation/templates/success.test.js

@@ -4,7 +4,7 @@ import thunk from 'redux-thunk';
 import { waitFor } from '@testing-library/react';
 
 import { ApprovalType } from '@metamask/controller-utils';
-import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers-navigate';
 import Confirmation from '../confirmation';
 
 jest.mock('../../../../../shared/lib/fetch-with-cache');

ui/pages/confirmations/hooks/syncConfirmPath.test.ts

@@ -4,12 +4,13 @@ import { unapprovedPersonalSignMsg } from '../../../../test/data/confirmations/p
 import { renderHookWithConfirmContextProvider } from '../../../../test/lib/confirmations/render-helpers';
 import syncConfirmPath from './syncConfirmPath';
 
-const mockHistoryReplace = jest.fn();
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({ replace: mockHistoryReplace }),
-}));
+const mockUseNavigate = jest.fn();
+jest.mock('react-router-dom-v5-compat', () => {
+  return {
+    ...jest.requireActual('react-router-dom-v5-compat'),
+    useNavigate: () => mockUseNavigate,
+  };
+});
 
 const STATE_MOCK = {
   ...mockState,
@@ -25,6 +26,10 @@ const STATE_MOCK = {
 };
 
 describe('syncConfirmPath', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should execute correctly', () => {
     const result = renderHookWithConfirmContextProvider(
       () => syncConfirmPath(unapprovedPersonalSignMsg),
@@ -34,11 +39,13 @@ describe('syncConfirmPath', () => {
   });
 
   it('should replace history route', () => {
-    mockHistoryReplace.mockClear();
     renderHookWithConfirmContextProvider(
       () => syncConfirmPath(unapprovedPersonalSignMsg),
       STATE_MOCK,
     );
-    expect(mockHistoryReplace).toHaveBeenCalled();
+    expect(mockUseNavigate).toHaveBeenCalledWith(
+      '/confirm-transaction/0050d5b0-c023-11ee-a0cb-3390a510a0ab/signature-request',
+      { replace: true },
+    );
   });
 });

ui/pages/confirmations/hooks/useConfirmSendNavigation.test.ts

@@ -6,15 +6,13 @@ import { useConfirmSendNavigation } from './useConfirmSendNavigation';
 
 const mockUseRedesignedSendFlow = jest.mocked(useRedesignedSendFlow);
 
-const mockHistory = {
-  goBack: jest.fn(),
-  push: jest.fn(),
-};
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => mockHistory,
-}));
+const mockUseNavigate = jest.fn();
+jest.mock('react-router-dom-v5-compat', () => {
+  return {
+    ...jest.requireActual('react-router-dom-v5-compat'),
+    useNavigate: () => mockUseNavigate,
+  };
+});
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
@@ -60,7 +58,7 @@ describe('useConfirmSendNavigation', () => {
     const result = renderHook();
     result.navigateBackIfSend();
 
-    expect(mockHistory.goBack).not.toHaveBeenCalled();
+    expect(mockUseNavigate).not.toHaveBeenCalled();
   });
 
   it('navigates back when send redesign is enabled and confirmation is metamask simpleSend', () => {
@@ -72,7 +70,7 @@ describe('useConfirmSendNavigation', () => {
     const result = renderHook();
     result.navigateBackIfSend();
 
-    expect(mockHistory.goBack).toHaveBeenCalled();
+    expect(mockUseNavigate).toHaveBeenCalledWith(-1);
   });
 
   it('does not navigate back when send redesign is enabled but origin is not metamask', () => {
@@ -84,7 +82,7 @@ describe('useConfirmSendNavigation', () => {
     const result = renderHook();
     result.navigateBackIfSend();
 
-    expect(mockHistory.goBack).not.toHaveBeenCalled();
+    expect(mockUseNavigate).not.toHaveBeenCalled();
   });
 
   it('does not navigate back when send redesign is enabled but type is not simpleSend', () => {
@@ -96,7 +94,7 @@ describe('useConfirmSendNavigation', () => {
     const result = renderHook();
     result.navigateBackIfSend();
 
-    expect(mockHistory.goBack).not.toHaveBeenCalled();
+    expect(mockUseNavigate).not.toHaveBeenCalled();
   });
 
   it('does not navigate back when send redesign is enabled but both origin and type do not match', () => {
@@ -108,6 +106,6 @@ describe('useConfirmSendNavigation', () => {
     const result = renderHook();
     result.navigateBackIfSend();
 
-    expect(mockHistory.goBack).not.toHaveBeenCalled();
+    expect(mockUseNavigate).not.toHaveBeenCalled();
   });
 });

ui/pages/confirmations/hooks/useConfirmationNavigation.test.ts

@@ -1,4 +1,3 @@
-import { useHistory, useLocation } from 'react-router-dom';
 import { ApprovalType } from '@metamask/controller-utils';
 import { Json } from '@metamask/utils';
 import { ApprovalFlowState } from '@metamask/approval-controller';