Tengo un componente que tiene un Async React Select, donde el mensaje de carga predeterminado es Loading... y en mi archivo de prueba, estoy usando la función loadOptions para buscar las etiquetas desplegables, en esa función hay un setTimeout(( ) => {}, 1000) por lo que durante 1 segundo mi componente muestra un mensaje de carga. No, el problema al que me enfrento es que cada vez que trato de probar ese componente, aparece el mensaje de error "no se pudo encontrar un elemento" (cuando intento screen.debug , imprime el mensaje de carga en el dom ) y si lo intento para poner mis declaraciones expect en un setTimeout y waitFor, se salta.

mi salida screen.debug - [![mi salida screen.debug][1]][1]

Mi archivo de prueba -

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

Mi componente -

 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} ... /> ... )}

¿Cómo puedo continuar con este tipo de escenario [1]: https://i.stack.imgur.com/nXXA7.png