使用Router依赖对Angular服务进行单元测试："TypeError: Cannot read property 'navigate‘of undefined“

在使用Angular进行单元测试时，遇到TypeError: Cannot read property 'navigate' of undefined错误通常是因为在测试环境中，路由器（Router）服务没有被正确注入或模拟。

基础概念

Angular的路由器（Router）服务用于处理应用程序的导航。它允许你在不同的组件之间进行导航，并且可以传递参数。

类型

根路由器：应用程序的主路由器。
子路由器：嵌套在父组件中的路由器。

应用场景

单页应用程序（SPA）中的页面导航。
根据URL路径加载不同的组件。

问题原因

在单元测试中，如果没有正确注入或模拟路由器服务，就会导致TypeError: Cannot read property 'navigate' of undefined错误。

解决方法

在单元测试中，你需要确保路由器服务被正确注入或模拟。以下是一个示例，展示如何在Angular单元测试中正确注入和模拟路由器服务。

示例代码

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { MyComponent } from './my.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let routerMock;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [MyComponent]
    }).compileComponents();

    // 创建一个模拟的路由器
    routerMock = {
      navigate: jasmine.createSpy('navigate')
    };

    // 使用模拟的路由器替换实际的路由器
    TestBed.overrideProvider(Router, { useValue: routerMock });
  });

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

  it('should call router navigate on button click', () => {
    const button = fixture.nativeElement.querySelector('button');
    button.click();

    expect(routerMock.navigate).toHaveBeenCalledWith(['/some-path']);
  });
});