Jest how to test react component which partial elements are lazy load? - reactjs

Question

The code below comes from https://headlessui.com/react/popover.
As you can see, it uses a function to render Popover.Button.
In enzyme, no matter use shallow or mount, the result tree without elements wrapped by React.Fragment.
So I want to ask is there a way to render the whole dom in enzyme or #testing-library/react
export default function Example() {
return (
<div className="fixed top-16 w-full max-w-sm px-4">
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={`
${open ? '' : 'text-opacity-90'}
group inline-flex items-center rounded-md bg-orange-700 px-3 py-2 text-base font-medium text-white hover:text-opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}
>
<span>Solutions</span>
<ChevronDownIcon
className={`${open ? '' : 'text-opacity-70'}
ml-2 h-5 w-5 text-orange-300 transition duration-150 ease-in-out group-hover:text-opacity-80`}
aria-hidden="true"
/>
</Popover.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-sm -translate-x-1/2 transform px-4 sm:px-0 lg:max-w-3xl">
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
<div className="relative grid gap-8 bg-white p-7 lg:grid-cols-2">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 flex items-center rounded-lg p-2 transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
>
<div className="flex h-10 w-10 shrink-0 items-center justify-center text-white sm:h-12 sm:w-12">
<item.icon aria-hidden="true" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-900">
{item.name}
</p>
<p className="text-sm text-gray-500">
{item.description}
</p>
</div>
</a>
))}
</div>
<div className="bg-gray-50 p-4">
<a
href="##"
className="flow-root rounded-md px-2 py-2 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
>
<span className="flex items-center">
<span className="text-sm font-medium text-gray-900">
Documentation
</span>
</span>
<span className="block text-sm text-gray-500">
Start integrating products and tools
</span>
</a>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
)
}