How to wait for a reactive vue component like tooltip ?

How to wait for a reactive vue component like tooltip ? That`s a tricky one, especially while everything is rendered dynamically and we really need to know where to look… or how to wait…

Testing asynchronouse components

Vite waitFor	Wait for the callback to execute successfully. If the callback throws an error or returns a rejected promise it will continue to wait until it succeeds or times out.
Vite waitUntil	This is similar to vi.waitFor, but if the callback throws any errors, execution is immediately interrupted and an error message is received. If the callback returns falsy value, the next check will continue until truthy value is returned. This is useful when you need to wait for something to exist before taking the next step.

Unfortunetly for a tooltip this will not help cause this is not a promise, it`s just a delay to show the proper information and run the @show method. So we have to wait anyway.

To check the proper teleported HTML part you can use, it wil not always help and fire the delegated event 🙁

document.body.innerHTML

document.body.outerHTML

When i use vi.waitUntil this actually waits until the block is executed. What i had to do is to make it wait for at leasy 500 ms so the tooltip will appear.

When running vue test utils we have something like vi.waitUntil everything is happening in a blink of an eye.

Below code will add a simple delay and it will wait for the tooltip to launch and send a proper event.

The tricky party

Below code will always fail, this help me to just wait until everything on the pages will render accordingly. This is not the best case scenario but as a workaround when you have race condition and multiple different elements it just helps to save sanity 🙂 Especially when You are a backend developer working on frontend…

async function waitForRender(timeInMs: number) { 
await vi.waitUntil(() => {}, {timeout:timeInMs})catch(() => {}); 			}