Jest错误-未实现:在锚元素上触发单击事件时导航(哈希更改除外)

xzv2uavs  于 2023-01-18  发布在  Jest
关注(0)|答案(2)|浏览(170)

我已经写了单元测试使用jest版本26.0.0与react测试库和节点版本14.2.0。下面是我的React功能组件,其中有一个按钮,点击作出 AJAX 调用下载报告文件。

const ReportListTable = () => {
    const { downloadReports } = useReports();

    const onClickDownload = () => {
        let fileName = `Report.zip`;
        downloadReports()
            .then((response) => response.arrayBuffer())
            .then((data) => {
                const blob = new Blob([data], { type: "octet/stream", endings: "native" });
                const url = window.URL.createObjectURL(blob);
                const anchor = document.createElement("a");
                anchor.setAttribute("href", url);
                anchor.setAttribute("download", fileName);
                anchor.click();
                window.URL.revokeObjectURL(url);
            })
            .catch((error?: Error | Response) => {
                if (error instanceof Error) {
                    message.error(error?.message);
                }
            });
    };

    return (
        <div>
            <Button data-testid="download-btn" onClick={onClickDownload}>
                Download
            </Button>
        </div>
    );
};

我有下面的测试套件,其中createObjectURLrevokeObjectURL在测试运行之前。

describe("Test Reports List Table component", () => {
    const { URL } = window;

    beforeAll(() => {
        window.URL.createObjectURL = jest.fn();
        window.URL.revokeObjectURL = jest.fn();

        jest.spyOn(useReportsHook, "useReports").mockReturnValue(useReportsMockValue);
    });

    afterAll(() => {
        window.URL = URL;
        jest.clearAllMocks();
    });

    it("should handle row button enabled and download on button clicked", async () => {
        jest.spyOn(useReportsContextHook, "useReportsContext").mockReturnValue([{ checkedIds: ["report_1"] }, jest.fn]);
        const { asFragment } = render(<ReportListTable />);
        
        fireEvent.click(await screen.getByTestId(elements.downloadTestId));
        await waitFor(() => expect(window.URL.createObjectURL).toHaveBeenCalled());
        await waitFor(() => expect(window.URL.revokeObjectURL).toHaveBeenCalled());
        expect(asFragment).toMatchSnapshot();
    });
});

测试用例通过,但引发以下错误。

console.error
    Error: Not implemented: navigation (except hash changes)
        at module.exports (/Users/user/Documents/lydia-github/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
        at navigateFetch (/Users/user/Documents/lydia-github/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/window/navigation.js:76:3)
        at exports.navigate (/Users/user/Documents/lydia-github/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/window/navigation.js:54:3)
        at Timeout._onTimeout (/Users/user/Documents/lydia-github/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLHyperlinkElementUtils-impl.js:81:7)
        at listOnTimeout (internal/timers.js:549:17)
        at processTimers (internal/timers.js:492:7) undefined

我尝试在引用此线程How to fix Error: Not implemented: navigation (except hash changes)后模拟location对象,但没有帮助。我需要帮助来解决此错误。

watbbzwu

watbbzwu1#

我已经解决了这个问题:
JSDom不喜欢您进行导航-请参阅www.example.comhttps://github.com/jsdom/jsdom/issues/2112#issuecomment-359297866
这里的问题是代码在锚点上执行了一个单击事件:

const anchor = document.createElement("a");
anchor.setAttribute("href", url);
anchor.setAttribute("download", fileName);
anchor.click();

通常,单击锚点就是导航,我想JSDom对此表示反对。
要解决烦人的日志记录问题,请模拟click(),而不是模拟location

HTMLAnchorElement.prototype.click = jest.fn();

这对我很有效。
顺便说一句,我 * 还 * 不得不模拟window.URL.createObjectUrl调用,因为我得到:

TypeError: window.URL.createObjectURL is not a function

...所以:

global.window.URL.createObjectURL = jest.fn();

希望这对你有用。

hi3rlvi2

hi3rlvi22#

此错误仅在您尝试导航时的测试期间出现,JSDOM(尚)不支持(参见本期)。
通常你可以忽略这个警告,除非你打算在浏览器或其他地方运行你的测试。这是一个测试警告,并不实际表明你的代码有问题;您只是遇到了JSDOM尚未实现的特性。
如果您想解决这个问题,可以将代码中的window.location.href导航替换为window.location.assign(),并模拟实现(参见本文)。

相关问题