我已经写了单元测试使用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>
);
};
我有下面的测试套件,其中createObjectURL
和revokeObjectURL
在测试运行之前。
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
对象,但没有帮助。我需要帮助来解决此错误。
2条答案
按热度按时间watbbzwu1#
我已经解决了这个问题:
JSDom不喜欢您进行导航-请参阅www.example.comhttps://github.com/jsdom/jsdom/issues/2112#issuecomment-359297866
这里的问题是代码在锚点上执行了一个单击事件:
通常,单击锚点就是导航,我想JSDom对此表示反对。
要解决烦人的日志记录问题,请模拟
click()
,而不是模拟location
:这对我很有效。
顺便说一句,我 * 还 * 不得不模拟
window.URL.createObjectUrl
调用,因为我得到:...所以:
希望这对你有用。
hi3rlvi22#
此错误仅在您尝试导航时的测试期间出现,JSDOM(尚)不支持(参见本期)。
通常你可以忽略这个警告,除非你打算在浏览器或其他地方运行你的测试。这是一个测试警告,并不实际表明你的代码有问题;您只是遇到了JSDOM尚未实现的特性。
如果您想解决这个问题,可以将代码中的
window.location.href
导航替换为window.location.assign()
,并模拟实现(参见本文)。