[英]Angular 2 RC 4 “(SystemJS) Can't resolve all parameters for [object Location]: ” in IE 11
[英]Can't resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?) in Angular RC 5 when unit testing
我刚刚升级到Angular RC 5,现在所有使用'ROUTER_DIRECTIVES'的组件都失败了'当我尝试进行单元测试时,无法解析路由器的所有参数:(?,?,?,?,?,?,?)组件。
import { inject, addProviders } from '@angular/core/testing';
import { ComponentFixture, TestComponentBuilder } from '@angular/core/testing';
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, Router } from '@angular/router';
import { HomeComponent } from './home.component';
import { UserService } from '../_services/user.service';
describe('Component: Home', () => {
beforeEach(() => {
addProviders([HomeComponent, UserService, ROUTER_DIRECTIVES, Router]);
});
it('should inject the component', inject([HomeComponent, UserService, ROUTER_DIRECTIVES, Router],
(component: HomeComponent) => {
expect(component).toBeTruthy();
// expect(component.currentUser.firstname).toEqual('Jan');
}));
完整的错误日志:
Chrome 52.0.2743 (Windows 10 0.0.0)
Error: Can't resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?).
at new BaseException (webpack:///C:/ng/anbud/~/@angular/compiler/src/facade/exceptions.js:27:0 <- src/test.ts:2943:23)
at CompileMetadataResolver.getDependenciesMetadata (webpack:///C:/ng/anbud/~/@angular/compiler/src/metadata_resolver.js:551:0 <- src/test.ts:24542:19)
at CompileMetadataResolver.getTypeMetadata (webpack:///C:/ng/anbud/~/@angular/compiler/src/metadata_resolver.js:448:0 <- src/test.ts:24439:26)
at webpack:///C:/ng/anbud/~/@angular/compiler/src/metadata_resolver.js:594:0 <- src/test.ts:24585:41
at Array.forEach (native)
at CompileMetadataResolver.getProvidersMetadata (webpack:///C:/ng/anbud/~/@angular/compiler/src/metadata_resolver.js:575:0 <- src/test.ts:24566:19)
at CompileMetadataResolver.getNgModuleMetadata (webpack:///C:/ng/anbud/~/@angular/compiler/src/metadata_resolver.js:305:0 <- src/test.ts:24296:58)
at RuntimeCompiler._compileComponents (webpack:///C:/ng/anbud/~/@angular/compiler/src/runtime_compiler.js:150:0 <- src/test.ts:37986:47)
at RuntimeCompiler._compileModuleAndAllComponents (webpack:///C:/ng/anbud/~/@angular/compiler/src/runtime_compiler.js:78:0 <- src/test.ts:37914:37)
at RuntimeCompiler.compileModuleAndAllComponentsSync (webpack:///C:/ng/anbud/~/@angular/compiler/src/runtime_compiler.js:52:0 <- src/test.ts:37888:21)
有关如何使用路由单元测试组件的任何想法?
终于能够解决它,它就像这样简单:
beforeEach(() => addProviders([
{
provide: Router,
useClass: class { navigate = jasmine.createSpy("navigate"); }
}]));
对我来说,它可以添加RouterTestingModule
import { RouterTestingModule } from '@angular/router/testing';
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [ HomeComponent ]
})
.compileComponents();
}));
我对上述解决方案没有任何好运。 相反,我遵循官方文档中推荐的方法: 测试路由组件
首先,使用组件调用的任何方法创建一个存根路由器:
class RouterStub {
navigateByUrl(url: string) {
return url;
}
}
然后,在配置测试模块时,执行以下操作:
TestBed.configureTestingModule({
declarations: [HeaderComponent],
providers: [
{provide: Router, useClass: RouterStub}
]
});
就我而言,我在提供程序中使用了Router,在导入中使用了RouterTestingModule。 猜猜这是造成冲突的原因。 以下配置有效:
TestBed.configureTestingModule({
declarations: [Component],
imports: [
RouterTestingModule,
],
providers: [
... //Remove Router from providers
]
});
尝试添加RouterModule:
import { ROUTER_DIRECTIVES, Router, RouterModule } from '@angular/router';
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
...
{provide: Router, useClass: RouterModule},
});
});
我只需要从提供商中删除路由器 。 这对我来说是个问题。
我得到了同样的错误,在我的导入数组中导入RouterTestModule,从提供程序中删除Router / ActivatedRoute,并从我的导入数组中删除RouterModule帮助我克服了这个问题。
这就是我的工作版本的样子
import { RouterTestingModule } from '@angular/router/testing';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { MyAppComponent } from './my-apppp.component';
import { MyAppService } from '../../../services/my-app.service';
import { NO_ERRORS_SCHEMA} from '@angular/core';
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MyAppComponent ],
schemas: [NO_ERRORS_SCHEMA],
imports: [ FormsModule, RouterTestingModule ],
providers: [ MyAppService ]
})
.compileComponents();
}));
我知道很多人已在此处发表评论,但我觉得提供更新的答案会有所帮助。
谢谢!
对于最新的Angular 7,这是适用于我的解决方案。 该示例是从最新的角度文档复制而来的。
app / dashboard / dashboard.component.spec.ts(间谍)
const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
const heroServiceSpy = jasmine.createSpyObj('HeroService', ['getHeroes']);
TestBed.configureTestingModule({
providers: [
{ provide: HeroService, useValue: heroServiceSpy },
{ provide: Router, useValue: routerSpy }
]
})
app / dashboard / dashboard.component.spec.ts(导航测试)
it('should tell ROUTER to navigate when hero clicked', () => {
heroClick(); // trigger click on first inner <div class="hero">
// args passed to router.navigateByUrl() spy
const spy = router.navigateByUrl as jasmine.Spy;
const navArgs = spy.calls.first().args[0];
// expecting to navigate to id of the component's first hero
const id = comp.heroes[0].id;
expect(navArgs).toBe('/heroes/' + id,
'should nav to HeroDetail for first hero');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.