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

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() );
        });
    })));
});

No provider for Location!

然后，如果我尝试设置提供者:[Location] 我收到此错误:

Failed: StaticInjectorError[LocationStrategy]:
StaticInjectorError[LocationStrategy]:
NullInjectorError: No provider for LocationStrategy!

我试图监视路由器，如下所示:

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

但它没有通过“从不调用”的测试。

我该如何解决这个问题？

Answer 1

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

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

删除 RouterTestingModule来自共同的MockModule并将其直接移动到 imports ，解决了问题。

// before
imports: [MockModule],

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