title: Jest: `querySelector` returns null in test of a ReactJS component
body: <p>I'm testing a connected functional component in ReactJS using jest and the react-testing-library.</p>
  <p>The component renders some input fields and a button. Here's a simplified version of it, in which I decided to leave the full structure of <code>GridContainer</code> and <code>GridItem</code> components (from Material-UI) as they might play a role in this issue:</p>
  <pre><code>export function Letter(props) {
    const [letter, setLetter] = useState({
      // not relevant
    });
  
    return (
      &lt;GridContainer&gt;
        &lt;GridItem md={6} sm={6}&gt;
          &lt;GridContainer&gt;
            &lt;GridItem&gt;
              &lt;LetterImageUpload /&gt;
            &lt;/GridItem&gt;
            &lt;GridItem&gt;
              &lt;LetterText /&gt;
            &lt;/GridItem&gt;
          &lt;/GridContainer&gt;
        &lt;/GridItem&gt;
        &lt;GridItem md={6} sm={6}&gt;
          &lt;LetterAddress /&gt;
          &lt;GridContainer&gt;
            &lt;Button
              data-testid=&quot;AddToStoreButton&quot;
              onClick={() =&gt; {
                props.addToStore(letter);
              }}
            &gt;
              Add to Store
            &lt;/Button&gt;
          &lt;/GridContainer&gt;
        &lt;/GridItem&gt;
      &lt;/GridContainer&gt;
    );
  }
  
  function mapDispatchToProps(dispatch) {
    return {
      addToStore: letter =&gt; {
        dispatch({ type: &quot;ADD_TO_STORE&quot;, payload: letter });
      }
    };
  }
  
  export default connect(
    null,
    mapDispatchToProps
  )(Letter);
  </code></pre>
  <p>As you can see I export both the dumb component <em>and</em> the connected component (the latter via <code>export default</code>), so that I can just <code>import { Letter }</code> in my tests and not bother about the redux store (<strong>is this the right way?</strong>).</p>
  <p>The accompanying test goes like this:</p>
  <pre><code>import { Letter } from &quot;components/Letter/Letter.js&quot;;
  
  let container = null;
  beforeEach(() =&gt; {
    container = document.createElement(&quot;div&quot;);
    document.body.appendChild(container);
  });
  
  afterEach(() =&gt; {
    unmountComponentAtNode(container);
    container.remove();
    container = null;
  });
  
  test(&quot;Letter&quot;, () =&gt; {
    act(() =&gt; {
      render(&lt;Letter addToStore={jest.fn()} /&gt;, container);
    });
    // FIXME: querySelector returns null
    container.querySelector('[data-testid=&quot;AddToStoreButton&quot;]').simulate(&quot;click&quot;);
    // assert
  });
  </code></pre>
  <p>In a debugger I can see that querySelector returns <code>null</code> regardless of the selector I used.
  For instance, I tried the following in the live debugger:</p>
  <pre><code>&gt; container.querySelector('[data-testid=&quot;AddToCartButton&quot;]')
  null
  &gt; container.querySelector(&quot;button&quot;)
  null
  &gt; container.querySelector(&quot;div&quot;)
  null
  </code></pre>
  <p>I'm clearly doing something spectacularly wrong. Can anyone spot it?</p>