title: Test correct SVG component renders with jest and react-testing-library
body: <p>I have an svg inside a React component that renders conditionally.</p>
  <pre><code>&lt;div className='avatar'&gt;
        {gender === true ? &lt;MaleAvatar /&gt; : &lt;FemaleAvatar /&gt;}
      &lt;/div&gt;
  </code></pre>
  <p>MaleAvatar and FemaleAvatar are components containing svgs. Initially, I want the MaleAvatar svg to render and then if the value of gender is changed to false the FemaleAvatar svg renders - but the male avatar should render first and that's what I want to test.</p>
  <p>The component the conditional is in is a child of a child, but I am testing elements in that component by text and the test works fine eg:</p>
  <pre><code>const personDetailsText = screen.getByText('Personal details')
  </code></pre>
  <p>I am testing with jest and react-testing-library, but using a testing id on the parent div then grabbing the first child doesn't work because it can't recognise the testing id. So if I have:</p>
  <pre><code>&lt;div data-testid='avatar' className='avatar'&gt;
            {gender === true ? &lt;MaleAvatar /&gt; : &lt;FemaleAvatar /&gt;}
          &lt;/div&gt;
  </code></pre>
  <p>...then the test below fails at 'const avatarSVG = screen.getByTestId('avatar')':</p>
  <pre><code>test('gender avatar is male on initialisation', () =&gt; {
      const avatarSVG = screen.getByTestId('avatar')
      expect(avatarSVG).toBeInTheDocument()
      expect(() =&gt; screen.getByTestId('female-avatar').toThrow())
      expect(avatar.firstChild.nodeName).toBe('MaleAvatar')
    })
  </code></pre>
  <p>I'm using React hooks and I've read I also need to somehow compensate for React rendering the SVGs after the initial render - after useEffect is finished, but I can't find how to do this with react-testing-library and hooks?</p>
  <p>This also does not work:</p>
  <pre><code>const avatarSVG = document.querySelector('MaleAvatar')
  </code></pre>
  <p>How can I grab the SVG components to check the correct one renders?</p>