fix: failing test

Author: vanGalilea

__tests__/ListWithFetch.test.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import {cleanup, render, screen} from '@testing-library/react-native';
+import {
+  cleanup,
+  render,
+  screen,
+  waitForElementToBeRemoved,
+} from '@testing-library/react-native';
 import ListWithFetch from '../src/components/ListWithFetch';
 import {server} from '../src/test/mocks/server';
 import {rest} from 'msw';
@@ -15,16 +20,19 @@ test('displays images from the server', async () => {
 
   // Loader is initially visible
   expect(screen.getByLabelText(/loader/i)).toBeOnTheScreen();
-
+  await waitForElementToBeRemoved(() => screen.getByLabelText(/loader/i), {
+    timeout: 1500,
+  });
   // Verify that users are fetched and rendered
   expect(await screen.findAllByLabelText(/user-container/i)).toHaveLength(10);
 
   // Verifying that the loader is no longer visible
   // There are 2 ways to verify that a component is not in the UI tree
-  // 1. Use getBy* methods and expect them to throw an error with a corresponding message
-  // 2. Use queryBy* methods and expect them to return null (See the next expect statement)
+  // 1. Use waitForElementToBeRemoved to wait for the element to be removed from the DOM
+  // 2. Use getBy* methods and expect them to throw an error with a corresponding message
+  // 3. Use queryBy* methods and expect them to return null (See the next expect statement)
   expect(() => screen.getByLabelText(/loader/i)).toThrow(
-    'Unable to find an element with accessibilityLabel: /loader/i',
+    'Unable to find an element with accessibility label: /loader/i',
   );
 
   // Verifying that there are no errors