title: toHaveFocus behaviour in jest-dom
body: <p>I'm having trouble understanding how <code>toHaveFocus()</code> works exactly. Here's my setup:</p>
  
  <p><strong>MyComponent.js</strong></p>
  
  <pre><code>import React from 'react'
  import styled from 'styled-components'
  
  import TextArea from './TextArea'
  
  
  const Container = styled.div`
    flex: 1;
    height: 100%;
    padding: ${props =&gt; props.theme.size};
  `
  
  const Title = styled(TextArea)`
    font-weight: bold;
    font-size: ${props =&gt; props.theme.sizeLarger};
    margin-left: ${props =&gt; props.theme.sizeSmall};
  `
  
  class MyComponent extends React.Component {
  
    handleTitleChange = e =&gt; {
      this.props.onTitleChange(e.target.value)
    }
  
    handleTitleLostFocus = () =&gt; {
      this.props.onChangeComplete()
    }
  
    render () {
      return (
        &lt;Container&gt;
          &lt;Title 
            value={this.props.item.title || ''}
            onChange={this.handleTitleChange}
            onBlur={this.handleTitleLostFocus}
          /&gt;
        &lt;/Container&gt;
      )
    }
  }
  
  export default MyComponent
  </code></pre>
  
  <p><strong>MyComponent.test.js</strong></p>
  
  <pre><code>import React from 'react'
  import {render, fireEvent, prettyDOM} from 'react-testing-library'
  
  import MyComponent from '../MyComponent'
  
  
  describe('MyComponent', () =&gt; {
    it('handles title changes', () =&gt; {
      const title = 'title'
      const handleTitleChangeMock = jest.fn()
      const {getByText} = render(
        &lt;MyComponent
          item={{
            title: title
          }}
          onTitleChange={handleTitleChangeMock}
          onChangeComplete={() =&gt; {}}
        /&gt;
      )
      const titleInput = getByText(title)
      console.log(prettyDOM(titleInput))
      fireEvent.click(getByText(title))
      expect(getByText(title)).toHaveFocus()
      fireEvent.change(getByText(title), {target: {value: title.slice(0, -1)}})
      expect(handleTitleChangeMock).toHaveBeenCalledTimes(1)
      expect(handleTitleChangeMock).toHaveBeenCalledWith(title.slice(0, -1))
    })
  })
  </code></pre>
  
  <p>When I do this:</p>
  
  <pre><code>const titleInput = getByText(title)
  console.log(prettyDOM(titleInput))
  </code></pre>
  
  <p>The console logs the following:</p>
  
  <pre><code>&lt;textarea
      class="sc-htoDjs dLjZCT sc-bxivhb jdLTBU"
      style="height: 0px;"
    &gt;
      title
    &lt;/textarea&gt;
  </code></pre>
  
  <p>That <code>textarea</code> element is the one I am targeting. But then, when I do this:</p>
  
  <pre><code>fireEvent.click(titleInput)
  expect(titleInput).toHaveFocus()
  </code></pre>
  
  <p>I get this error:</p>
  
  <pre><code>Received:
    &lt;body&gt;&lt;textarea style="min-height: 0 !important; max-height: none !important; height: 0px !important; visibility: hidden !important; overflow: hidden !important; position: absolute !important; z-index: -1000 !important; top: 0px !important; right: 0px;" /&gt;&lt;div&gt;&lt;div class="sc-bZQynM ePHCfO"&gt;&lt;textarea class="sc-htoDjs dLjZCT sc-bxivhb jdLTBU" style="height: 0px;"&gt;title&lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;
  
    at Object.it (src/__tests__/MyComponent.test.js:84:30)
        at new Promise (&lt;anonymous&gt;)
    at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
        at &lt;anonymous&gt;
    at process._tickCallback (internal/process/next_tick.js:188:7)
  </code></pre>
  
  <p>I don't quite understand why when I'm trying to assert a <code>textarea</code> element <code>toHaveFocus()</code>, I'm receiving an error that references the entire DOM tree under <code>body</code>...</p>