angular - 角度单元测试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();
});
});
解决方案
推荐阅读
- javascript - 如何等待变量以角度设置
- post - Angular 7 HttpClient POST - 错误请求
- php - laravel 第二个连接返回查询为空
- r - GGplot 未在 RStudio 上显示
- laravel - Laravel Nova:替换主路由并作为默认应用程序运行
- python - 计算检测到的对象像素数占图片总像素数的百分比
- swift - 使用 Any 而不是泛型
- docker - 如何配置 docker-compose 卷访问权限
- database - MongoDB WiredTiger 是否使用聚集索引?
- android - Kotlin,警报管理器不触发