title: validateDOMNesting(...): <tr> cannot appear as a child of <div> problem
body: <p>I am using <code>material-ui</code> in my <code>react.js</code> project. When I try to test my <code>Row</code> component, I get that <code>console.error</code>:</p>
  <pre><code>  Warning: validateDOMNesting(...): &lt;tr&gt; cannot appear as a child of &lt;div&gt;.
  </code></pre>
  <p>Here is my <code>Row</code> component:</p>
  <pre><code>const Row: React.FC&lt;RowProps&gt; = ({ course }) =&gt; {
    const [open, setOpen] = useState(false);
    const classes = useRowStyles();
  
    const isDesktopOrLaptop = useMediaQuery({
      query: '(min-device-width: 992px)',
    });
  
    const boxMargin = isDesktopOrLaptop ? 8 : 1;
  
    return (
      &lt;&gt;
        &lt;TableRow className={classes.root}&gt;
          &lt;TableCell&gt;
            &lt;IconButton
              aria-label=&quot;expand row&quot;
              size=&quot;small&quot;
              onClick={() =&gt; setOpen(!open)}&gt;
              {open ? (
                &lt;KeyboardArrowUpIcon fontSize=&quot;large&quot; /&gt;
              ) : (
                &lt;KeyboardArrowDownIcon fontSize=&quot;large&quot; /&gt;
              )}
            &lt;/IconButton&gt;
          &lt;/TableCell&gt;
          &lt;TableCell component=&quot;th&quot; scope=&quot;row&quot;&gt;
            &lt;Typography variant=&quot;h5&quot; component=&quot;h5&quot;&gt;
              {course.course}
            &lt;/Typography&gt;
          &lt;/TableCell&gt;
          &lt;TableCell align=&quot;right&quot;&gt;
            &lt;Typography variant=&quot;h5&quot; component=&quot;h5&quot;&gt;
              {course.openedLessonsCount}
            &lt;/Typography&gt;
          &lt;/TableCell&gt;
        &lt;/TableRow&gt;
        &lt;TableRow&gt;
          &lt;TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}&gt;
            &lt;Collapse in={open} timeout=&quot;auto&quot; unmountOnExit&gt;
              &lt;Box marginX={boxMargin} marginY={1}&gt;
                &lt;Typography variant=&quot;h5&quot; gutterBottom component=&quot;h5&quot;&gt;
                  Projects
                &lt;/Typography&gt;
                &lt;Table size=&quot;small&quot; aria-label=&quot;purchases&quot;&gt;
                  &lt;TableHead&gt;
                    &lt;TableRow&gt;
                      &lt;TableCell&gt;
                        &lt;Typography variant=&quot;h6&quot; gutterBottom component=&quot;h6&quot;&gt;
                          Name
                        &lt;/Typography&gt;
                      &lt;/TableCell&gt;
                      &lt;TableCell align=&quot;right&quot;&gt;
                        &lt;Typography variant=&quot;h6&quot; gutterBottom component=&quot;h6&quot;&gt;
                          Completed Lessons
                        &lt;/Typography&gt;
                      &lt;/TableCell&gt;
                    &lt;/TableRow&gt;
                  &lt;/TableHead&gt;
                  &lt;TableBody&gt;
                    {course.projects &amp;&amp;
                      course.projects.map((project: IProject) =&gt; (
                        &lt;TableRow key={project.project}&gt;
                          &lt;TableCell component=&quot;th&quot; scope=&quot;row&quot;&gt;
                            &lt;Typography variant=&quot;body1&quot; gutterBottom&gt;
                              {project.project}
                            &lt;/Typography&gt;
                          &lt;/TableCell&gt;
                          &lt;TableCell align=&quot;right&quot;&gt;
                            &lt;Typography variant=&quot;body1&quot; gutterBottom&gt;
                              {project.completedLessonsCount}
                            &lt;/Typography&gt;
                          &lt;/TableCell&gt;
                        &lt;/TableRow&gt;
                      ))}
                  &lt;/TableBody&gt;
                &lt;/Table&gt;
              &lt;/Box&gt;
            &lt;/Collapse&gt;
          &lt;/TableCell&gt;
        &lt;/TableRow&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>And here is generated snapshot for it:</p>
  <pre><code>&lt;body&gt;
    &lt;div&gt;
      &lt;tr
        class=&quot;MuiTableRow-root makeStyles-root-1&quot;
      &gt;
        &lt;td
          class=&quot;MuiTableCell-root&quot;
        &gt;
          &lt;button
            aria-label=&quot;expand row&quot;
            class=&quot;MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall&quot;
            tabindex=&quot;0&quot;
            type=&quot;button&quot;
          &gt;
            &lt;span
              class=&quot;MuiIconButton-label&quot;
            &gt;
              &lt;svg
                aria-hidden=&quot;true&quot;
                class=&quot;MuiSvgIcon-root MuiSvgIcon-fontSizeLarge&quot;
                focusable=&quot;false&quot;
                viewBox=&quot;0 0 24 24&quot;
              &gt;
                &lt;path
                  d=&quot;M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z&quot;
                /&gt;
              &lt;/svg&gt;
            &lt;/span&gt;
            &lt;span
              class=&quot;MuiTouchRipple-root&quot;
            /&gt;
          &lt;/button&gt;
        &lt;/td&gt;
        &lt;th
          class=&quot;MuiTableCell-root&quot;
          role=&quot;cell&quot;
          scope=&quot;row&quot;
        &gt;
          &lt;h5
            class=&quot;MuiTypography-root MuiTypography-h5&quot;
          &gt;
            Course1
          &lt;/h5&gt;
        &lt;/th&gt;
        &lt;td
          class=&quot;MuiTableCell-root MuiTableCell-alignRight&quot;
        &gt;
          &lt;h5
            class=&quot;MuiTypography-root MuiTypography-h5&quot;
          &gt;
            3
          &lt;/h5&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr
        class=&quot;MuiTableRow-root&quot;
      &gt;
        &lt;td
          class=&quot;MuiTableCell-root&quot;
          colspan=&quot;6&quot;
          style=&quot;padding-bottom: 0px; padding-top: 0px;&quot;
        /&gt;
      &lt;/tr&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>So it looks like the problem is the <code>&lt;div&gt;</code> element inside the <code>&lt;body&gt;</code>, but I don't know how to fix that error. I use <code>React.Fragment</code> (<code>&lt;&gt;</code>) to grab these two of <code>TableRow</code>, so that <code>&lt;div&gt;</code> shouldn't exist in my opinion...</p>
  <p>That <code>Row</code> component I took from <code>material-ui</code> docs for collapsible table:
  <a href="https://material-ui.com/components/tables/" rel="nofollow noreferrer">https://material-ui.com/components/tables/</a></p>
  <p>And there is codesandbox code for it (also from docs):
  <a href="https://codesandbox.io/s/material-demo-forked-fnisr?file=/demo.js" rel="nofollow noreferrer">https://codesandbox.io/s/material-demo-forked-fnisr?file=/demo.js</a></p>
  <p>@@ UPDATE</p>
  <p>I had to wrap Row component with <code>&lt;table&gt;</code> and <code>&lt;tbody&gt;</code>. I've created a wrapper for that. This is how the test code looks like now:</p>
  <pre><code>const Wrapper: React.FC = ({ children }) =&gt; {
    return (
      &lt;table&gt;
        &lt;tbody&gt;{children}&lt;/tbody&gt;
      &lt;/table&gt;
    );
  };
  
  test('Basic render', () =&gt; {
    const component = render(
      &lt;Wrapper&gt;
        &lt;Row course={props} /&gt;
      &lt;/Wrapper&gt;
    );
    expect(component.baseElement).toMatchSnapshot();
  });
  </code></pre>