Jest mock addEventListener";DOM内容已加载";检查内部的测试

Question

我正在尝试为在检查"DOMContentLoaded"内部发生的逻辑编写单元测试

代码示例：

window.addEventListener('DOMContentLoaded', () => {
// do stuff
...
});

在我的测试中，我已经在嘲笑window对象(因为我有一个util来设置窗口(。所以我试图在我的窗口模拟上模拟addEventListener

jest.mock("./utils/window");
let mockWindow;
const mockWindowObject = {
addEventListener: jest.fn().mockImplementation("DOMContentLoaded", () => true)
};

beforeEach(() => {
jest.resetModules();

mockWindow = require("./utils/window").default;
mockWindow.mockReturnValue(mockWindowObject);

require("./myComponent");
});

因此，在每次之前，我都会正确地模拟窗口，然后返回包含模拟函数addEventListener的对象。我认为我在mockImplementation部分犯了一个错误，但我不确定是什么：

addEventListener: jest.fn().mockImplementation("DOMContentLoaded", () => true)

Answer 1

我在使用jsdom库时遇到了同样的问题。

如果您想检查DOMContentLoaded事件中所做的更改，只需在测试中实现一个eventListener：

test('DOMContentLoaded changes', () => {
document.addEventListener('DOMContentLoaded', () => {
// your checks here
});
})

在我的情况下，我只需要使用测试库选择器来验证我在DOM中的更改。

你可以在这里查看。