How to grab a container when wrapping render call into act?

Question

render utility of React Testing Library among other things returns a container, that can be used to manually query the constructed DOM snippet. However when render call is wrapped into an act utility (to avoid dreadful When testing, code that causes React state updates should be wrapped into act(...) warnings), return value is undefined. I find this not intuitive. Is it expected? How would one gain access to the container (and other utilities) when using act?

Answer 1

You can access all the destructured values by declaring them as a let variable outside your test and then using them in your render statement:

let debug;
let container;

it('renders', async () => {
    await act( async () => ({ container, debug } = render(<MyComponent />)));
    debug(container);
});