React: Test cases are failing even when output is as expected - reactjs

Question

So I'm getting started with React testing. I have developed a basic Catalog Viewer Application which should be working fine but it is failing the test cases. One basic test is to click on a thumbnail and image should reflect the changes. It works when I do it manually but the test case is getting failed.
This is the application when I clicked the "white-light-candle.jpg":
As you can see, the preview thumbnail has been updated but the test case still failed:
This is the test script that is developed:
import "#testing-library/jest-dom/extend-expect";
import { act, cleanup, fireEvent, render } from "#testing-library/react";
import React from "react";
import App from "./App";
import { image1, image2, image3, image4 } from "./assets/images";
jest.useFakeTimers();
const TEST_IDS = {
viewerId: "catalog-view",
prevBtnId: "prev-slide-btn",
nextBtnId: "next-slide-btn",
thumbBtnPrefix: "thumb-button-",
toggleSlideShowBtnId: "toggle-slide-show-button",
};
describe("Catalog Viewer", () => {
let getByTestId;
let viewer;
let prevBtn;
let nextBtn;
let toggleSlideShowBtn;
let catalogs;
let thumbBtn2;
let thumbBtn4;
beforeEach(() => {
const app = render(<App />);
getByTestId = app.getByTestId;
viewer = getByTestId(TEST_IDS.viewerId);
prevBtn = getByTestId(TEST_IDS.prevBtnId);
nextBtn = getByTestId(TEST_IDS.nextBtnId);
thumbBtn2 = getByTestId(TEST_IDS.thumbBtnPrefix + "1");
thumbBtn4 = getByTestId(TEST_IDS.thumbBtnPrefix + "3");
toggleSlideShowBtn = getByTestId(TEST_IDS.toggleSlideShowBtnId);
catalogs = [
{
thumb: image1,
image: image1,
},
{
thumb: image2,
image: image2,
},
{
thumb: image3,
image: image3,
},
{
thumb: image4,
image: image4,
},
];
});
afterEach(() => {
cleanup();
});
test("clicking on any catalog thumbnail should show the appropriate image", () => {
fireEvent.click(thumbBtn2, { button: "0" });
expect(viewer.src).toContain(catalogs[1].image);
fireEvent.click(thumbBtn4, { button: "0" });
expect(viewer.src).toContain(catalogs[3].image);
});
});
Can anyone suggest where I should look to debug this problem? At this point I just ran out of options.
I can't unfortunately upload on Codepen at the moment. Here is the code for my application if anyone can help please:
Update-1
Modified the test case to include waitFor and changed extension to .jpg but it didn't help:
test("clicking on any catalog thumbnail should show the appropriate image", async () => {
fireEvent.click(thumbBtn2, { button: "0" });
await waitFor(() => {
expect(viewer.src).toContain(catalogs[1].image);
});
fireEvent.click(thumbBtn4, { button: "0" });
await waitFor(() => {
expect(viewer.src).toContain(catalogs[3].image);
});
});

Answer 1

The image src is "http://localhost/tea-light-candle.jpeg" and you are expecting "white-light-candle.jpg"
the src of the image is the full path of where the image is located. You are comparing to the wrong string, add the path and also verify the src of the image, because the real src says
"tea-light-candle"
and you wrote
"white-light-candle"

Answer 2

I know it's a bit late, but i have recently implemented the project and all testcase are running fine you can have a look at https://github.com/MSaddamKamal/react-catalog-viewer also make sure in your src/assets/images folder white-light-candle.jpg exists.
If every thing is fine then all test cases will pass as below