chore: Migrate a batch of unit tests away from enzyme (#8839)

## **Description**

Works on #8804 

This PR is in line with the mobile platform's team to reduce usage of
Enzyme as a testing library. The following tests were modified:
```
  'app/components/UI/BiometryButton/index.test.tsx',
  'app/components/UI/OnboardingWizard/Coachmark/index.test.tsx',
  'app/component-library/components/Pickers/PickerBase/PickerBase.test.tsx',
  'app/component-library/components/Cards/Card/Card.test.tsx',
  'app/components/Views/TermsAndConditions/index.test.tsx',
  'app/components/Views/Onboarding/index.test.tsx',
  'app/components/Views/GasEducationCarousel/index.test.tsx',
  'app/components/Views/Asset/index.test.js',
  'app/components/UI/UrlAutocomplete/index.test.js',
  'app/components/UI/UpdateNeeded/UpdateNeeded.test.tsx',
  'app/components/UI/SelectComponent/index.test.tsx',
  'app/components/UI/NavbarBrowserTitle/index.test.tsx',
  'app/components/UI/DrawerView/index.test.tsx',
  'app/components/UI/EnableAutomaticSecurityChecksModal/EnableAutomaticSecurityChecksModal.test.tsx',
  'app/components/Views/confirmations/Send/index.test.tsx',
  'app/components/Views/Settings/AppInformation/index.test.tsx',
  'app/components/UI/Tabs/TabThumbnail/index.test.tsx'
  ```

## **Related issues**

Fixes: #8804 

## **Manual testing steps**

1. `yarn test:unit`

## **Screenshots/Recordings**

<img width="483" alt="image" src="https://github.com/MetaMask/metamask-mobile/assets/6249205/4e963ecd-46f4-4b2c-ae9d-890ea8989476">

## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've clearly explained what problem this PR is solving and how it is solved.
- [ ] I've linked related issues
- [X] I've included manual testing steps
- [X] I've included screenshots/recordings if applicable
- [X] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors.
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
  - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft".

## **Pre-merge reviewer checklist**

- [X] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
- [] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

app/component-library/components/Cards/Card/Card.test.tsx

@@ -1,18 +1,18 @@
 // Third party dependencies.
 import React from 'react';
 import { View } from 'react-native';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react-native';
 
 // Internal dependencies.
 import Card from './Card';
 
 describe('Card - Snapshot', () => {
   it('should render correctly', () => {
-    const wrapper = shallow(
+    const { toJSON } = render(
       <Card>
         <View />
       </Card>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

app/component-library/components/Pickers/PickerBase/PickerBase.test.tsx

@@ -1,18 +1,18 @@
 // Third party dependencies.
 import React from 'react';
 import { View } from 'react-native';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react-native';
 
 // Internal dependencies.
 import PickerBase from './PickerBase';
 
 describe('PickerBase', () => {
   it('should render correctly', () => {
-    const wrapper = shallow(
+    const { toJSON } = render(
       <PickerBase onPress={jest.fn}>
         <View />
       </PickerBase>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

app/component-library/components/Pickers/PickerBase/__snapshots__/PickerBase.test.tsx.snap

@@ -16,15 +16,18 @@ exports[`PickerBase should render correctly 1`] = `
   }
 >
   <View />
-  <Icon
+  <SvgMock
     color="#6A737D"
+    height={20}
     name="ArrowDown"
-    size="20"
     style={
       Object {
+        "height": 20,
         "marginLeft": 16,
+        "width": 20,
       }
     }
+    width={20}
   />
 </TouchableOpacity>
 `;

app/components/UI/BiometryButton/index.test.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react-native';
 import BiometryButton from './BiometryButton';
 import AUTHENTICATION_TYPE from '../../../constants/userProperties';
 
 describe('BiometryButton', () => {
   it('should render correctly', () => {
-    const wrapper = shallow(
+    const { toJSON } = render(
       <BiometryButton
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         onPress={() => {}}
         hidden={false}
         biometryType={AUTHENTICATION_TYPE.BIOMETRIC}
       />,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

app/components/UI/DrawerView/index.test.tsx

@@ -1,19 +1,46 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import renderWithProvider from '../../../util/test/renderWithProvider';
 import DrawerView from './';
-import { Provider } from 'react-redux';
-import configureMockStore from 'redux-mock-store';
 
-const mockStore = configureMockStore();
-const store = mockStore({});
+import initialBackgroundState from '../../../util/test/initial-background-state.json';
+import Engine from '../../../core/Engine';
+
+const mockedEngine = Engine;
+
+const mockInitialState = {
+  engine: {
+    backgroundState: {
+      ...initialBackgroundState,
+      PreferencesController: {
+        selectedAddress: '0x',
+        identities: {
+          '0x': { name: 'Account 1', address: '0x' },
+        },
+      },
+    },
+  },
+};
+
+jest.mock('../../../core/Engine', () => ({
+  init: () => mockedEngine.init({}),
+  getTotalFiatAccountBalance: () => ({ ethFiat: 0, tokenFiat: 0 }),
+  context: {
+    NetworkController: {
+      state: {
+        providerConfig: { chainId: '0x1' },
+      },
+    },
+  },
+}));
 
 describe('DrawerView', () => {
   it('should render correctly', () => {
-    const wrapper = shallow(
-      <Provider store={store}>
-        <DrawerView />
-      </Provider>,
+    const { toJSON } = renderWithProvider(
+      <DrawerView navigation={{ goBack: () => null }} />,
+      {
+        state: mockInitialState,
+      },
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

app/components/UI/EnableAutomaticSecurityChecksModal/EnableAutomaticSecurityChecksModal.test.tsx

@@ -1,19 +1,24 @@
-import React from 'react';
-import { shallow } from 'enzyme';
+import { renderScreen } from '../../../util/test/renderWithProvider';
 import { EnableAutomaticSecurityChecksModal } from './';
-import { Provider } from 'react-redux';
-import configureMockStore from 'redux-mock-store';
 
-const mockStore = configureMockStore();
-const store = mockStore({});
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: () => jest.fn(),
+}));
+
+jest.mock('react-native-device-info', () => ({
+  getBrand: () => 'some brand',
+  getBuildNumber: () => 'some build number',
+  getVersion: () => 'some version',
+}));
 
 describe('EnableAutomaticSecurityChecksModal', () => {
   it('should render correctly', () => {
-    const wrapper = shallow(
-      <Provider store={store}>
-        <EnableAutomaticSecurityChecksModal />
-      </Provider>,
+    const { toJSON } = renderScreen(
+      EnableAutomaticSecurityChecksModal,
+      { name: 'EnableAutomaticSecurityChecksModal' },
+      { state: {} },
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });