I have a component that has an Async React Select in it, where the default loading message is Loading... and In my test file, I'm using loadOptions function to fetch the dropdown labels, in that function there is a setTimeout(() => {}, 1000) due to which for 1 sec my component displays loading message. No the problem I'm facing is whenever I try to test that component, it gives me the error message couldn't find an element (when I try to screen.debug, it prints the loading message in the dom) and If I try to put my expect statements into a setTimeout and waitFor, its getting skipped.

my screen.debug output - [![my screen.debug output][1]][1]

My Test file -

it('...', () => {
   ....
const inputField = container.querySelector('input')
    
    act(() => {
      fireEvent.focus(inputField);
      fireEvent.keyDown(inputField, { key: 'ArrowDown', code: 40 });
    })
    screen.debug(container,Infinity)
   ...
}(

My Component -

const MyComp = () => {
const loadOptions = async () => {
   await setTimeout(() => {
   }, 1000) // just for the sake of displaying loader message, cannot be removed
   ...other data fetching logic
}
...
return
(
...
<Select
   loadOptions = {loadOptions}
   ...
   />
...
)}

How can I proceed further with this kind of scenario [1]: https://i.stack.imgur.com/nXXA7.png