我正在尝试测试一个应该打开其模态的组件。模态是这个组件的一部分，但它是用createPortal（）呈现的。我首先检查文档中是否存在模态，然后单击按钮，如果它出现了，但测试失败。
组件：

const [openModal, setOpenModal] = useState(false);

function Component() {
  return (
    <div>
      <button onClick={() => setOpenModal(true)}>Open Modal</button>
      <Modal open={openModal}/>
    </div>
  )
}

模态：

const Modal = ({ open, children }) => {
  return createPortal(
    <div style={{display: open ? "block" : "none"}} data-testid="modal">
      {children}
    </div>,
    document.getElementById("modals")
  );
};

测试：

test("component that opens modal", async () => {
  render(<Component />);
  const button = screen.getByText("Open Modal");
  const modal = screen.queryByTestId("modal");
  expect(modal).not.toBeInTheDocument();
  fireEvent.click(button);
  await waitFor(() => expect(modal).toBeInTheDocument()); // Fails
});

我试着用await waitFor(() => expect(modal).toBeInTheDocument())和标准expect(modal).toBeInTheDocument())测试它。我也试着在没有portal的情况下渲染模态，但仍然对测试没有影响。你能解释一下应该如何测试吗？