Angular路由模块测试调用detectChanges()出现undefined错误求助

问题根源 #

你遇到的错误是因为测试模块中同时使用了RouterTestingModule和MockProvider(Router)：后者会覆盖前者提供的测试用Router实例，而默认的MockProvider(Router)会创建一个空对象，没有初始化events属性，导致LoginComponent的ngOnInit中调用this.router.events.subscribe时触发Cannot read properties of undefined错误。

解决方案 #

方案1：移除冲突的MockProvider #

保留RouterTestingModule即可，它会提供一个完整的、适合测试的Router实例，包含events等必要属性。同时调整代码顺序，确保路由初始化完成后再创建组件。

修改后的测试代码：

describe('TEST: RoutingModule', () => {
  let appComponent: AppComponent;
  let loginComponent: LoginComponent;

  let appComponentFixture: ComponentFixture<AppComponent>
  let loginComponentFixture : ComponentFixture<LoginComponent>;

  let router: Router;
  let location: Location;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent, LoginComponent],
      providers: [MockProvider(CookieService), MockProvider(Store)], // 移除MockProvider(Router)
      imports: [RouterTestingModule.withRoutes(AppRoutes.getStatics())]
    }).compileComponents(); 
  });

  beforeEach(() => {
    router = TestBed.inject(Router);
    location = TestBed.inject(Location);
    
    // 先完成路由初始化
    router.initialNavigation();

    // 再创建组件并触发变更检测
    loginComponentFixture = TestBed.createComponent(LoginComponent);
    loginComponent = loginComponentFixture.componentInstance;
    loginComponentFixture.detectChanges(); 

    appComponentFixture = TestBed.createComponent(AppComponent);
    appComponent = appComponentFixture.componentInstance;
  });
});

方案2：自定义Router Mock（如需控制events行为） #

如果需要模拟特定的路由事件（比如NavigationEnd），可以手动创建带events属性的Mock Router：

describe('TEST: RoutingModule', () => {
  // ... 其他变量声明
  const routerEvents = new Subject<any>();

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent, LoginComponent],
      providers: [
        MockProvider(CookieService), 
        MockProvider(Store),
        {
          provide: Router,
          useValue: {
            events: routerEvents.asObservable(),
            navigate: jasmine.createSpy('navigate') // 按需添加其他Router方法
          }
        }
      ],
      imports: [RouterTestingModule.withRoutes(AppRoutes.getStatics())]
    }).compileComponents(); 
  });

  // 在测试中可以手动触发路由事件
  it('should handle NavigationEnd event', () => {
    routerEvents.next(new NavigationEnd(1, '/login', '/login'));
    // 执行断言逻辑
  });
});

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