Angular测试：如何在测试中模拟history.state.value对象？

下面两种方法可以在WelcomeComponent的测试中模拟history.state对象：

方法一：直接修改window.history.state #

如果你的组件在初始化时直接读取history.state.value，可以在测试用例或beforeEach中直接设置window.history.state：

// 在测试用例中
it('should retrieve state value correctly', () => {
  // 模拟表单值
  const mockFormValue = { username: 'demo', email: 'demo@example.com' };
  // 设置history.state
  window.history.state = { value: mockFormValue };
  
  // 创建组件
  fixture = TestBed.createComponent(WelcomeComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
  
  // 断言组件已正确获取state值
  expect(component.formValue).toEqual(mockFormValue);
});

测试完成后建议重置state，避免影响其他测试：

afterEach(() => {
  window.history.state = {};
});

方法二：通过RouterTestingModule模拟带state的导航 #

如果你的测试需要完整模拟从Home组件导航到Welcome组件的流程，可以使用RouterTestingModule：

1. 先在TestBed配置中导入路由测试模块：

import { RouterTestingModule } from '@angular/router/testing';

TestBed.configureTestingModule({
  imports: [
    RouterTestingModule.withRoutes([
      { path: 'welcome', component: WelcomeComponent }
    ])
  ],
  declarations: [WelcomeComponent]
});

2. 在测试用例中触发导航并传入state：

it('should get state value when navigating to welcome', async () => {
  const router = TestBed.inject(Router);
  const mockFormValue = { name: 'test', phone: '123456' };
  
  // 执行导航并传入state
  await router.navigate(['/welcome'], { state: { value: mockFormValue } });
  
  // 创建组件并触发变更检测
  fixture = TestBed.createComponent(WelcomeComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
  
  // 验证组件获取到的state值正确
  expect(component.formValue).toEqual(mockFormValue);
});

注意：如果组件在ngOnInit中读取history.state，确保导航完成后再初始化组件，这样state已经被正确设置。

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