Jest 测试中如何模拟 window.resize 事件？-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常需要测试页面的交互和响应能力。其中，窗口大小变化是一个常见的场景，因此我们需要在 Jest 测试中模拟 window.resize 事件。本文将介绍如何实现这一目标。

模拟 window.resize 事件

在 Jest 测试中模拟 window.resize 事件，我们需要使用 jsdom 库创建一个虚拟的 DOM 环境，并手动触发 resize 事件。

// javascriptcn.com 代码示例
const { JSDOM } = require("jsdom");

test('test window resize event', () => {
  const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
  global.window = dom.window;
  global.document = dom.window.document;

  // 添加 resize 事件监听器
  window.addEventListener('resize', () => {
    expect(window.innerWidth).toBe(500);
    expect(window.innerHeight).toBe(500);
  });

  // 触发 resize 事件
  window.innerWidth = 500;
  window.innerHeight = 500;
  window.dispatchEvent(new Event('resize'));
});

在上面的代码中，我们首先使用 jsdom 创建了一个虚拟的 DOM 环境，并将 window 和 document 对象赋值给全局变量。然后，我们添加了一个 resize 事件监听器，在事件处理函数中断言 window.innerWidth 和 window.innerHeight 的值是否为 500。最后，我们手动触发了 resize 事件，并期望断言能够通过。

总结

在 Jest 测试中模拟 window.resize 事件，我们需要使用 jsdom 库创建一个虚拟的 DOM 环境，并手动触发 resize 事件。这种方式可以方便地模拟页面的交互和响应能力，提高测试的覆盖率和可靠性。希望本文能够对读者有所启发和帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6563d543d2f5e1655dd49770