How can I mock render the headless UI component in react testing? - reactjs

Question

I'm writing a test to render my App component in the child there's a dashboard component where I'm using headless UI it working fine on localhost but getting undefined components on rendering on test how can I render them?
I'm trying to mock the render but no success yet it always rendering as undefined
App.test
import { render } from '#testing-library/react';
import { SnackbarProvider } from 'notistack';
import React from 'react';
import { Provider } from 'react-redux';
import { MemoryRouter } from 'react-router-dom';
import { applyMiddleware, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import App from './App';
// import { rootReducer } from './store';
jest.mock('#headlessui/react', () => ({
...jest.requireActual('#headlessui/react'),
}));
describe('', () => {
function renderApp(
store = {},
// createStore(
// rootReducer,
// {},
// composeWithDevTools(applyMiddleware(thunk))
// ),
props = {}
) {
return render(
<SnackbarProvider>
<MemoryRouter>
{/* <Provider store={store}> */}
<App />
{/* </Provider> */}
</MemoryRouter>
</SnackbarProvider>
);
}
test('test render app component', async () => {
renderApp();
});
});
Component failing on test
import React, { Fragment, useState, useMemo, useEffect } from 'react';
import { Menu, Transition } from '#headlessui/react';
import { ChevronDownIcon } from '#heroicons/react/solid';
// import { useSelector, useDispatch } from 'react-redux';
// import types from '../../store/actions/types';
// NOTE - for ref this is happening globally now
// and it has the global styles taken out of it
// so it doesn't mess with other stuff hopefully
// import './tailwind-style.scss'
function classNames(...classes) {
return classes.filter(Boolean).join(' ');
}
const AdvertSwitch = () => {
console.log({ Menu, Transition });
// const dispatch = useDispatch()
const advertisersFromState = [
{
id: 1,
name: 'advertiser-one',
},
{
id: 2,
name: 'advertiser-two',
},
];
const advertisers = advertisersFromState;
const selectedAdvertiser = advertisersFromState[0];
const handleAdvertSwitch = (advertiser) => {
console.log('handle advertiser switch', advertiser);
};
const showMultiple = true;
const Single = () => {
return (
<div className="">
<div>{selectedAdvertiser?.name ?? 'loading...'}</div>
</div>
);
};
const Multiple = () => {
// } else {
return (
<div className="w-full bg-gray-200 flex justify-end">
<Menu as="div" className="ml-3 z-10 relative inline-block text-left">
<div>
<Menu.Button className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-transparent ">
{selectedAdvertiser?.name ?? 'loading...'}
<ChevronDownIcon
className="-mr-1 ml-2 h-5 w-5"
aria-hidden="true"
/>
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
<hr className="h-1 p-0 m-0" />
<div className="py-1">
{advertisers.map((advertiser) => {
return (
<Menu.Item key={advertiser.id}>
{({ active }) => (
<div
className={classNames(
active
? 'bg-gray-100 text-gray-900'
: 'text-gray-700',
'block px-4 py-2 text-sm'
)}
onClick={() => handleAdvertSwitch(advertiser)}
>
{advertiser?.name ?? 'loading...'}
</div>
)}
</Menu.Item>
);
})}
</div>
</Menu.Items>
</Transition>
</Menu>
</div>
);
};
return (
<div className="mr-2">
{showMultiple && <Multiple />}
{!showMultiple && <Single />}
</div>
);
};
export default AdvertSwitch;
Failing Test Snap