Jest mock addEventListener "DOM Content loaded" 用于此检查中的测试答案

【问题标题】：Jest mock addEventListener "DOM Content loaded" for tests inside this checkJest mock addEventListener "DOM Content loaded" 用于此检查中的测试
【发布时间】：2021-05-19 14:54:35
【问题描述】：

我正在尝试为“DOMContentLoaded”检查中发生的逻辑编写单元测试

代码示例：

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

在我的测试中，我已经在模拟 window 对象（因为我有一个工具来设置窗口）。所以我试图在我的窗口模拟上模拟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)

【问题讨论】：

为什么不：将处理程序提取为单独的函数 -> 测试该函数？
@VLAZ 我对我的逻辑实现很满意，我不想改变它。我只是想通过 DOMContentLoaded 步骤来测试里面的逻辑。
在DOMContentLoaded事件处理程序中显示你的逻辑

标签： javascript unit-testing dom jestjs mocking

【解决方案1】：

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

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

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

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

您可以查看此here。

【讨论】：