feat: add renderAsync to fix React-Aria useLayoutEffect flushing (#1339)

[Ayoub-glitsh]

Problem

Closes #1339

Components like React-Aria ComboBox set ARIA attributes (role, aria-expanded, aria-label, etc.) inside useLayoutEffect, and often trigger a setState there — causing a second render cycle. The synchronous render() wraps the initial paint in act() but does not guarantee that the useLayoutEffect → setState → re-render chain completes before returning.

This makes the DOM appear half-initialised in consuming-application tests:

• getByRole('combobox') throws because role hasn't been set yet
• aria-* attributes are missing
• userEvent.type() has no effect because the input isn't fully wired up

The component works correctly at runtime and in the component library's own tests, but breaks in any consuming app's test suite.

Solution

Add a new renderAsync utility that uses await act(async () => {...}) to fully drain the microtask queue and all pending useLayoutEffect cycles before resolving.

Usage

// Before (broken with React-Aria):
const { getByPlaceholderText } = render(<MyComboBox />)
const input = getByPlaceholderText('Type to Start Searching...')
// role / aria-* attributes not set yet ❌

// After (fixed):
const { getByRole } = await renderAsync(<MyComboBox />)
const input = getByRole('combobox') // fully initialised ✓
await userEvent.type(input, 'racc')
await waitFor(() => expect(fetchMock).toHaveBeenCalledWith('/api/MYAPI?term=racc', ...))

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ec4aa85:

Sandbox	Source
react-testing-library-examples	Configuration