title: react-testing-library queryByTestId returning NULL
body: <p>I'm making the switch from using <code>enzyme</code> to <code>react-testing-library</code> for testing my components.</p>
  
  <p>I have a simple component <code>CustomModal</code> which acts much like a wrapper around the <code>Modal</code> from <code>reactstrap</code>. <strong>I am trying to test that my <code>CustomModal</code> includes the child elements that it ought to.</strong></p>
  
  <p>Taking my cues from <a href="https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change" rel="nofollow noreferrer">this article</a> and <a href="https://blog.bitsrc.io/testing-react-applications-with-react-testing-library-da66aaef740a" rel="nofollow noreferrer">this article</a>, I am adding <code>data-testid</code> attributes to my children, and then I am using <code>getByTestId</code> and <code>queryByTestId</code>. But, for some reason, my queries are not finding the child nodes that, as far as I can tell, are there.</p>
  
  <p><strong>Is there something I am doing wrong in my test setup, or am I misunderstanding how <code>react-testing-library</code> should be used?</strong></p>
  
  <p>The basic code, along with the test (which is failing), can be found in this CodeSandbox:
  <a href="https://codesandbox.io/s/ww3r32n36l?fontsize=14" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit react-testing-library queryByTestId"></a></p>
  
  <p>My basic <code>CustomModal</code> component looks like this:</p>
  
  <pre><code>/*
   * src/components/CustomModal/index.js
   */
  
  import React from "react";
  import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
  
  const getSanitizedModalProps = props =&gt; {
    let modalProps = { ...props };
    delete modalProps.onConfirm;
    delete modalProps.onCancel;
    delete modalProps.headerText;
    delete modalProps.children;
    modalProps.isOpen = modalProps.isOpen === true;
    return modalProps;
  };
  
  export default props =&gt; {
    return (
      &lt;Modal data-testid="modal" {...getSanitizedModalProps(props)}&gt;
        &lt;ModalHeader data-testid="modal-header"&gt;{props.headerText}&lt;/ModalHeader&gt;
        &lt;ModalBody data-testid="modal-body"&gt;{props.children}&lt;/ModalBody&gt;
        &lt;ModalFooter data-testid="modal-footer"&gt;
          &lt;Button data-testid="confirm-button" onClick={props.onConfirm}&gt;
            Confirm
          &lt;/Button&gt;
          &lt;Button data-testid="cancel-button" onClick={props.onCancel}&gt;
            Cancel
          &lt;/Button&gt;
        &lt;/ModalFooter&gt;
      &lt;/Modal&gt;
    );
  };
  </code></pre>
  
  <p>My test file looks like this:</p>
  
  <pre><code>/*
   * src/components/CustomModal/CustomModal.test.js
   */
  
  import React from "react";
  import { render } from "react-testing-library";
  import CustomModal from "./index";
  
  const TEST_IDS = {
    modal: "modal",
    header: "modal-header",
    body: "modal-body",
    footer: "modal-footer",
    cancel: "cancel-button",
    confirm: "confirm-button"
  };
  
  describe("&lt;Modal /&gt;", () =&gt; {
    const headerText = "hello world";
    it("renders all of the children", () =&gt; {
      const { queryByTestId } = render(&lt;CustomModal headerText={headerText} /&gt;);
  
      // The following assertions all fail
      expect(queryByTestId(TEST_IDS.modal)).toBeTruthy(); 
      expect(queryByTestId(TEST_IDS.header)).toBeTruthy();
      expect(queryByTestId(TEST_IDS.body)).toBeTruthy();
      expect(queryByTestId(TEST_IDS.footer)).toBeTruthy();
      expect(queryByTestId(TEST_IDS.cancel)).toBeTruthy();
      expect(queryByTestId(TEST_IDS.confirm)).toBeTruthy();
    });
  });
  </code></pre>