How to wait for all elements to be rendered in react jest?

General
1

I have a component in which I am using some elements from a react module. One of these elements is a Select, a dropdown with Option elements, that builds and runs successfully. In my jest test I am clicking the select element and then looking for the option I am interested on, to click it as well… but never shows up. This is the code:

        const purposeSelect = screen.getByLabelText("purpose-select");
        await act(async () => userEvent.click(purposeSelect));

        const option = screen.getByTitle("Single VM");
        console.log("Done selecting purpose");

What I observe in the production run is that: 1. the options show up in the code after I have clicked in the dropdown element, and 2. the block with the options is at the same level that the dropdown itself (in case this detail matters).

I have the theory that the problem is that the dropdown is not properly clicked, so jest is not able to find the “Single VM” element because… is just not there yet (The error is “Unable to find an element with the title: Single VM.” and in the HTML code dumped, the element is not there).

Does anybody know how to wait for all the actions to finish or what might I be doing wrong?