Angular 5与Mocha单元测试：监视组件方法时路由匹配失败

这个问题我之前在写Angular组件测试时也踩过坑，本质是单元测试环境默认没有配置Angular Router的模拟实现，当你点击带有routerLink的按钮时，测试代码会尝试触发真实的路由导航，但测试环境里没有对应的路由配置，所以就抛出了Cannot match any routes. URL Segment: '/'的错误。

下面给你几个可行的解决方案，按推荐程度排序：

1. 导入RouterTestingModule配置模拟路由 #

这是最规范的做法，Angular官方提供了RouterTestingModule来在测试环境中模拟Router的行为，不会触发真实的页面跳转。

在你的测试文件中，需要在TestBed.configureTestingModule的imports数组里添加这个模块，同时别忘了导入组件依赖的其他模块（比如Translate、Material组件）：

import { RouterTestingModule } from '@angular/router/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourNavComponent } from './your-nav.component';
import { TranslateModule } from '@ngx-translate/core';
import { MatButtonModule } from '@angular/material/button';
import { MatNavListModule } from '@angular/material/list';

describe('YourNavComponent', () => {
  let component: YourNavComponent;
  let fixture: ComponentFixture<YourNavComponent>;
  let router: Router;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourNavComponent],
      imports: [
        // 配置空的测试路由，或者添加你需要测试的路由规则
        RouterTestingModule.withRoutes([]),
        // 因为组件用了translate管道，必须导入Translate测试模块
        TranslateModule.forRoot(),
        // Material组件的测试模块也要导入
        MatButtonModule,
        MatNavListModule
      ]
    }).compileComponents();

    router = TestBed.inject(Router);
    fixture = TestBed.createComponent(YourNavComponent);
    component = fixture.componentInstance;
    // 给组件传入测试用的navList数据（注意和你模板里的变量名对应）
    component.navList = [{ url: '/', label: 'navigation.home' }];
    fixture.detectChanges();
  });

  it('should trigger doSomething when nav link is clicked', () => {
    // 监视组件的doSomething方法
    const doSomethingSpy = spyOn(component, 'doSomething');
    // 可选：如果需要验证路由跳转，可以监视router.navigate
    const navigateSpy = spyOn(router, 'navigate').and.returnValue(Promise.resolve(true));

    // 获取页面上的导航按钮并模拟点击
    const navLink = fixture.nativeElement.querySelector('a');
    navLink.click();

    // 断言doSomething被调用
    expect(doSomethingSpy).toHaveBeenCalled();
    // 可选：断言路由跳转的参数正确
    expect(navigateSpy).toHaveBeenCalledWith(['/']);
  });
});

2. 直接监视Router的navigate方法阻止跳转 #

如果你的测试只关心doSomething方法是否被调用，不需要验证路由行为，可以直接spyOn Router的navigate方法，让它返回一个resolved promise，这样就不会触发实际的导航操作：

it('should call doSomething on link click', () => {
  const router = TestBed.inject(Router);
  // 阻止router的导航行为
  spyOn(router, 'navigate').and.returnValue(Promise.resolve(true));
  
  const doSomethingSpy = spyOn(component, 'doSomething');
  const navLink = fixture.nativeElement.querySelector('a');
  navLink.click();

  expect(doSomethingSpy).toHaveBeenCalled();
});

额外注意点 #

• 你的代码里提到组件接收的是navItems数组，但模板里用的是navList，测试时要确保组件的navList属性被正确赋值，否则*ngFor不会渲染任何元素，点击事件也无法触发。
• 组件用到了translate管道和Material组件，测试模块必须导入对应的测试模块（TranslateModule.forRoot()、MatButtonModule等），否则组件编译会失败。

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