title: Why isn't child component rendering when testing with React Testing Library?
body: <p>I am writing UI unit tests using Jest/Testing Library.</p>
  <p>I have a <code>DashboardLayout</code> component that returns</p>
  <pre><code>return (
      &lt;DashboardLayoutRoot sx={{ marginTop: '30px' }}&gt;
        &lt;DashboardNavbar
          onSidebarMobileOpen={(): void =&gt; setIsSidebarMobileOpen(true)}
        /&gt;
        &lt;DashboardSidebar
          onMobileClose={(): void =&gt; setIsSidebarMobileOpen(false)}
          openMobile={isSidebarMobileOpen}
        /&gt;
        &lt;DashboardLayoutWrapper&gt;
          &lt;DashboardLayoutContainer&gt;
            &lt;DashboardLayoutContent&gt;{children}&lt;/DashboardLayoutContent&gt;
          &lt;/DashboardLayoutContainer&gt;
        &lt;/DashboardLayoutWrapper&gt;
      &lt;/DashboardLayoutRoot&gt;
    );
  </code></pre>
  <p>DashboardNavBar:</p>
  <pre><code>&lt;DashboardNavbarRoot {...other}&gt;
        &lt;Toolbar sx={{ minHeight: 64 }}&gt;
          &lt;Hidden lgUp&gt;
            &lt;IconButton color=&quot;inherit&quot; onClick={onSidebarMobileOpen}&gt;
              &lt;MenuIcon fontSize=&quot;small&quot; data-testid=&quot;sidebar-icon&quot; /&gt;
            &lt;/IconButton&gt;
          &lt;/Hidden&gt;
  </code></pre>
  <p>As you can see I set testid in MenuIcon.</p>
  <p>However, when rendering in test, getByTestId fails.</p>
  <pre><code>// skip setup above
  
  render(
      &lt;Provider store={store}&gt;
        &lt;DashboardLayout /&gt;
      &lt;/Provider&gt;,
    );
   const sidebarIcon = screen.getByTestId('sidebar-icon');
  
    expect(sidebarIcon).toBeVisible();
  </code></pre>
  <p>I do set up everything correctly, like mock router, Provider etc.</p>
  <p>Why is this happening?</p>
  <p>Should I just render DashboardNavbar by itself? (not sure if this would be good UI unit test though)</p>