Angular模板添加routerLink后Jasmine/Karma报TypeError错误求助

问题场景 #

在Angular组件模板中添加带routerLink的链接后，单元测试抛出Cannot read properties of undefined (reading 'events')错误，移除routerLink后测试恢复正常。

模板新增代码 #

<a class="nav-link" routerLink="../loja-lista" role="tab" type="button">
<fa-icon [icon]="faArrowLeft" style="font-size: x-large; color: #225262"> </fa-icon>
</a>

依赖版本 #

"@angular/common": "^15.2.9",
    "@angular/compiler": "^15.2.9",
    "@angular/core": "^15.2.9",
    ...
    ...
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",

报错信息 #

TypeError: Cannot read properties of undefined (reading 'events')
TypeError: Cannot read properties of undefined (reading 'events')
    at new RouterLink (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/router/fesm2020/router.mjs:5711:40)
    at NodeInjectorFactory.factory (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/router/fesm2020/router.mjs:5865:16)
    at getNodeInjectable (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:3431:44)

当前测试代码 #

import { ComponentFixture, TestBed } from '@angular/core/testing';

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

import { ActivatedRoute, Router } from '@angular/router';

import { LOJAApi } from 'my-lib';
import { EdicaoComponent } from './edicao.component';

describe('EdicaoComponent', () => {
  let component: EdicaoComponent;
  let fixture: ComponentFixture<EdicaoComponent>;
  let lojaService: LOJAApi;
  let router: Router;
  let route: ActivatedRoute;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [HttpClientTestingModule, RouterTestingModule, EdicaoComponent],
      providers: [
        { provide: LOJAApi, useValue: lojaService },
        { provide: Router, useValue: router },
        { provide: ActivatedRoute, useValue: route },
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(EdicaoComponent);
    component = fixture.componentInstance;

    lojaService = TestBed.inject(LOJAApi);
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should return all phone info', () => {
    component.edicaoForm.value.DDD_FONE = null;
    component.edicaoForm.value.FONE = null;
    expect(component.getPhone()).toBe('00 000000000');
  });

  it('should return DDD', () => {
    component.edicaoForm.value.TELEFONE = '11999999999';
    expect(component.handleDDD()).toBe('11');
  });

  it('should return phone', () => {
    component.edicaoForm.value.TELEFONE = '11999999999';
    expect(component.handlePhone()).toBe('999999999');
  });
});

解决方案 #

问题根源在于测试配置中手动提供了未初始化的Router和ActivatedRoute变量，覆盖了RouterTestingModule提供的正常测试实例。RouterLink指令依赖Router内部的events属性，而未初始化的变量为undefined，直接导致报错。

修改步骤 #

1. 删除providers数组中手动配置的Router和ActivatedRoute，RouterTestingModule已经内置了这两个服务的测试实现。
2. 修正LOJAApi的模拟配置，原代码中使用未初始化的lojaService变量会引发其他潜在问题，需替换为包含必要方法的模拟对象。

修改后的测试配置代码：

beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [
      HttpClientTestingModule,
      RouterTestingModule,
      EdicaoComponent
    ],
    providers: [
      // 提供LOJAApi的模拟对象，根据实际需求添加方法
      { provide: LOJAApi, useValue: { 
          getLoja: jasmine.createSpy(),
          updateLoja: jasmine.createSpy()
        } 
      }
    ],
  }).compileComponents();

  fixture = TestBed.createComponent(EdicaoComponent);
  component = fixture.componentInstance;

  lojaService = TestBed.inject(LOJAApi);
  router = TestBed.inject(Router); // 从TestBed获取Router实例
  route = TestBed.inject(ActivatedRoute); // 从TestBed获取ActivatedRoute实例
});

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