Tengo una aplicación simple que llama a una API y agrega una imagen al DOM al hacer clic:

 export const DogGallery = () => { const [dogPhotos, setDogPhotos] = useState([]); const getDogPhoto = async () => { const newPhoto = await fetch( "https://dog.ceo/api/breeds/image/random" ).then((res) => res.json()); const photosArray = [...dogPhotos, newPhoto.message]; setDogPhotos(photosArray); }; return ( <> <p>Dog gallery</p> <Button handleClick={getDogPhoto} /> {dogPhotos.length > 0 && dogPhotos.map((photo, i) => ( <DogPhoto source={photo} key={i} number={i} /> ))} </> ); };

Sin embargo, cuando pruebo esto en la biblioteca de pruebas de reacción y disparo el clic incluso cinco veces, todavía termino con una imagen en el DOM.

 const clickButton = () => { const buttonElement = screen.getByText("click!"); fireEvent.click(buttonElement); }; it("should render 5 images", async () => { render(<DogGallery />); clickButton(); clickButton(); clickButton(); clickButton(); clickButton(); const elements = await screen.findAllByRole("image"); expect(elements.length).toBe(5); // fails, as it only returns a length of 1 });

¿Cómo puedo obtener react-testing-library para replicar/agregar imágenes al dom en lugar de reemplazarlas?

Realizo pruebas para 0 imágenes y 1 imagen y ambas pasan.

Puede ver el código completo aquí: https://codesandbox.io/s/bold-bash-cwttx?file=/src/App.js