Fixing jest component test output errors (#11139)

* Adding missing required props to component tests

* Removing unused IntroPopup component

* Mocking useLayoutEffect as useEffect in confirm-page-container-header.component.test.js

ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.test.js

@@ -8,6 +8,11 @@ import ConfirmPageContainerHeader from './confirm-page-container-header.componen
 
 const util = require('../../../../../app/scripts/lib/util');
 
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useLayoutEffect: jest.requireActual('react').useEffect,
+}));
+
 describe('Confirm Detail Row Component', () => {
   describe('render', () => {
     it('should render a div with a confirm-page-container-header class', () => {

ui/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content-component.test.js

@@ -23,6 +23,7 @@ describe('AdvancedTabContent Component', () => {
         insufficientBalance={false}
         customPriceIsSafe
         isSpeedUp={false}
+        customPriceIsExcessive={false}
       />,
     );
   });

ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-component.test.js

@@ -76,6 +76,7 @@ describe('GasModalPageContainer Component', () => {
         customGasLimitInHex="mockCustomGasLimitInHex"
         insufficientBalance={false}
         disableSave={false}
+        customPriceIsExcessive={false}
       />,
     );
   });
@@ -124,6 +125,7 @@ describe('GasModalPageContainer Component', () => {
         <GasModalPageContainer
           fetchBasicGasEstimates={propsMethodSpies.fetchBasicGasEstimates}
           fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
+          customPriceIsExcessive={false}
         />,
         { context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } },
       );
@@ -202,6 +204,7 @@ describe('GasModalPageContainer Component', () => {
           customGasLimitInHex="mockCustomGasLimitInHex"
           insufficientBalance={false}
           disableSave={false}
+          customPriceIsExcessive={false}
           hideBasic
         />,
       );

ui/components/app/menu-bar/menu-bar.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
+import { waitFor } from '@testing-library/react';
 import { mountWithRouter } from '../../../../test/lib/render-helpers';
 import { ROPSTEN_CHAIN_ID } from '../../../../shared/constants/network';
 import MenuBar from './menu-bar';
@@ -30,21 +31,25 @@ const initState = {
 const mockStore = configureStore();
 
 describe('MenuBar', () => {
-  it('opens account detail menu when account options is clicked', () => {
+  it('opens account detail menu when account options is clicked', async () => {
     const store = mockStore(initState);
     const wrapper = mountWithRouter(
       <Provider store={store}>
         <MenuBar />
       </Provider>,
     );
-    expect(!wrapper.exists('AccountOptionsMenu')).toStrictEqual(true);
+    await waitFor(() =>
+      expect(!wrapper.exists('AccountOptionsMenu')).toStrictEqual(true),
+    );
     const accountOptions = wrapper.find('.menu-bar__account-options');
     accountOptions.simulate('click');
     wrapper.update();
-    expect(wrapper.exists('AccountOptionsMenu')).toStrictEqual(true);
+    await waitFor(() =>
+      expect(wrapper.exists('AccountOptionsMenu')).toStrictEqual(true),
+    );
   });
 
-  it('sets accountDetailsMenuOpen to false when closed', () => {
+  it('sets accountDetailsMenuOpen to false when closed', async () => {
     const store = mockStore(initState);
     const wrapper = mountWithRouter(
       <Provider store={store}>
@@ -54,10 +59,14 @@ describe('MenuBar', () => {
     const accountOptions = wrapper.find('.menu-bar__account-options');
     accountOptions.simulate('click');
     wrapper.update();
-    expect(wrapper.exists('AccountOptionsMenu')).toStrictEqual(true);
+    await waitFor(() =>
+      expect(wrapper.exists('AccountOptionsMenu')).toStrictEqual(true),
+    );
     const accountDetailsMenu = wrapper.find('AccountOptionsMenu');
-    accountDetailsMenu.prop('onClose')();
-    wrapper.update();
-    expect(!wrapper.exists('AccountOptionsMenu')).toStrictEqual(true);
+    await waitFor(() => {
+      accountDetailsMenu.prop('onClose')();
+      wrapper.update();
+      expect(!wrapper.exists('AccountOptionsMenu')).toStrictEqual(true);
+    });
   });
 });

ui/components/app/modals/confirm-remove-account/confirm-remove-account.test.js

@@ -21,6 +21,8 @@ describe('Confirm Remove Account', () => {
       address: '0x0',
       name: 'Account 1',
     },
+    chainId: '0x0',
+    rpcPrefs: {},
   };
 
   const mockStore = configureStore();

ui/pages/send/send-content/send-content.component.test.js

@@ -12,8 +12,13 @@ import SendAssetRow from './send-asset-row/send-asset-row.container';
 describe('SendContent Component', () => {
   let wrapper;
 
+  const defaultProps = {
+    showHexData: true,
+    gasIsExcessive: false,
+  };
+
   beforeEach(() => {
-    wrapper = shallow(<SendContent showHexData />, {
+    wrapper = shallow(<SendContent {...defaultProps} />, {
       context: { t: (str) => `${str}_t` },
     });
   });

ui/pages/settings/advanced-tab/advanced-tab.component.test.js

@@ -15,6 +15,10 @@ describe('AdvancedTab Component', () => {
         setThreeBoxSyncingPermission={() => undefined}
         threeBoxDisabled
         threeBoxSyncingAllowed={false}
+        useLedgerLive={false}
+        setLedgerLivePreference={() => undefined}
+        setDismissSeedBackUpReminder={() => undefined}
+        dismissSeedBackUpReminder={false}
       />,
       {
         context: {
@@ -37,6 +41,10 @@ describe('AdvancedTab Component', () => {
         setThreeBoxSyncingPermission={() => undefined}
         threeBoxDisabled
         threeBoxSyncingAllowed={false}
+        useLedgerLive={false}
+        setLedgerLivePreference={() => undefined}
+        setDismissSeedBackUpReminder={() => undefined}
+        dismissSeedBackUpReminder={false}
       />,
       {
         context: {