反應：即使 output 符合預期，測試用例也會失敗

Question

所以我開始使用 React 測試。 我開發了一個基本的目錄查看器應用程序，它應該可以正常工作，但它沒有通過測試用例。 一項基本測試是單擊縮略圖，圖像應反映更改。 當我手動執行但測試用例失敗時它可以工作。

這是我單擊“white-light-candle.jpg”時的應用程序：

如您所見，預覽縮略圖已更新，但測試用例仍然失敗：

這是開發的測試腳本：

    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);
    });
});

誰能建議我應該在哪里調試這個問題？ 在這一點上，我已經沒有選擇了。

不幸的是，我目前無法在 Codepen 上上傳。 如果有人可以提供幫助，這是我的應用程序的代碼：

Update-1修改了測試用例以包含 waitFor 並將擴展名更改為 .jpg 但它沒有幫助：

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

圖像 src 是"http://localhost/tea-light-candle.jpeg" ，您期待"white-light-candle.jpg"

圖像的 src 是圖像所在位置的完整路徑。 您正在比較錯誤的字符串，添加路徑並驗證圖像的 src，因為真正的 src 說

“茶燈蠟燭”

你寫了

“白光蠟燭”

Answer 2

我知道這有點晚了，但是我最近實施了該項目並且所有測試用例都運行良好，您可以查看https://github.com/MSaddamKamal/react-catalog-viewer也確保在您的src/assets/images文件夾white-light-candle.jpg存在。

如果一切都很好，那么所有測試用例都將通過如下