Reactjs 如何测试使用 React.createportal 呈现的组件

it("Render PopUp Properly", () => {
      const props = {
        setIsOpen: jest.fn(),
        children: <div>Test</div>,
      };
      const {getByTestId}= render(<Popup isOpen={true} {...props} />);
      expect(screen.getByTestId("popup-component")).toBeInTheDocument();
    });

PopUp › Render PopUp Properly                            
                                                             
    Target container is not a DOM element.

      13 |   }
      14 |
    > 15 |   return createPortal(
         |                      ^
      16 |     <motion.div
      17 |       data-testid="blur-bg"
      18 |       initial={{

  it("Render PopUp Properly", () => {
      const props = {
        setIsOpen: jest.fn(),
        children: <div>Test</div>,
      };
      const container = document.createElement("div");
      document.body.appendChild(container);
      ReactDOM.createPortal(<Popup isOpen={true} {...props} />, container);
      expect(container.innerHTML).toMatchSnapshot();
      expect(container).toBeInTheDocument();
    });

Reactjs相关问答推荐

如何使用React Router创建响应式主详细信息应用程序？

如何在react组件中使用formik进行验证

Reaction Ploly：如何在多个子情节中共享zoom 状态

捕获表单数据时的Reactjs问题

使用experial_useFormState将参数传递给服务器操作

onClick 事件处理程序未应用于样式组件

强制 useEffect 仅运行一次

在react的useEffect钩子中，我的函数被调用，但只有第一个函数能够改变状态，第二个函数无法改变状态.

在添加了useplacesautocomplete后，在构建React/Next.js项目时，NPM抛出类型期望的错误

当`useSelector`回调中的属性值更新时，将会使用更新后的值吗？

React中的功能性组件克隆优化

如何在 React 过滤器中包含价格过滤器逻辑？

React + Redux：数据未正确传递给具有动态路由的组件

在 React JS 中编辑表格数据

如何制作基于对象 struct 呈现数据的可重用组件？

.filter() 函数在删除函数中创建循环 - React

在react 路由dom版本6中的组件内添加路由

你如何使用 refs 访问 React 中映射子项的值？

在状态中存储多个选定的选项

如何在按钮左下角制作 Material UI 菜单下拉菜单