title: React-testing-library button click replacing dom elements rather than replicating them
body: <p>I have a simple application that calls an API and adds an image to the DOM on click:</p>
  <pre class="lang-js prettyprint-override"><code>export const DogGallery = () =&gt; {
    const [dogPhotos, setDogPhotos] = useState([]);
    const getDogPhoto = async () =&gt; {
      const newPhoto = await fetch(
        &quot;https://dog.ceo/api/breeds/image/random&quot;
      ).then((res) =&gt; res.json());
      const photosArray = [...dogPhotos, newPhoto.message];
      setDogPhotos(photosArray);
    };
    return (
      &lt;&gt;
        &lt;p&gt;Dog gallery&lt;/p&gt;
        &lt;Button handleClick={getDogPhoto} /&gt;
        {dogPhotos.length &gt; 0 &amp;&amp;
          dogPhotos.map((photo, i) =&gt; (
            &lt;DogPhoto source={photo} key={i} number={i} /&gt;
          ))}
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>However, when I test this in react-testing-library and fire the click even five times, I still end up with one image in the DOM.</p>
  <pre class="lang-js prettyprint-override"><code>const clickButton = () =&gt; {
    const buttonElement = screen.getByText(&quot;click!&quot;);
    fireEvent.click(buttonElement);
  };
  
  it(&quot;should render 5 images&quot;, async () =&gt; {
    render(&lt;DogGallery /&gt;);
    clickButton();
    clickButton();
    clickButton();
    clickButton();
    clickButton();
    const elements = await screen.findAllByRole(&quot;image&quot;);
    expect(elements.length).toBe(5); // fails, as it only returns a length of 1
  });
  </code></pre>
  <p>How can I get react-testing-library to replicate/add images to the dom rather than replacing them?</p>
  <p>I perform tests for 0 images and 1 image and they both pass.</p>
  <p>You can see the full code here: <a href="https://codesandbox.io/s/bold-bash-cwttx?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/bold-bash-cwttx?file=/src/App.js</a></p>