JSDOM全局属性在angular-testing-library集成测试中无法设置

核心原因 #

JSDOM测试环境不会自动加载Preline UI的全局HSStaticMethods对象，而你的组件在路由导航结束后会调用window.HSStaticMethods.autoInit()，导致测试报错。

解决方案 #

方法1：全局模拟HSStaticMethods（推荐） #

在测试启动文件（test-setup.ts）中直接为window对象挂载模拟的HSStaticMethods，所有测试用例都会自动生效：

import type { IStaticMethods } from 'preline';

declare global {
  interface Window {
    HSStaticMethods: IStaticMethods;
  }
}

// 模拟Preline的静态方法，autoInit设为jest空函数（可按需扩展其他方法）
window.HSStaticMethods = {
  autoInit: jest.fn(),
  // 若组件用到其他Preline静态方法，在此添加空实现即可
} as unknown as IStaticMethods;

完成后，你的测试用例就能正常执行，还可以验证autoInit是否被正确调用：

// 在jest.runAllTimers()之后添加验证逻辑
expect(window.HSStaticMethods.autoInit).toHaveBeenCalled();

方法2：仅在单个测试用例中模拟 #

如果不想全局修改测试环境，也可以在目标测试用例的开头直接挂载模拟对象：

it('should open the Preline dropdown', async () => {
  // 先模拟HSStaticMethods
  window.HSStaticMethods = {
    autoInit: jest.fn(),
  } as unknown as IStaticMethods;

  const user = userEvent.setup();
  // ... 剩余测试代码保持不变
});

额外优化建议 #

1. 移除jest.config.ts中不必要的moduleNameMapper配置——你需要的是全局对象，而非模块映射。
2. 测试下拉交互时，无需依赖Preline的真实初始化逻辑：模拟autoInit后，直接通过用户交互测试DOM类名变化即可，这符合集成测试聚焦组件行为的原则。

内容的提问来源于stack exchange，提问作者Florestan Korp