Migrate Enzyme tests to React Native Testing Library for BadgeBase an…

…d SheetBottom
Devin-Applications · Jul 18, 2024 · 0af669b · 0af669b
1 parent 96d6399
commit 0af669b
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 105 deletions.
diff --git a/app/component-library/components/Badges/Badge/foundation/BadgeBase/BadgeBase.test.tsx b/app/component-library/components/Badges/Badge/foundation/BadgeBase/BadgeBase.test.tsx
@@ -1,6 +1,6 @@
 // Third party dependencies.
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react-native';
 
 // External dependencies.
 import Tag from '../../../../Tags/Tag';
@@ -11,26 +11,24 @@ import { BADGE_BASE_TEST_ID } from './BadgeBase.constants';
 
 describe('BadgeBase - snapshots', () => {
   it('should render badge correctly', () => {
-    const wrapper = shallow(
+    const { toJSON } = render(
       <BadgeBase>
         <Tag label={'Children'} />
       </BadgeBase>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });
 
 describe('BadgeBase', () => {
   it('should render badge with the given content', () => {
-    const wrapper = shallow(
+    render(
       <BadgeBase>
         <Tag label={'Children'} />
       </BadgeBase>,
     );
 
-    const contentElement = wrapper.findWhere(
-      (node) => node.prop('testID') === BADGE_BASE_TEST_ID,
-    );
-    expect(contentElement.exists()).toBe(true);
+    const contentElement = screen.getByTestId(BADGE_BASE_TEST_ID);
+    expect(contentElement).toBeTruthy();
   });
 });
diff --git a/...ibrary/components/Badges/Badge/foundation/BadgeBase/__snapshots__/BadgeBase.test.tsx.snap b/...ibrary/components/Badges/Badge/foundation/BadgeBase/__snapshots__/BadgeBase.test.tsx.snap
@@ -5,8 +5,34 @@ exports[`BadgeBase - snapshots should render badge correctly 1`] = `
   style={{}}
   testID="badge-base"
 >
-  <Tag
-    label="Children"
-  />
+  <View
+    style={
+      {
+        "backgroundColor": "#ffffff",
+        "borderColor": "#bbc0c5",
+        "borderRadius": 10,
+        "borderWidth": 1,
+        "height": 24,
+        "justifyContent": "center",
+        "paddingHorizontal": 4,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#141618",
+          "fontFamily": "Euclid Circular B",
+          "fontSize": 14,
+          "fontWeight": "400",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+    >
+      Children
+    </Text>
+  </View>
 </View>
 `;
diff --git a/app/component-library/components/Sheet/SheetBottom/SheetBottom.test.tsx b/app/component-library/components/Sheet/SheetBottom/SheetBottom.test.tsx
@@ -1,6 +1,6 @@
 // Third party dependencies.
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react-native';
 import { Platform, View } from 'react-native';
 
 // Internal dependencies.
@@ -38,11 +38,11 @@ describe('SheetBottom', () => {
   const platforms = [PlatformEnum.iOS, PlatformEnum.Android];
   test.each(platforms)('should render correctly on %s', (platform) => {
     Platform.OS = platform;
-    const wrapper = shallow(
+    const { toJSON } = render(
       <SheetBottom>
         <View />
       </SheetBottom>,
     );
-    expect(wrapper).toMatchSnapshot(platform);
+    expect(toJSON()).toMatchSnapshot(platform);
   });
-});
+});
diff --git a/app/component-library/components/Sheet/SheetBottom/__snapshots__/SheetBottom.test.tsx.snap b/app/component-library/components/Sheet/SheetBottom/__snapshots__/SheetBottom.test.tsx.snap
@@ -1,9 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SheetBottom should render correctly on android: android 1`] = `
-<KeyboardAvoidingView
-  behavior="height"
-  keyboardVerticalOffset={8}
+<View
+  onLayout={[Function]}
   style={
     {
       "bottom": 0,
@@ -42,63 +41,65 @@ exports[`SheetBottom should render correctly on android: android 1`] = `
       }
     />
   </View>
-  <PanGestureHandler
-    enabled={true}
-    onGestureEvent={[Function]}
+  <View
+    collapsable={false}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onLayout={[Function]}
+    style={
+      [
+        {
+          "backgroundColor": "#ffffff",
+          "borderTopLeftRadius": 16,
+          "borderTopRightRadius": 16,
+          "maxHeight": 1083,
+          "overflow": "hidden",
+          "paddingBottom": 3,
+        },
+        {
+          "transform": [
+            {
+              "translateY": 1334,
+            },
+          ],
+        },
+      ]
+    }
   >
     <View
-      onLayout={[Function]}
       style={
-        [
-          {
-            "backgroundColor": "#ffffff",
-            "borderTopLeftRadius": 16,
-            "borderTopRightRadius": 16,
-            "maxHeight": 1083,
-            "overflow": "hidden",
-            "paddingBottom": 3,
-          },
-          {
-            "transform": [
-              {
-                "translateY": 1334,
-              },
-            ],
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          {
-            "alignSelf": "center",
-            "backgroundColor": "#bbc0c566",
-            "borderRadius": 2,
-            "height": 4,
-            "marginTop": 4,
-            "width": 40,
-          }
+        {
+          "alignSelf": "center",
+          "backgroundColor": "#bbc0c566",
+          "borderRadius": 2,
+          "height": 4,
+          "marginTop": 4,
+          "width": 40,
         }
-      />
-      <View />
-    </View>
-  </PanGestureHandler>
-</KeyboardAvoidingView>
+      }
+    />
+    <View />
+  </View>
+</View>
 `;
 
 exports[`SheetBottom should render correctly on ios: ios 1`] = `
-<KeyboardAvoidingView
-  behavior="padding"
-  keyboardVerticalOffset={-3}
+<View
+  onLayout={[Function]}
   style={
-    {
-      "bottom": 0,
-      "justifyContent": "flex-end",
-      "left": 0,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
-    }
+    [
+      {
+        "bottom": 0,
+        "justifyContent": "flex-end",
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      {
+        "paddingBottom": 0,
+      },
+    ]
   }
 >
   <View
@@ -128,46 +129,44 @@ exports[`SheetBottom should render correctly on ios: ios 1`] = `
       }
     />
   </View>
-  <PanGestureHandler
-    enabled={true}
-    onGestureEvent={[Function]}
+  <View
+    collapsable={false}
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onLayout={[Function]}
+    style={
+      [
+        {
+          "backgroundColor": "#ffffff",
+          "borderTopLeftRadius": 16,
+          "borderTopRightRadius": 16,
+          "maxHeight": 1083,
+          "overflow": "hidden",
+          "paddingBottom": 3,
+        },
+        {
+          "transform": [
+            {
+              "translateY": 1334,
+            },
+          ],
+        },
+      ]
+    }
   >
     <View
-      onLayout={[Function]}
       style={
-        [
-          {
-            "backgroundColor": "#ffffff",
-            "borderTopLeftRadius": 16,
-            "borderTopRightRadius": 16,
-            "maxHeight": 1083,
-            "overflow": "hidden",
-            "paddingBottom": 3,
-          },
-          {
-            "transform": [
-              {
-                "translateY": 1334,
-              },
-            ],
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          {
-            "alignSelf": "center",
-            "backgroundColor": "#bbc0c566",
-            "borderRadius": 2,
-            "height": 4,
-            "marginTop": 4,
-            "width": 40,
-          }
+        {
+          "alignSelf": "center",
+          "backgroundColor": "#bbc0c566",
+          "borderRadius": 2,
+          "height": 4,
+          "marginTop": 4,
+          "width": 40,
         }
-      />
-      <View />
-    </View>
-  </PanGestureHandler>
-</KeyboardAvoidingView>
+      }
+    />
+    <View />
+  </View>
+</View>
 `;