Question

我正在尝试使用某些链接测试组件，例如：

<a routerLink="/contact">Contact</a>

另外，我已经尝试过调查this question，但它没有解决问题。

当我尝试该问题提出的解决方案（下面的代码）时，我不断收到此错误

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [RouterTestingModule],
        declarations: [FooterComponent],
    }).compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(FooterComponent);
    component = fixture.componentInstance;
});

describe('...', () => {
    it('should navigate to "/contact" when clicking on link', async(inject([Location], (location: Location) => {
        fixture.debugElement.query(By.css('.menu')).children[1].nativeElement.click();
        fixture.detectChanges(); 
        fixture.whenStable().then(() => {
            console.log( location.path() );
        });
    })));
});

没有位置提供商！

然后，如果我要设置提供者：[位置]我收到此错误：

失败：StaticInjectorError [LocationStrategy]：
  StaticInjectorError [LocationStrategy]：
  NullInjectorError：没有LocationStrategy的提供者！

我试图窥探路由器，就像这样：

spyOn(router, 'navigate');
expect(router.navigate).toHaveBeenCalled();

但它没有通过'Never called'进行测试。

我该如何解决这个问题？

Answer 1

正如Aluan Haddad在评论中指出的那样，我错过了CommonModules上的imports。

之后，错误消失了，但我无法使其正常工作。原因是因为我使用的是MockModule，我导入了所有常见的服务，组件，模块等。在测试中使用，包括RouterTestingModule。

从公共RouterTestingModule中移除MockModule并将其直接移至imports，解决了问题。

// before
imports: [MockModule],

// after
imports: [RouterTestingModule.withRoutes(routing)],

Answer 2

由于我搜索了一段时间但找不到答案，因此这是为所有无法通过上述答案解决“预期的间谍......但它从未被调用过”问题的人准备的。

angular 的 routerLink 指令实际上使用 'navigateByUrl' 而不是 'navigate' 路由，所以你的间谍必须看起来像这样

spyOn(router, 'navigateByUrl')

Angular 2单元测试routerLink单击html元素

2 个答案: