首页 > 解决方案 > 角度单元测试RouterLink错误TypeError:null不是对象(评估'this.urlSerializer.serializer')

问题描述

我有在 aa 标签中显示一些图像和 routerLink 的组件。现在我无法修复组件的测试用例,我从组件中删除了 routerLink Html 测试用例正在通过我正在共享我的代码让我知道是否需要更多信息。

错误消息:TypeError:null 不是对象(评估“this.urlSerializer.serializer”)

<div  class="error-page">
  <div class="padding-bottom">
    <img role="button" class="img-fluid" alt="Infinity Insurance" src="/assets/KemperAuto-Infinity_Logo.png">
  </div>
  <div class="error-header my-3"><h1>{{'errorMessages.errorHeader' | translate}}</h1>
    <h3>{{'errorMessages.errorHeaderDescription' | translate}}</h3>
  </div>
  <div class="error-description my-5">
    <h1>Error Code: {{statusCode}}</h1>
    <h2>Trace Id: {{traceId}}</h2>
    <h3>{{"errorMessages."+ errorKey | translate}}</h3>
  </div>
  <div class="error-alternative">
    <h3>{{'errorMessages.errorAlternative' | translate}}</h3>
    <a [routerLink]="[checkEmptyString(location) ? '/' : location]" class="btn btn-primary p-3 mr-3"><i class="fas fa-sync"></i> {{'errorMessages.errorAlternativeOptionOne' | translate}}</a>
    <a href="mailto:support@infinity.com?subject=Internal Server Error Message" class="btn btn-secondary p-3"><i class="fas fa-envelope"></i> {{'errorMessages.errorAlternativeOptionTwo' | translate}}</a>
  </div>
</div>

测试用例文件

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {ErrorPageComponent} from './error-page.component';
import {TranslateModule, TranslateService} from '@ngx-translate/core';
import {configureTestSuite} from "../../../../test/configuretest.spec";
import {ErrorService} from "../../../services/errorhandler/error.service";
import {ErrorPageModule} from "./error-page.module";
import {ModalModule} from "ngx-bootstrap";
import {Router, RouterModule} from "@angular/router";
import {MockRouter} from "../../../../test/classes/MockRouter";
import {RouterTestingModule} from "@angular/router/testing";


describe('ErrorPageComponent', () => {
  let component: ErrorPageComponent;
  let fixture: ComponentFixture<ErrorPageComponent>;
  const mockRouter = new MockRouter();
  configureTestSuite();
  beforeAll((done) => (async () => {
    TestBed.configureTestingModule({
      declarations: [],
      imports: [

        ModalModule.forRoot(),
        ErrorPageModule,
        RouterTestingModule.withRoutes([{ path: '/error', component: ErrorPageComponent }]),
        TranslateModule.forRoot(),
      ],
      providers: [
        ErrorService,
        {provide: Router, useValue: mockRouter},
        TranslateService
      ]
    })
      await TestBed.compileComponents();
  })().then(done).catch(done.fail));

  beforeEach(() => {
    fixture = TestBed.createComponent(ErrorPageComponent);
    component = fixture.componentInstance;
    component.ngOnInit();
    // component.location = '/';
    fixture.detectChanges();
  });

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

标签: angularunit-testing

解决方案


推荐阅读