[unit-testing] Fixed the console errors in jest

src/packages/react-native-material-elements/__test__/Accordion.test.tsx

@@ -9,12 +9,17 @@ describe('Accordion Component', () => {
   const mockRef = React.createRef<View>();
 
   beforeEach(() => {
+    jest.useFakeTimers();
     jest.clearAllMocks();
   });
 
-  it('should render correctly', async () => {
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
+  it('should render correctly', () => {
     const { toJSON } = render(<Accordion />);
-    await waitFor(() => {
+    waitFor(() => {
       expect(toJSON()).toMatchSnapshot();
     });
   });
@@ -75,9 +80,14 @@ describe('AccordionSummary Component', () => {
   const mockTestId = 'mock-accordion-summary-test-id';
 
   beforeEach(() => {
+    jest.useFakeTimers();
     jest.clearAllMocks();
   });
 
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
   it('should render correctly', async () => {
     const { toJSON } = render(<AccordionSummary />);
     await waitFor(() => {
@@ -136,9 +146,14 @@ describe('AccordionDetails Component', () => {
   const TestChild = (props: any) => <Text {...props}>Test Child</Text>;
 
   beforeEach(() => {
+    jest.useFakeTimers();
     jest.clearAllMocks();
   });
 
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
   it('should render accordion details correctly', () => {
     const { toJSON } = render(<AccordionDetails />);
     expect(toJSON()).toMatchSnapshot();

src/packages/react-native-material-elements/__test__/Badge.test.tsx

@@ -36,10 +36,15 @@ describe('Badge', () => {
     },
   };
 
-  beforeAll(() => {
+  beforeEach(() => {
+    jest.useFakeTimers();
     jest.clearAllMocks();
   });
 
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
   it('should render correctly', async () => {
     const { toJSON } = render(<Badge />);
     await waitFor(() => {

src/packages/react-native-material-elements/__test__/Chip.test.tsx

@@ -17,6 +17,9 @@ describe('Chip Component', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+  });
+
+  afterEach(() => {
     jest.clearAllTimers();
   });
 

src/packages/react-native-material-elements/__test__/Dialog.test.tsx

@@ -16,6 +16,17 @@ import { TextVariation, TextVariationThemeConfig } from '../src/types';
 import { render, waitFor } from './test-utils';
 
 describe('Dialog', () => {
+  let consoleErrorSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
   it('should render correctly with default props', () => {
     const { toJSON } = render(<Dialog />);
     expect(toJSON()).toMatchSnapshot();
@@ -33,6 +44,17 @@ describe('Dialog', () => {
 });
 
 describe('DialogActions', () => {
+  let consoleErrorSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
   it('should render correctly with default props', () => {
     const { toJSON } = render(<DialogActions />);
     expect(toJSON()).toMatchSnapshot();
@@ -85,10 +107,17 @@ const textTests = (Component: any, componentName: string) => {
       h6: { fontSize: 13 },
     };
 
+    let consoleErrorSpy: jest.SpyInstance;
+
     beforeEach(() => {
+      consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
       jest.clearAllMocks();
     });
 
+    afterEach(() => {
+      consoleErrorSpy.mockRestore();
+    });
+
     it('should match the snapshot with default props', async () => {
       const { toJSON } = render(<Component>Mock</Component>);
       await waitFor(() => {

src/packages/react-native-material-elements/__test__/DropDown.test.tsx

@@ -8,7 +8,11 @@ describe('DropDown Component', () => {
   const mockInputTestId = 'input-test-id';
 
   beforeEach(() => {
+    jest.useFakeTimers();
     jest.clearAllMocks();
+  });
+
+  afterEach(() => {
     jest.clearAllTimers();
   });
 
@@ -113,9 +117,14 @@ describe('DropDownListContainer component', () => {
   const mockOnCloseHandler = jest.fn();
 
   beforeEach(() => {
+    jest.useFakeTimers();
     jest.clearAllMocks();
   });
 
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
   it('should render properly with default props', () => {
     const { toJSON } = render(
       <DropDownListContainer
@@ -245,7 +254,6 @@ describe('DropDownListContainer component', () => {
   });
 
   it('should call the onClose function when press on item', () => {
-    jest.useFakeTimers();
     const { getByText } = render(
       <DropDownListContainer
         inputLayoutRectangle={{ x: 0, y: 0, width: 0, height: 0 }}

src/packages/react-native-material-elements/__test__/List.test.tsx

@@ -15,6 +15,9 @@ describe('List Component', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+  });
+
+  afterEach(() => {
     jest.clearAllTimers();
   });
 

src/packages/react-native-material-elements/__test__/Pagination.test.tsx

@@ -13,7 +13,11 @@ describe('Pagination Component', () => {
   const mockOnPageChange = jest.fn();
 
   beforeEach(() => {
+    jest.useFakeTimers();
     jest.clearAllMocks();
+  });
+
+  afterEach(() => {
     jest.clearAllTimers();
   });
 

src/packages/react-native-material-elements/__test__/ProgressBar.test.tsx

@@ -3,13 +3,16 @@ import { render } from './test-utils';
 
 describe('ProgressBar component', () => {
   beforeEach(() => {
+    jest.useFakeTimers();
     jest.clearAllMocks();
   });
 
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
   it('should render correctly with default props', () => {
-    jest.useFakeTimers();
     const { toJSON } = render(<ProgressBar progress={0.2} />);
     expect(toJSON()).toMatchSnapshot();
-    jest.clearAllTimers();
   });
 });

src/packages/react-native-material-elements/__test__/Radio.test.tsx

@@ -11,9 +11,14 @@ describe('Radio Component', () => {
   const mockRef = React.createRef<View>();
 
   beforeEach(() => {
+    jest.useFakeTimers();
     jest.clearAllMocks();
   });
 
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
   it('should render correctly', async () => {
     const { toJSON } = render(<Radio />);
     await waitFor(() => {
@@ -149,11 +154,9 @@ describe('Radio Component', () => {
   });
 
   it('should render active radio item when radio is active', () => {
-    jest.useFakeTimers();
     const { getByTestId } = render(<Radio isActive />);
     const radioItem = getByTestId('radio-item-test-id');
     expect(radioItem).toBeDefined();
-    jest.clearAllTimers();
   });
 });
 

src/packages/react-native-material-elements/__test__/SegmentedControl.test.tsx

@@ -10,9 +10,14 @@ describe('SegmentedControl component', () => {
   const mockOnPress = jest.fn();
 
   beforeEach(() => {
+    jest.useFakeTimers();
     jest.clearAllMocks();
   });
 
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
   it('should render correctly with default props', () => {
     const { toJSON } = render(<SegmentedControl data={['']} selectedIndex={0} />);
     expect(toJSON()).toMatchSnapshot();
@@ -122,9 +127,14 @@ describe('SegmentedControlItem component', () => {
   const mockOnPress = jest.fn();
 
   beforeEach(() => {
+    jest.useFakeTimers();
     jest.clearAllMocks();
   });
 
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
   it('should render correctly with default props', () => {
     const { toJSON } = render(<SegmentedControlItem data={''} index={0} />);
     expect(toJSON()).toMatchSnapshot();

src/packages/react-native-material-elements/__test__/Skeleton.test.tsx

@@ -7,11 +7,13 @@ describe('Skeleton component', () => {
   let colorSchemeSpy: jest.SpyInstance;
 
   beforeEach(() => {
+    jest.useFakeTimers();
     jest.clearAllMocks();
     colorSchemeSpy = jest.spyOn(require('react-native'), 'useColorScheme');
   });
 
   afterEach(() => {
+    jest.clearAllMocks();
     colorSchemeSpy.mockRestore();
   });
 

src/packages/react-native-material-elements/__test__/Switch.test.tsx

@@ -22,7 +22,7 @@ import {
   SWITCH_THUMB_WIDTH_MEDIUM,
   SWITCH_THUMB_WIDTH_SMALL,
 } from '../src';
-import { fireEvent, render } from './test-utils';
+import { fireEvent, act, render } from './test-utils';
 
 describe('Switch Component', () => {
   const switchMockTestId = 'switch-test-id';
@@ -31,6 +31,11 @@ describe('Switch Component', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
   });
 
   it('should match the snapshot with default props', () => {
@@ -50,11 +55,11 @@ describe('Switch Component', () => {
     expect(switchComponent).toBeTruthy();
   });
 
-  it('should call onToggle when switch is toggled', async () => {
+  it('should call onToggle when switch is toggled', () => {
     const onToggleMock = jest.fn();
     const { getByTestId } = render(<Switch testID={switchMockTestId} onToggle={onToggleMock} />);
-    const switchComponent = getByTestId(switchMockTestId);
 
+    const switchComponent = getByTestId(switchMockTestId);
     fireEvent.press(switchComponent);
 
     expect(onToggleMock).toHaveBeenCalledTimes(1);

src/packages/react-native-material-elements/__test__/Text.test.tsx

@@ -19,10 +19,17 @@ describe('Text Component', () => {
     h6: { fontSize: 13 },
   };
 
+  let consoleErrorSpy: jest.SpyInstance;
+
   beforeEach(() => {
+    consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
     jest.clearAllMocks();
   });
 
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
   it('should match the snapshot with default props', async () => {
     const { toJSON } = render(<Text>Mock</Text>);
     await waitFor(() => {

src/packages/react-native-material-elements/__test__/TextField.test.tsx

@@ -23,6 +23,10 @@ describe('TextField Component', () => {
     jest.clearAllMocks();
   });
 
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
   it('should render correctly', async () => {
     const { toJSON } = render(<TextField />);
     await waitFor(() => {
@@ -43,21 +47,17 @@ describe('TextField Component', () => {
   });
 
   it("should't render the animated placeholder when passed the hide label prop", () => {
-    jest.useFakeTimers();
     const { queryByTestId } = render(<TextField hideLabel inputLabelProps={{ testID: mockTextFiledInputLabelTestId }} />);
 
     expect(queryByTestId(mockTextFiledInputLabelTestId)).toBeNull();
-    jest.useRealTimers();
   });
 
   it('should change the default placeholder when passed the placeholder prop', () => {
-    jest.useFakeTimers();
     const { getByPlaceholderText } = render(<TextField hideLabel placeholder={mockTextFiledPlaceholder} />);
 
     const placeHolderElem = getByPlaceholderText(mockTextFiledPlaceholder);
     expect(placeHolderElem).toBeDefined();
     expect(placeHolderElem.props.placeholder).toEqual(mockTextFiledPlaceholder);
-    jest.useRealTimers();
   });
 
   it('should apply the dynamic sx styles', () => {
@@ -91,14 +91,12 @@ describe('TextField Component', () => {
   });
 
   it('should change the input placeholder color', () => {
-    jest.useFakeTimers();
     const { getByPlaceholderText } = render(
       <TextField hideLabel placeholder={mockTextFiledPlaceholder} placeholderTextColor={'red'} />,
     );
 
     const placeholder = getByPlaceholderText(mockTextFiledPlaceholder);
     expect(placeholder.props.placeholderTextColor).toEqual('red');
-    jest.useRealTimers();
   });
 
   it('should handle the focus event', () => {