zoukankan      html  css  js  c++  java
  • [React Testing] Test React Portals with within from React Testing Library

    When you use a React Portal, much of your component can be rendered outside the main DOM tree. Let’s see how we can use utilities provided by React Testing Library to allow us to select elements within the portal. To perform actions and assert on what’s rendered.

    Component:

    import React from 'react'
    import ReactDOM from 'react-dom'
    
    let modalRoot = document.getElementById('modal-root')
    if (!modalRoot) {
      modalRoot = document.createElement('div')
      modalRoot.setAttribute('id', 'modal-root')
      document.body.appendChild(modalRoot)
    }
    
    // don't use this for your modals.
    // you need to think about accessibility and styling.
    // Look into: https://ui.reach.tech/dialog
    function Modal({ children }) {
      const el = React.useRef(document.createElement('div'))
      React.useLayoutEffect(() => {
        const currentEl = el.current
        modalRoot.appendChild(currentEl)
        return () => modalRoot.removeChild(currentEl)
      }, [])
      return ReactDOM.createPortal(children, el.current)
    }
    
    export { Modal }

    Testing:

    import React from 'react'
    import { render, within } from '@testing-library/react'
    import { Modal } from '../extra/modal'
    import '@testing-library/jest-dom/extend-expect'
    
    test('modal shows the children', () => {
      render(
        <Modal>
          <div data-testid="test" />
        </Modal>,
      )
    
      // get element only in modal-root
      const { getByTestId } = within(document.getElementById('modal-root'))
      expect(getByTestId('test')).toBeInTheDocument()
    })
  • 相关阅读:
    linux中内存使用,swap,cache,buffer的含义总结
    haproxy启动时提示失败
    pcs与crmsh命令比较
    用yum下载rpm包(不安装)到指定目录
    Openstack的镜像属性
    ceph 对接openstack liberty
    ceph 创建和删除osd
    linux之fstab文件详解
    OpenStack Swift集群部署流程与简单使用
    swift(Object Storage对象存储服务)(单节点)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12825053.html
Copyright © 2011-2022 走看看