角度业力测试:类型错误:无法读取 null 的属性'path'



我正在尝试对角度组件的角度因果报应进行一些测试,以确定路线。

组件的结构类似于

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-basic-form',
templateUrl: './basic-form.component.html',
styleUrls: ['./basic-form.component.less'],
})
export class BasicFormComponent implements OnInit { 
constructor(
public activatedRoute: ActivatedRoute,
) {}
ngOnInit() {
if(this.activatedRoute.snapshot.routeConfig.path === 'basic-form/:date'){ // route with date
let date = this.route.snapshot.paramMap.get('date'); // get the date
} else {
// no worries, just use the latest date, and this component can be used on multiple routes  
}
}

在我的测试文件中,我有

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { BasicFormComponent } from './basic-form.component';

describe('BasicFormComponent', () => {
let component: BasicFormComponent;
let fixture: ComponentFixture<BasicFormComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ BasicFormComponent ],
imports: [DemoMaterialModule, ReactiveFormsModule, FormsModule, HttpClientTestingModule,  RouterTestingModule.withRoutes([])],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
providers: [
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BasicFormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component.activatedRoute.snapshot.routeConfig.path).toBeTruthy(); // why is this not working?
});
});

我得到的错误是

BasicFormComponent应创建TypeError:无法读取属性null TypeError的"path":无法读取未定义的属性"snapshot">

为什么不导入激活的Route模块?

我正试图让我的头脑清醒地测试,这似乎是一门黑暗的艺术。

如有任何指导,我们将不胜感激。

感谢@Gérôme Grignon为我指明了正确的方向。

删除错误的答案如下,请注意提供程序中的使用值设置。没有更多错误。

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { BasicFormComponent } from './basic-form.component';

describe('BasicFormComponent', () => {
let component: BasicFormComponent;
let fixture: ComponentFixture<BasicFormComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ BasicFormComponent ],
imports: [DemoMaterialModule, ReactiveFormsModule, FormsModule, HttpClientTestingModule,  RouterTestingModule.withRoutes([])],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
providers: [ BasicFormComponent, {
provide: ActivatedRoute, 
useValue: {snapshot: {params: {'date': ''}, routeConfig: {'path': 'basic-form-edit/:date'}}}
}]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BasicFormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component.activatedRoute.snapshot.routeConfig.path).toBeTruthy(); // why is this not working?
});
});

最新更新