[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()
})