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
index 97e01db987a..a79a940e655 100644
--- 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,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(
,
);
- expect(wrapper).toMatchSnapshot();
+ expect(toJSON()).toMatchSnapshot();
});
});
describe('BadgeBase', () => {
it('should render badge with the given content', () => {
- const wrapper = shallow(
-
+ render(
+
,
);
- 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);
});
-});
+});
\ No newline at end of file
diff --git a/app/component-library/components/Sheet/SheetHeader/SheetHeader.test.tsx b/app/component-library/components/Sheet/SheetHeader/SheetHeader.test.tsx
index eb3bda148dc..233a3ab30fc 100644
--- a/app/component-library/components/Sheet/SheetHeader/SheetHeader.test.tsx
+++ b/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();
- expect(wrapper).toMatchSnapshot();
+ const { toJSON } = render();
+ expect(toJSON()).toMatchSnapshot();
});
- it('should render back button', () => {
- const wrapper = shallow();
- 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();
+ 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(
,
);
- 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();
+ expect(screen.getByText('Title')).toBeTruthy();
+ expect(screen.queryByTestId(SHEET_HEADER_BACK_BUTTON_ID)).toBeNull();
+ expect(screen.queryByTestId(SHEET_HEADER_ACTION_BUTTON_ID)).toBeNull();
});
});