Angular中使用Jasmine测试window.addEventListener的popstate事件

先修正原代码的错误 #

你的navigate方法里存在语法错误：if (event.state['tab'] = 'new-page')是赋值操作，应改为全等判断===，同时建议添加可选链避免event.state为null/undefined时的报错：

navigate() {
  window.addEventListener('popstate', (event) => {
    if (event.state?.['tab'] === 'new-page') {
      window.location.href = 'www.test-this-page.abcd';
    }
  });
}

Jasmine测试方案 #

要触发带特定参数的popstate事件，需要手动创建并派发事件，同时推荐模拟window对象以隔离测试环境：

步骤1：搭建测试环境

在测试文件中模拟window对象，避免操作真实浏览器环境：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your.component';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;
  let windowSpy: jasmine.SpyObj<Window>;

  beforeEach(async () => {
    // 创建模拟window对象
    windowSpy = jasmine.createSpyObj('Window', ['addEventListener']);
    // 将模拟对象注入测试模块
    await TestBed.configureTestingModule({
      declarations: [YourComponent],
      providers: [{ provide: Window, useValue: windowSpy }]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

步骤2：触发自定义popstate事件

调用navigate方法后，手动获取事件回调并传入自定义参数：

it('should redirect when popstate event with tab=new-page is triggered', () => {
    // 调用navigate注册事件监听
    component.navigate();

    // 获取注册的popstate回调函数
    const popStateCallback = windowSpy.addEventListener.calls.mostRecent().args[1];
    // 创建带自定义state的事件对象
    const mockEvent = new PopStateEvent('popstate', {
      state: { tab: 'new-page' }
    });

    // 执行回调
    popStateCallback(mockEvent);

    // 验证跳转逻辑是否执行
    expect(window.location.href).toBe('www.test-this-page.abcd');
  });
});

简化版（直接操作真实window，适合简单场景）

如果不需要隔离环境，也可以直接在真实window上派发事件：

it('should handle popstate event with specific state', () => {
  component.navigate();
  
  // 直接派发带自定义state的popstate事件
  window.dispatchEvent(new PopStateEvent('popstate', {
    state: { tab: 'new-page' }
  }));

  expect(window.location.href).toBe('www.test-this-page.abcd');
});

注意事项 #

• 测试完成后建议移除事件监听，避免影响其他测试：可在afterEach钩子中调用window.removeEventListener，或使用模拟window的方式自动隔离。
• 始终用全等判断===替代赋值操作=，避免逻辑错误。

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