Estoy probando este componente Sidebar

 const Sidebar = () => { const { modalVisible, modalVisibleHandler } = useModalVisible(); return ( <div className="sidebar"> <Profile /> <Menu /> <WorkSpace all={true} /> <SidebarButton openModal={modalVisibleHandler} /> {modalVisible && ( <Portal> <TaskCreate /> </Portal> )} </div> ); };

Componente Mi Portal

 import { useEffect } from "react"; import ReactDOM from "react-dom"; const modalRoot = document.getElementById("modal-root"); export default function Portal({ children }: { children: any }) { const el = document.createElement("div"); useEffect(() => { if (modalRoot) { modalRoot.appendChild(el); } return () => { if (modalRoot) modalRoot.removeChild(el); }; }, [el]); return ReactDOM.createPortal(children, el); }

y el componente TaskCreate

 const TaskCreate = () => ( <div className="task-create task-view" id="task-create" > this component will open when user click button in Sidebar component </div> );

Tengo en el componente TaskCreate id="task-create" así que antes de que el usuario haga clic en "abrir modal" en la barra lateral, el componente TaskCreate con id "task-create" necesito probar que este id no es.toBeInTheDocument() y después de que el usuario haga clic en toBeInTheDocument ()

El problema es que Portal está conectado con la identificación "modal-root" que está en index.html y mi prueba no puede obtener este enlace.