title: react-testing-library validateDOMNesting Error
body: <pre><code>Warning: validateDOMNesting(...): &lt;tbody&gt; cannot appear as a child of &lt;div&gt;.
      in tbody (created by TableBody)
      in TableBody (created by TableBody)
      in TableBody
  </code></pre>
  
  <p><strong>Question:</strong></p>
  
  <p>How do I render my <code>TableBody</code> component a <code>table</code> element, instead of the default <code>div</code> that <code>react-testing-library</code> uses?</p>
  
  <p><strong>Supplemental Information:</strong></p>
  
  <p>I tried passing in options into the <code>react-testing-library</code>, <code>render()</code>, function but I can't seem to get it working.</p>
  
  <p>I also tried digging around in the <code>react-testing-library</code> tests to find examples, but didn't find anything.</p>
  
  <pre><code>// react-testing-library
  
  function render(
    ui: React.ReactElement&lt;any&gt;,
    options?: {
      /* You wont often use this, expand below for docs on options */
    },
  ): RenderResult
  </code></pre>
  
  <blockquote>
    <p><strong><a href="https://github.com/kentcdodds/react-testing-library#render" rel="nofollow noreferrer">From the react-testing-library docs</a></strong></p>
    
    <p>You wont often need to specify options, but if you ever do, here are
    the available options which you could provide as a second argument to
    render.</p>
    
    <p><strong>container</strong>: By default, <code>react-testing-library</code> will create a <code>div</code> and
    append that <code>div</code> to the <code>document.body</code> and this is where your react
    component will be rendered. If you provide your own <code>HTMLElement</code>
    container via this option, it will not be appended to the
    <code>document.body</code> automatically.</p>
    
    <p><strong>baseElement</strong>: If the <code>container</code> is specified, then this defaults to
    that, otherwise this defaults to <code>document.documentElement</code>. This is
    used as the base element for the queries as well as what is printed
    when you use <code>debug()</code>.</p>
  </blockquote>
  
  <p>My testing code using Jest:</p>
  
  <pre><code>import React from "react";
  import { render, cleanup, fireEvent } from "react-testing-library";
  
  import TableBody from "../TableBody";
  import listingDataMock from "../__mocks__/TableBody-listing-data";
  
  afterEach(cleanup);
  
  describe("TableBody", () =&gt; {
    test("Snapshot", () =&gt; {
      //Arrange--------------
      const listingData = listingDataMock;
      const tableBodyKey = "candidateId";
  
      const props = {
        listingData,
        tableBodyKey
      };
  
      const { container } = render(&lt;TableBody {...props} /&gt;);
  
      //Assert---------------
      expect(container).toMatchSnapshot();
    });
  });
  </code></pre>