chore: Migrate second batch of. unit tests away from enzyme (#8923)

## **Description**

The mobile platform team is pushing to reduce the usage of enzyme within
the application. This PR puts us one step closer to accomplishing this
goal. This batch includes the following files:

```
'app/components/UI/ActionView/index.test.tsx',
'app/components/UI/ActionModal/index.test.tsx',
'app/components/Views/confirmations/components/CustomNonce/index.test.tsx',
'app/components/Views/confirmations/SendFlow/ErrorMessage/index.test.tsx',
'app/components/Views/Settings/Contacts/AmbiguousAddressSheet/AmbiguousAddressSheet.test.tsx',
'app/components/Views/confirmations/components/Approval/ApprovalFlowLoader/index.test.tsx',
'app/components/UI/ImageIcon/index.test.tsx',,
'app/components/UI/FadeOutOverlay/index.test.tsx',
'app/components/UI/AssetIcon/index.test.tsx',
'app/components/UI/TimeEstimateInfoModal/index.test.tsx',
'app/components/UI/Tabs/index.test.tsx',
'app/components/UI/ModalNavbarTitle/index.test.tsx',
'app/components/Views/WalletConnectSessions/index.test.tsx',
'app/component-library/components/Tags/Tag/Tag.test.tsx',
'app/components/UI/SwitchCustomNetwork/index.test.tsx',
'app/component-library/components/Avatars/Avatar/variants/AvatarAccount/AvatarAccount.test.tsx',
'app/components/Views/ImportPrivateKey/index.test.tsx',
```

## **Related issues**

Fixes: #8806 

## **Manual testing steps**

`yarn test:unit`

## **Screenshots/Recordings**

<img width="630" alt="image"
src="https://github.com/MetaMask/metamask-mobile/assets/6249205/6fc4c0df-4e34-448d-b452-829a45bda650">

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've clearly explained what problem this PR is solving and how it
is solved.
- [X] 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.
- [X I’ve properly set the pull request status:
  - [X] 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**

- [ ] 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.

---------

Co-authored-by: OGPoyraz <omergoktugpoyraz@gmail.com>
Co-authored-by: Pedro Pablo Aste Kompen <wachunei@gmail.com>

app/component-library/components/Avatars/Avatar/variants/AvatarAccount/AvatarAccount.test.tsx

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

app/component-library/components/Avatars/Avatar/variants/AvatarAccount/__snapshots__/AvatarAccount.test.tsx.snap

@@ -1,12 +1,122 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AvatarAccount should render correctly 1`] = `
-<AvatarBase
-  size="32"
+<View
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "borderRadius": 16,
+      "height": 32,
+      "overflow": "hidden",
+      "width": 32,
+    }
+  }
 >
-  <Jazzicon
-    address="0x10e08af911f2e489480fb2855b24771745d0198b50f5c55891369844a8c57092"
-    size={32}
-  />
-</AvatarBase>
+  <View
+    style={
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "backgroundColor": "#F1D702",
+          "borderRadius": 16,
+          "height": 32,
+          "width": 32,
+        },
+        undefined,
+      ]
+    }
+  >
+    <RNSVGSvgView
+      bbHeight={32}
+      bbWidth={32}
+      focusable={false}
+      height={32}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          Object {
+            "flex": 0,
+            "height": 32,
+            "width": 32,
+          },
+        ]
+      }
+      width={32}
+    >
+      <RNSVGGroup>
+        <RNSVGRect
+          fill={4278401629}
+          height={32}
+          matrix={
+            Array [
+              0.9865721616069695,
+              0.16332596224162158,
+              -0.16332596224162158,
+              0.9865721616069695,
+              4.46613167496758,
+              -5.783427567500757,
+            ]
+          }
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+          width={32}
+          x={0}
+          y={0}
+        />
+        <RNSVGRect
+          fill={4293653248}
+          height={32}
+          matrix={
+            Array [
+              -0.9510565162951535,
+              0.3090169943749475,
+              -0.3090169943749475,
+              -0.9510565162951535,
+              56.99785298993899,
+              28.83420484922151,
+            ]
+          }
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+          width={32}
+          x={0}
+          y={0}
+        />
+        <RNSVGRect
+          fill={4291236897}
+          height={32}
+          matrix={
+            Array [
+              -0.9438009515832294,
+              0.3305143927132231,
+              -0.3305143927132231,
+              -0.9438009515832294,
+              58.82830600098727,
+              40.20612936020905,
+            ]
+          }
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+          width={32}
+          x={0}
+          y={0}
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
 `;

app/component-library/components/Tags/Tag/Tag.test.tsx

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

app/component-library/components/Tags/Tag/__snapshots__/Tag.test.tsx.snap

@@ -15,7 +15,17 @@ exports[`Tag should render correctly 1`] = `
   }
 >
   <Text
-    variant="sBodyMD"
+    accessibilityRole="text"
+    style={
+      Object {
+        "color": "#24272A",
+        "fontFamily": "Euclid Circular B",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "letterSpacing": 0,
+        "lineHeight": 22,
+      }
+    }
   >
     Imported
   </Text>

app/components/UI/ActionModal/__snapshots__/index.test.tsx.snap

@@ -1,45 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ActionModal should render correctly 1`] = `
-<ReactNativeModal
-  animationIn="slideInUp"
-  animationInTiming={300}
-  animationOut="slideOutDown"
-  animationOutTiming={300}
-  avoidKeyboard={true}
-  backdropColor="#00000099"
-  backdropOpacity={1}
-  backdropTransitionInTiming={300}
-  backdropTransitionOutTiming={300}
-  coverScreen={true}
-  customBackdrop={null}
+<Modal
+  animationType="none"
   deviceHeight={null}
   deviceWidth={null}
-  hasBackdrop={true}
+  hardwareAccelerated={false}
   hideModalContentWhileAnimating={false}
-  isVisible={false}
-  onBackButtonPress={[Function]}
   onBackdropPress={[Function]}
   onModalHide={[Function]}
-  onModalShow={[Function]}
   onModalWillHide={[Function]}
   onModalWillShow={[Function]}
+  onRequestClose={[Function]}
   panResponderThreshold={4}
-  propagateSwipe={false}
   scrollHorizontal={false}
   scrollOffset={0}
   scrollOffsetMax={0}
   scrollTo={null}
   statusBarTranslucent={false}
-  style={
-    Array [
-      Object {
-        "margin": 0,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
   supportedOrientations={
     Array [
       "portrait",
@@ -48,22 +26,7 @@ exports[`ActionModal should render correctly 1`] = `
   }
   swipeDirection="down"
   swipeThreshold={100}
-  useNativeDriver={false}
->
-  <ActionContent
-    cancelButtonDisabled={false}
-    cancelButtonMode="neutral"
-    cancelTestID=""
-    cancelText="Cancel"
-    childrenContainerStyle={null}
-    confirmButtonMode="warning"
-    confirmDisabled={false}
-    confirmTestID=""
-    confirmText="Confirm"
-    displayCancelButton={true}
-    displayConfirmButton={true}
-    viewContainerStyle={null}
-    viewWrapperStyle={null}
-  />
-</ReactNativeModal>
+  transparent={true}
+  visible={false}
+/>
 `;

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react-native';
 import ActionModal from './';
 
 describe('ActionModal', () => {
   it('should render correctly', () => {
-    const wrapper = shallow(<ActionModal />);
-    expect(wrapper).toMatchSnapshot();
+    const { toJSON } = render(<ActionModal />);
+    expect(toJSON()).toMatchSnapshot();
   });
 });