title: How to fix `TypeError: document.createRange is not a function` error while testing material ui popper with react-testing-library?
body: <p>I have a material-ui <code>TextField</code> which on focus opens a <code>Popper</code>. I am trying to test this behavior using react-testing-library.</p>
  
  <p><strong>Component</strong>:</p>
  
  <pre><code>import ClickAwayListener from '@material-ui/core/ClickAwayListener';
  import Grow from '@material-ui/core/Grow';
  import Paper from '@material-ui/core/Paper';
  import Popper from '@material-ui/core/Popper';
  import TextField from '@material-ui/core/TextField';
  import React from 'react';
  import { ItemType } from './types';
  
  export type TextFieldDropDownProps = {
      items: ItemType,
  };
  
  export function TextFieldDropDown(props: TextFieldDropDownProps) {
      const [searchTerm, setSearchTerm] = React.useState('');
      const [anchorEl, setAnchorEl] = React.useState(null);
  
      const handleSearchTermChange = (event: any) =&gt; {
          setSearchTerm(event.target.value);
      };
  
      const onFoucs = (event: any) =&gt; {
          setAnchorEl(event.currentTarget);
      };
  
      const handleClose = (event: any) =&gt; {
          setAnchorEl(null);
      };
  
      const popperTrans = ({ TransitionProps }: any) =&gt; {
          return (
            &lt;Grow
              {...TransitionProps}
              style={{ transformOrigin: '0 0 0' }}
            &gt;
              &lt;Paper&gt;
                &lt;ul /&gt;
              &lt;/Paper&gt;
            &lt;/Grow&gt;
          );
      };
  
      const open = Boolean(anchorEl);
      return (
          &lt;ClickAwayListener onClickAway={handleClose}&gt;
              &lt;div&gt;
                  &lt;TextField
                      onChange={handleSearchTermChange}
                      onFocus={onFoucs}
                      value={searchTerm}
                      label='Search'
                  /&gt;
                  &lt;Popper
                      open={open}
                      anchorEl={anchorEl}
                      transition={true}
                      disablePortal={true}
                      placement='bottom-start'
                      style={{zIndex: 999, minWidth: '100%'}}
                  &gt;
                      {popperTrans}
                  &lt;/Popper&gt;
              &lt;/div&gt;
          &lt;/ClickAwayListener&gt;
      );
  }
  
  </code></pre>
  
  <p><strong>Test</strong>:</p>
  
  <pre><code>import { fireEvent, render, wait } from '@testing-library/react';
  import { getTestData } from 'test-data';
  import React from 'react';
  import { TextFieldDropDown } from './TextFieldDropDown';
  
  test('that on focus on input field, the component shows a dropdown', async () =&gt; {
      // Set up test data
      const items: any = getTestData();
  
      // Render component
      const props = { items };
      const { getByRole, queryByRole } = render(&lt;TextFieldDropDown {...props} /&gt;, {});
      await wait();
  
      expect(queryByRole('list')).toBeNull();
  
      // Fire event
      const placeSelectInputField = getByRole('textbox') as HTMLInputElement;
      fireEvent.focus(placeSelectInputField);
  
      // Verify that dropdown is shown
      expect(queryByRole('list')).toBeInTheDocument();
  
  });
  
  </code></pre>
  
  <p>When I run the test, I get the following error - <code>TypeError: document.createRange is not a function</code>. </p>
  
  <pre><code>      The above error occurred in the &lt;div&gt; component:
            in div (created by ForwardRef(Portal))
            in ForwardRef(Portal) (created by ForwardRef(Popper))
            in ForwardRef(Popper) (created by TextFieldDropDown)
            in div (created by ForwardRef(ClickAwayListener))
            in ForwardRef(ClickAwayListener) (created by TextFieldDropDown)
            in TextFieldDropDown
            in Provider (created by AllTheProviders)
            in AllTheProviders
  
        Consider adding an error boundary to your tree to customize error handling behavior.
  
        The above error occurred in the &lt;ForwardRef(Popper)&gt; component:
            in ForwardRef(Popper) (created by TextFieldDropDown)
            in div (created by ForwardRef(ClickAwayListener))
            in ForwardRef(ClickAwayListener) (created by TextFieldDropDown)
            in TextFieldDropDown
            in Provider (created by AllTheProviders)
            in AllTheProviders
  
        Consider adding an error boundary to your tree to customize error handling behavior.
  
  
    ● that on focus on input field, the component shows a dropdown
  
      TypeError: document.createRange is not a function
  
        46 |     // Fire event
        47 |     const TextFieldComponent = getByRole('textbox') as HTMLInputElement;
      &gt; 48 |     fireEvent.focus(TextFieldComponent);
           |               ^
        49 |
        50 |     // Verify that dropdown is shown
        51 |     expect(queryByRole('list')).toBeInTheDocument();
  </code></pre>
  
  <p>How do I make this work?</p>