chore: 8618 reduce enzyme usage in unit test by 25

app/actions/onboarding/index.ts

@@ -14,7 +14,9 @@ interface ClearEventsAction {
 
 export type OnboardingActionTypes = SaveEventAction | ClearEventsAction;
 
-export function saveOnboardingEvent(eventArgs: [IMetaMetricsEvent]): SaveEventAction {
+export function saveOnboardingEvent(
+  eventArgs: [IMetaMetricsEvent],
+): SaveEventAction {
   return {
     type: SAVE_EVENT,
     event: eventArgs,

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

@@ -1,6 +1,6 @@
 // Third party dependencies.
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react-native';
 
 // External dependencies.
 import AvatarIcon from './AvatarIcon';
@@ -10,7 +10,7 @@ import { SAMPLE_AVATARICON_PROPS } from './AvatarIcon.constants';
 
 describe('AvatarIcon', () => {
   it('should render correctly', () => {
-    const wrapper = shallow(<AvatarIcon {...SAMPLE_AVATARICON_PROPS} />);
-    expect(wrapper).toMatchSnapshot();
+    const { toJSON } = render(<AvatarIcon {...SAMPLE_AVATARICON_PROPS} />);
+    expect(toJSON()).toMatchSnapshot();
   });
 });

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

@@ -1,20 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AvatarIcon should render correctly 1`] = `
-<AvatarBase
-  size="32"
+<View
   style={
     {
       "alignItems": "center",
       "backgroundColor": "#ffffff",
+      "borderRadius": 16,
+      "height": 32,
       "justifyContent": "center",
+      "overflow": "hidden",
+      "width": 32,
     }
   }
 >
-  <Icon
-    color="Default"
+  <SvgMock
+    color="#141618"
+    height={20}
     name="AddSquare"
-    size="20"
+    style={
+      {
+        "height": 20,
+        "width": 20,
+      }
+    }
+    width={20}
   />
-</AvatarBase>
+</View>
 `;

app/component-library/components/Buttons/Button/variants/ButtonLink/ButtonLink.test.tsx

@@ -1,15 +1,13 @@
 // Third party dependencies.
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react-native';
 
 // Internal dependencies.
 import ButtonLink from './ButtonLink';
 
-describe('Link', () => {
+describe('ButtonLink', () => {
   it('should render correctly', () => {
-    const wrapper = shallow(
-      <ButtonLink onPress={jest.fn} label={`I'm a Link!`} />,
-    );
-    expect(wrapper).toMatchSnapshot();
+    render(<ButtonLink onPress={jest.fn()} label="I'm a Link!" />);
+    expect(screen.toJSON()).toMatchSnapshot();
   });
 });

app/component-library/components/Buttons/Button/variants/ButtonLink/__snapshots__/ButtonLink.test.tsx.snap

@@ -1,27 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Link should render correctly 1`] = `
-<Fragment>
+exports[`ButtonLink should render correctly 1`] = `
+<Text
+  accessibilityRole="link"
+  accessible={true}
+  onPress={[MockFunction]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  style={
+    {
+      "backgroundColor": "transparent",
+      "color": "#141618",
+      "fontFamily": "EuclidCircularB-Regular",
+      "fontSize": 14,
+      "fontWeight": "400",
+      "letterSpacing": 0,
+      "lineHeight": 22,
+    }
+  }
+  suppressHighlighting={true}
+>
   <Text
-    accessibilityRole="link"
-    accessible={true}
-    onPress={[Function]}
-    onPressIn={[Function]}
-    onPressOut={[Function]}
+    accessibilityRole="text"
     style={
       {
-        "backgroundColor": "transparent",
+        "color": "#0376c9",
+        "fontFamily": "EuclidCircularB-Regular",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "letterSpacing": 0,
+        "lineHeight": 22,
       }
     }
-    suppressHighlighting={true}
   >
-    <Text
-      color="Primary"
-      style={false}
-      variant="sBodyMD"
-    >
-      I'm a Link!
-    </Text>
+    I'm a Link!
   </Text>
-</Fragment>
+</Text>
 `;

app/components/Approvals/ApprovalModal/ApprovalModal.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react-native';
 import ApprovalModal from './ApprovalModal';
 
 describe('ApprovalModal', () => {
@@ -8,11 +8,11 @@ describe('ApprovalModal', () => {
   });
 
   it('renders', () => {
-    const wrapper = shallow(
+    const { toJSON } = render(
       <ApprovalModal isVisible onCancel={() => undefined}>
         <div>test</div>
       </ApprovalModal>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

app/components/Approvals/ApprovalModal/__snapshots__/ApprovalModal.test.tsx.snap

@@ -1,43 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ApprovalModal renders 1`] = `
-<ReactNativeModal
-  animationIn="slideInUp"
-  animationInTiming={600}
-  animationOut="slideOutDown"
-  animationOutTiming={600}
-  avoidKeyboard={false}
-  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={true}
-  onBackButtonPress={[Function]}
   onBackdropPress={[Function]}
   onModalHide={[Function]}
-  onModalShow={[Function]}
   onModalWillHide={[Function]}
   onModalWillShow={[Function]}
+  onRequestClose={[Function]}
   onSwipeComplete={[Function]}
   panResponderThreshold={4}
-  propagateSwipe={true}
   scrollHorizontal={false}
   scrollOffset={0}
   scrollOffsetMax={0}
   scrollTo={null}
   statusBarTranslucent={false}
-  style={
-    {
-      "justifyContent": "flex-end",
-      "margin": 0,
-    }
-  }
   supportedOrientations={
     [
       "portrait",
@@ -46,10 +27,98 @@ exports[`ApprovalModal renders 1`] = `
   }
   swipeDirection="down"
   swipeThreshold={100}
-  useNativeDriver={false}
+  transparent={true}
+  visible={true}
 >
-  <div>
-    test
-  </div>
-</ReactNativeModal>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "backgroundColor": "#00000099",
+        "bottom": 0,
+        "height": 1334,
+        "left": 0,
+        "opacity": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "width": 750,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    deviceHeight={null}
+    deviceWidth={null}
+    hideModalContentWhileAnimating={false}
+    onBackdropPress={[Function]}
+    onModalHide={[Function]}
+    onModalWillHide={[Function]}
+    onModalWillShow={[Function]}
+    onMoveShouldSetResponder={[Function]}
+    onMoveShouldSetResponderCapture={[Function]}
+    onResponderEnd={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderReject={[Function]}
+    onResponderRelease={[Function]}
+    onResponderStart={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    onSwipeComplete={[Function]}
+    panResponderThreshold={4}
+    pointerEvents="box-none"
+    scrollHorizontal={false}
+    scrollOffset={0}
+    scrollOffsetMax={0}
+    scrollTo={null}
+    statusBarTranslucent={false}
+    style={
+      {
+        "flex": 1,
+        "justifyContent": "flex-end",
+        "left": 0,
+        "margin": 0,
+        "top": 0,
+        "transform": [
+          {
+            "translateY": 1334,
+          },
+        ],
+      }
+    }
+    supportedOrientations={
+      [
+        "portrait",
+        "landscape",
+      ]
+    }
+    swipeDirection="down"
+    swipeThreshold={100}
+  >
+    <div>
+      test
+    </div>
+  </View>
+</Modal>
 `;

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

@@ -1,28 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AnimatedTransactionModal should render correctly 1`] = `
-<ForwardRef
+<View
+  collapsable={false}
   onLayout={[Function]}
   style={
-    [
-      {
-        "backgroundColor": "#ffffff",
-        "borderTopLeftRadius": 20,
-        "borderTopRightRadius": 20,
-        "minHeight": 200,
-        "paddingBottom": 24,
-      },
-      {
-        "transform": [
-          {
-            "translateY": 70,
-          },
-        ],
-      },
-      {
-        "height": 470,
-      },
-    ]
+    {
+      "backgroundColor": "white",
+      "borderTopLeftRadius": 20,
+      "borderTopRightRadius": 20,
+      "height": 470,
+      "minHeight": 200,
+      "paddingBottom": 24,
+      "transform": [
+        {
+          "translateY": 70,
+        },
+      ],
+    }
   }
 />
 `;

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

@@ -1,15 +1,23 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react-native';
 import AnimatedTransactionModal from './';
 import { View } from 'react-native';
+import { ThemeContext } from '../../../util/theme';
+
+const mockTheme = {
+  colors: { background: { default: 'white' } },
+  themeAppearance: 'light',
+};
 
 describe('AnimatedTransactionModal', () => {
   it('should render correctly', () => {
-    const wrapper = shallow(
-      <AnimatedTransactionModal>
-        <View />
-      </AnimatedTransactionModal>,
+    render(
+      <ThemeContext.Provider value={mockTheme}>
+        <AnimatedTransactionModal>
+          <View />
+        </AnimatedTransactionModal>
+      </ThemeContext.Provider>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.toJSON()).toMatchSnapshot();
   });
 });