如何在Angular单元测试中同时验证window.addEventListener与location.href赋值？

目标代码 #

this.window.addEventListener('pathSelectedFromMfe', (customEvent: CustomEvent) => {
  this.window.location.href = customEvent.detail.path;
});

已尝试的测试方案 #

• 尝试无Mock的事件监听器测试方案，希望不修改window.location.href的前提下验证监听逻辑，但测试时触发“Some of your tests did a full page reload!”错误，导致失败。
• 采用Mockwindow.location.href的方案，可单独验证赋值逻辑，但不知道如何调整以同时测试window.addEventListener的注册与触发逻辑。

解决方案：Mock完整window对象，兼顾监听与赋值测试 #

以下是一套完整的测试方案，通过Mock整个window对象，既避免真实页面跳转，又能同时验证事件监听和回调逻辑：

1. 配置Mock window对象

在测试模块中提供一个包含addEventListener spy和模拟location.href的Mock window：

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;
  // 定义Mock window，包含监听方法和location属性
  const mockWindow = {
    addEventListener: jasmine.createSpy('addEventListener'),
    location: {
      href: ''
    }
  };

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourComponent],
      providers: [
        { provide: Window, useValue: mockWindow }
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    // 将Mock window绑定到组件实例（如果组件通过属性持有window引用）
    component.window = mockWindow;
    fixture.detectChanges();
  });

2. 验证事件监听器的注册

测试组件初始化后，是否正确注册了目标事件：

it('should register pathSelectedFromMfe event listener', () => {
  expect(mockWindow.addEventListener).toHaveBeenCalledWith(
    'pathSelectedFromMfe', 
    jasmine.any(Function)
  );
});

3. 触发事件并验证赋值逻辑

取出注册的回调函数，手动触发后检查location.href是否被正确赋值：

it('should update window.location.href when pathSelectedFromMfe event fires', () => {
  // 获取注册的事件回调
  const eventCallback = mockWindow.addEventListener.calls.mostRecent().args[1];
  const testPath = '/test-target-path';
  // 构造自定义事件
  const testEvent = new CustomEvent('pathSelectedFromMfe', {
    detail: { path: testPath }
  });

  // 触发回调函数
  eventCallback(testEvent);

  // 验证赋值结果
  expect(mockWindow.location.href).toBe(testPath);
});
});

核心说明 #

• 通过Mock完整window对象，彻底避免了真实修改location.href导致的页面刷新问题。
• 同时覆盖了两个测试点：事件监听器是否正确注册，以及事件触发时的赋值逻辑是否符合预期。
• 如果你的组件是通过Angular依赖注入获取window实例（而非直接使用全局window），这种Mock方式更符合框架的测试规范。

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