如何在Angular独立组件中测试routerLinkActive指令？

问题背景 #

当组件为非独立组件时，能正常通过测试用例验证routerLinkActive的状态切换；但将组件改为独立组件后，测试时路由操作无法触发routerLinkActive的状态更新，元素始终无法获得active类，测试报错Expected false to be true。

解决方案 #

以下是针对独立组件的正确测试配置，核心是保留真实的路由指令关联、正确初始化路由环境：

1. 保持独立组件的正确配置 #

组件本身无需修改（可移除未使用的RouterOutlet导入）：

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'sb-index',
  standalone: true,
  template: `
    <a [routerLink]="['routeA']" [routerLinkActive]="'active'">A</a>
    <a [routerLink]="['routeB']" [routerLinkActive]="'active'">B</a>
  `,
  imports: [RouterLink, RouterLinkActive]
})
export class IndexComponent {}

2. 正确编写测试用例 #

import { Component, NgZone } from '@angular/core';
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Router, RouterLinkActive } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { IndexComponent } from './index.component';

@Component({
  standalone: true,
  selector: 'sb-stub'
})
class StubComponent {}

describe('IndexComponent', () => {
  let fixture: ComponentFixture<IndexComponent>;
  let router: Router;
  let ngZone: NgZone;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        IndexComponent,
        RouterTestingModule.withRoutes([
          { path: 'routeA', component: StubComponent },
          { path: 'routeB', component: StubComponent }
        ])
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(IndexComponent);
    router = TestBed.inject(Router);
    ngZone = TestBed.inject(NgZone);
  });

  it('should show "A" route as active', fakeAsync(() => {
    // 初始化路由环境
    ngZone.run(() => {
      router.initialNavigation();
    });
    tick();
    fixture.detectChanges();

    // 导航到目标路由
    ngZone.run(() => {
      router.navigate(['routeA']);
    });
    tick();
    fixture.detectChanges();

    // 验证active类状态
    const linkElements = fixture.debugElement
      .queryAll(By.directive(RouterLinkActive))
      .map(el => el.nativeElement as HTMLAnchorElement);

    const linkA = linkElements.find(el => el.textContent === 'A')!;
    const linkB = linkElements.find(el => el.textContent === 'B')!;

    expect(linkA.classList.contains('active')).toBeTrue();
    expect(linkB.classList.contains('active')).toBeFalse();
  }));
});

关键注意事项 #

• 不要替换RouterLink为Stub：RouterLinkActive依赖真实的RouterLink指令监听路由变化，使用Stub会破坏两者的关联，导致状态无法更新。
• 必须初始化路由：测试开始时调用router.initialNavigation()完成路由环境的初始化，这是独立组件测试中容易遗漏的步骤。
• 在NgZone中执行路由操作：路由导航属于异步操作，必须包裹在NgZone.run()中，确保Angular能检测到路由变化并触发视图更新。
• 使用RouterTestingModule：该模块会自动配置测试所需的完整路由环境，比直接使用provideRouter更可靠。

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