fix modal

Author: Kent C. Dodds

src/__tests__/portals.js

@@ -1,12 +1,13 @@
 import React from 'react'
-import {render} from '@testing-library/react'
+import {render, within} from '@testing-library/react'
 import {Modal} from '../modal'
 
 test('modal shows the children', () => {
- const {getByText} = render(
+ render(
  <Modal>
- <div>test</div>
+ <div data-testid="test" />
  </Modal>,
  )
- expect(getByText('test')).toBeInTheDocument()
+ const {getByTestId} = within(document.getElementById('modal-root'))
+ expect(getByTestId('test')).toBeInTheDocument()
 })

src/modal.js

@@ -12,7 +12,7 @@ if (!modalRoot) {
 // you need to think about accessibility and styling.
 // Look into: https://ui.reach.tech/dialog
 function Modal({children}) {
- const el = React.useRef(document.createElement('el'))
+ const el = React.useRef(document.createElement('div'))
  React.useLayoutEffect(() => {
  const currentEl = el.current
  modalRoot.appendChild(currentEl)