angular - 提供 Angular 路由器获取“无法读取未定义的属性‘根’”
问题描述
我正在尝试测试一个按钮,当单击该按钮时,它会导航到我的主页,但是当我为 Router 类提供 Jasmine Spy 对象时,我得到一个“TypeError:无法读取未定义的属性'root'”。
describe('Error404Component', () =>
{
let component: Error404Component;
let fixture: ComponentFixture<Error404Component>;
const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
beforeEach(async(() =>
{
TestBed.configureTestingModule({
imports: [
AppModule
]
})
.compileComponents();
}));
beforeEach(() =>
{
TestBed.overrideProvider(Router, { useValue: routerSpy });
fixture = TestBed.createComponent(Error404Component);
component = fixture.componentInstance;
fixture.autoDetectChanges();
});
fit('should navigate', fakeAsync(() =>
{
const buttons = fixture.debugElement.queryAll(By.css('.button_link'));
expect(buttons).toBeTruthy();
const homeButton = buttons[0];
(homeButton.nativeElement as HTMLButtonElement).click();
fixture.detectChanges();
tick();
const spy = routerSpy.navigate as jasmine.Spy;
expect(spy.calls.any()).toBeTruthy();
expect(spy.calls.first().args[0][0]).toEqual(HOME_PATH);
}));
});
解决方案
您应该在使用 TestBedrouter
时提供组件中使用的所有其他服务注入。configureTestingModule
describe('Error404Component', () =>
{
class MockRouter {
navigate = jasmine.createSpy('navigate');
}
let component: Error404Component;
let fixture: ComponentFixture<Error404Component>;
let routerSpy;
beforeEach(async(() =>
{
routerSpy= new MockRouter();
TestBed.configureTestingModule({
imports: [
AppModule
],
providers: [{ provide: Router, useValue: routerSpy }],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() =>
{
fixture = TestBed.createComponent(Error404Component);
component = fixture.componentInstance;
fixture.autoDetectChanges();
});
fit('should navigate', fakeAsync(() =>
{
const buttons = fixture.debugElement.queryAll(By.css('.button_link'));
expect(buttons).toBeTruthy();
const homeButton = buttons[0];
(homeButton.nativeElement as HTMLButtonElement).click();
fixture.detectChanges();
tick();
const spy = routerSpy.navigate as jasmine.Spy;
expect(spy.calls.any()).toBeTruthy();
expect(spy.calls.first().args[0][0]).toEqual(HOME_PATH);
}));
});
推荐阅读
- typescript - 如何从离子中的承诺中返回价值
- r - 你如何将你的cutree结果链接回你的数据框
- javascript - 如何在圆内绘制三角形指针
- java - 标签的 JavaFX 鼠标单击事件
- python - Python3:在 GUVI 上输入时出现 EOF 错误
- cmake - 如何每次 cmake 调用只打印一次消息?
- deployment - Nextjs/postcss css 变量在生产中不可用 (Zeit)
- r - 错误的维度数量股票价格
- angular - Angular Production Build 找不到插件“proposal-numeric-separator”
- io - 如何使用 Fortran 从 *.obj 文件中读取人脸信息