Angular Testing: Uncaught Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home'
Angular Testing: Uncaught Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home'
我正在尝试 运行 对名为 UserComponent
的 Angular 组件进行业力测试。在这个组件中,我有一个我的 ngOnInit 这样做:
ngOnInit() {
const stream = this.tokenSvc.authTokens.pipe(switchMap((x) => {
this.infoSvc.fetchUserInfo().toPromise().then((y) => {
localStorage.setItem("oauth", this.tokenSvc.oAuthToken);
localStorage.setItem("username", y["id"]);
this.infoSvc.updateAlbums()
this.infoSvc.login(y["id"], this.tokenSvc.oAuthToken).toPromise().then((z) => {
this.router.navigate(['home']);
})
}).catch((e) => {
console.log("unable to fetch user data")
});
return this.infoSvc.fetchUserInfo();
}));
this.stream = stream.subscribe((x) =>
this.user = x
)
}
错误的关键是 this.router.navigate(['home']);
行。由于某种原因,它无法将主页与我的路由中的组件相匹配。虽然,该组件在我的路由中:
{
path:'home',
component: HomeComponent,
canActivate: [
AuthGuard
]
}
在我的测试中,我读到 说要尝试将 withRoutes 添加到测试中,尽管这没有用。这是我的测试代码
describe('UserComponent', () => {
let component: UserComponent;
let fixture: ComponentFixture<UserComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FaIconComponent, AlbumInfoComponent, UserComponent, HomeComponent, SearchBarComponent, RecentReleaseComponent, YourQueueComponent ],
imports: [FormsModule , HttpClientTestingModule, RouterTestingModule.withRoutes([{path: 'home', component: HomeComponent}])],
providers: [AuthService, TokenService, InfoService]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
在那里,您可以看到我尝试使用 withRoutes 并添加路径和组件覆盖,但没有成功。这是完整的错误:
Uncaught Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home'
Error: Cannot match any routes. URL Segment: 'home'
您需要将路由器初始化到您的测试套件中:
// add a router declaration at the top of your describe
let router: Router;
// enhance your second beforeEach by instancing the router and initializing the navigation
beforeEach(() => {
fixture = TestBed.createComponent(UserComponent);
component = fixture.componentInstance;
fixture.detectChanges();
router = TestBed.get(Router);
router.initialNavigation();
})
我正在尝试 运行 对名为 UserComponent
的 Angular 组件进行业力测试。在这个组件中,我有一个我的 ngOnInit 这样做:
ngOnInit() {
const stream = this.tokenSvc.authTokens.pipe(switchMap((x) => {
this.infoSvc.fetchUserInfo().toPromise().then((y) => {
localStorage.setItem("oauth", this.tokenSvc.oAuthToken);
localStorage.setItem("username", y["id"]);
this.infoSvc.updateAlbums()
this.infoSvc.login(y["id"], this.tokenSvc.oAuthToken).toPromise().then((z) => {
this.router.navigate(['home']);
})
}).catch((e) => {
console.log("unable to fetch user data")
});
return this.infoSvc.fetchUserInfo();
}));
this.stream = stream.subscribe((x) =>
this.user = x
)
}
错误的关键是 this.router.navigate(['home']);
行。由于某种原因,它无法将主页与我的路由中的组件相匹配。虽然,该组件在我的路由中:
{
path:'home',
component: HomeComponent,
canActivate: [
AuthGuard
]
}
在我的测试中,我读到
describe('UserComponent', () => {
let component: UserComponent;
let fixture: ComponentFixture<UserComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FaIconComponent, AlbumInfoComponent, UserComponent, HomeComponent, SearchBarComponent, RecentReleaseComponent, YourQueueComponent ],
imports: [FormsModule , HttpClientTestingModule, RouterTestingModule.withRoutes([{path: 'home', component: HomeComponent}])],
providers: [AuthService, TokenService, InfoService]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
在那里,您可以看到我尝试使用 withRoutes 并添加路径和组件覆盖,但没有成功。这是完整的错误:
Uncaught Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home'
Error: Cannot match any routes. URL Segment: 'home'
您需要将路由器初始化到您的测试套件中:
// add a router declaration at the top of your describe
let router: Router;
// enhance your second beforeEach by instancing the router and initializing the navigation
beforeEach(() => {
fixture = TestBed.createComponent(UserComponent);
component = fixture.componentInstance;
fixture.detectChanges();
router = TestBed.get(Router);
router.initialNavigation();
})