Vitest中visualViewport未定义：如何在测试时定义该对象？

jsdom默认并未实现visualViewport这个移动端专属API，所以需要手动在测试环境中模拟该对象，以下是几种可行的方案：

方案一：单个测试文件局部模拟 #

在你的测试文件开头，添加全局对象模拟代码：

// 模拟基础的visualViewport对象，可根据测试需求调整属性值
vi.stubGlobal('visualViewport', {
  width: 1200, // 初始设为桌面端宽度
  addEventListener: vi.fn(),
  removeEventListener: vi.fn() // 若需要测试移除监听逻辑，可添加此方法
});

如果需要测试resize事件的触发逻辑，可以在测试用例中手动调用监听回调：

// 从mock调用中获取resize事件的回调函数
const resizeHandler = visualViewport.addEventListener.mock.calls.find(item => item[0] === 'resize')[1];

// 模拟移动端视口宽度，触发回调
resizeHandler({ target: { width: 768 } });

// 验证组件状态是否符合预期
expect(options.isDesktop).toBe(false);

方案二：全局统一配置（多测试文件复用） #

如果多个测试都需要用到visualViewport，可以在Vitest全局配置中统一添加模拟：

1. 在项目根目录创建vitest.setup.js文件，写入模拟代码：

import { vi } from 'vitest';

vi.stubGlobal('visualViewport', {
  width: 1200,
  addEventListener: vi.fn(),
  removeEventListener: vi.fn()
});

2. 在vitest.config.js中配置setup文件：

export default defineConfig({
  test: {
    setupFiles: ['./vitest.setup.js'],
    // 其他配置项...
  }
});

这样所有测试文件运行时都会自动拥有visualViewport对象，无需重复编写模拟代码。

内容的提问来源于stack exchange，提问作者Rob Simpson