Migrate tests from Enzyme to React Native Testing Library

app/component-library/components/Badges/Badge/foundation/BadgeBase/BadgeBase.test.tsx

@@ -1,6 +1,7 @@
 // Third party dependencies.
 import React from 'react';
-import { shallow } from 'enzyme';
+import { StyleSheet } from 'react-native';
+import { render, screen } from '@testing-library/react-native';
 
 // External dependencies.
 import Tag from '../../../../Tags/Tag';
@@ -9,28 +10,45 @@ import Tag from '../../../../Tags/Tag';
 import BadgeBase from './BadgeBase';
 import { BADGE_BASE_TEST_ID } from './BadgeBase.constants';
 
+const styles = StyleSheet.create({
+  badgeBase: { position: 'absolute', zIndex: 1 },
+});
+
 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(
-      <BadgeBase>
+    render(
+      <BadgeBase style={styles.badgeBase}>
         <Tag label={'Children'} />
       </BadgeBase>,
     );
 
-    const contentElement = wrapper.findWhere(
-      (node) => node.prop('testID') === BADGE_BASE_TEST_ID,
+    const contentElement = screen.getByTestId(BADGE_BASE_TEST_ID);
+    expect(contentElement).toBeTruthy();
+
+    // Check if the BadgeBase contains the Tag component
+    const tagElement = screen.getByText('Children');
+    expect(tagElement).toBeTruthy();
+
+    // Check that the BadgeBase does not have a specific accessibility role set
+    expect(contentElement.props.accessibilityRole).toBeUndefined();
+
+    // Check if the BadgeBase has the expected style properties
+    expect(contentElement.props.style).toEqual(
+      expect.objectContaining({
+        position: 'absolute',
+        zIndex: 1,
+      }),
     );
-    expect(contentElement.exists()).toBe(true);
   });
-});
+});

app/component-library/components/Sheet/SheetHeader/SheetHeader.test.tsx

@@ -1,6 +1,7 @@
 // Third party dependencies.
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react-native';
+import userEvent from '@testing-library/user-event';
 
 // Internal dependencies.
 import SheetHeader from './SheetHeader';
@@ -11,28 +12,40 @@ import {
 
 describe('SheetHeader', () => {
   it('should render correctly', () => {
-    const wrapper = shallow(<SheetHeader title={'Title'} />);
-    expect(wrapper).toMatchSnapshot();
+    const { toJSON } = render(<SheetHeader title={'Title'} />);
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  it('should render back button', () => {
-    const wrapper = shallow(<SheetHeader onBack={jest.fn} title={'Title'} />);
-    const backButton = wrapper.findWhere(
-      (node) => node.prop('testID') === SHEET_HEADER_BACK_BUTTON_ID,
-    );
-    expect(backButton.exists()).toBe(true);
+  it('should render back button and title', () => {
+    render(<SheetHeader onBack={jest.fn} title={'Title'} />);
+    const backButton = screen.getByTestId(SHEET_HEADER_BACK_BUTTON_ID);
+    expect(backButton).toBeTruthy();
+    expect(backButton.props.accessibilityRole).toBe('button');
+    expect(screen.getByText('Title')).toBeTruthy();
   });
 
-  it('should render action button', () => {
-    const wrapper = shallow(
+  it('should render action button and title', async () => {
+    const onPressMock = jest.fn();
+    render(
       <SheetHeader
         title={'Title'}
-        actionButtonOptions={{ label: 'Action', onPress: jest.fn }}
+        actionButtonOptions={{ label: 'Action', onPress: onPressMock }}
       />,
     );
-    const actionButton = wrapper.findWhere(
-      (node) => node.prop('testID') === SHEET_HEADER_ACTION_BUTTON_ID,
-    );
-    expect(actionButton.exists()).toBe(true);
+    const actionButton = screen.getByTestId(SHEET_HEADER_ACTION_BUTTON_ID);
+    expect(actionButton).toBeTruthy();
+    expect(screen.getByText('Action')).toBeTruthy();
+    expect(screen.getByText('Title')).toBeTruthy();
+
+    const user = userEvent.setup();
+    await user.click(actionButton);
+    expect(onPressMock).toHaveBeenCalled();
+  });
+
+  it('should render correctly without back button or action button', () => {
+    render(<SheetHeader title={'Title'} />);
+    expect(screen.getByText('Title')).toBeTruthy();
+    expect(screen.queryByTestId(SHEET_HEADER_BACK_BUTTON_ID)).toBeNull();
+    expect(screen.queryByTestId(SHEET_HEADER_ACTION_BUTTON_ID)).toBeNull();
   });
 });