Angular 2 - 使用路由器进行单元测试

Question

在Angular 2.0.0中，我正在对使用Router的组件进行单元测试。但是，我得到'提供的参数不匹配调用目标的任何签名'。错误。在spec.ts的Visual Studio代码中，它是以红色突出显示的新路由器（）

我真的很感激，如果有人能让我知道正确的语法是什么吗？提前致谢。我的代码如下：

spec.ts

import { TestBed, async } from '@angular/core/testing'; 
import { NavToolComponent } from './nav-tool.component'; 
import { ComponentComm } from '../../shared/component-comm.service'; 
import { Router } from '@angular/router'; 

describe('Component: NavTool',() => { 
    it('should create an instance',() => { 
    let component = new NavToolComponent(new ComponentComm(), new Router()); 
    expect(component).toBeTruthy(); 
    }); 
}); 

组件构造

constructor(private componentComm: ComponentComm, private router: Router) {} 

Answer 1

这是因为Route有一定的依赖性，预计传递给它的构造。

如果您使用的是Angular组件，则不应该尝试执行独立测试。您应该使用Angular测试基础架构来准备测试环境。这意味着让Angular创建组件，让它注入所有必需的依赖关系，而不是尝试创建所有内容。

为了让您一开始，你应该有类似

import { TestBed } from '@angular/core/testing'; 

describe('Component: NavTool',() => { 
    let mockRouter = { 
    navigate: jasmine.createSpy('navigate') 
    }; 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ NavToolComponent ], 
     providers: [ 
     { provide: Router, useValue: mockRouter }, 
     ComponentComm 
     ] 
    }); 
    }); 
    it('should click link',() => { 
    let fixture = TestBed.createComponent(NavToolComponent); 
    fixture.detectChanges(); 
    let component: NavToolComponent = fixture.componentInstance; 
    component.clickLink('home'); 
    expect(mockRouter.navigate).toHaveBeenCallWith(['/home']); 
    }); 
}); 

或者类似的东西。您可以使用TestBed从零开始配置模块以进行测试。您使用@NgModule进行几乎相同的配置。

在这里，我们只是嘲笑路由器。由于我们只是单元测试，我们可能不需要真正的路由设施。我们只是想确保它被称为正确的参数。模拟和spy将能够捕捉到我们的呼叫。

如果做想用真实的路由器，那么你就需要使用RouterTestingModule，在那里你可以配置路由。看一个例子here和here

另请参见：

• Angular docs on Testing使用角度测试基础设施更多的例子。

Answer 2

您也可以只使用RouterTestingModule，只是spyOn这样的导航功能...

import { TestBed } from '@angular/core/testing'; 
import { RouterTestingModule } from '@angular/router/testing'; 

import { MyModule } from './my-module'; 
import { MyComponent } from './my-component'; 

describe('something',() => { 

    let fixture: ComponentFixture<LandingComponent>; 

    beforeEach(() => { 

     TestBed.configureTestingModule({ 
      imports: [ 
       MyModule, 
       RouterTestingModule.withRoutes([]), 
      ], 
     }).compileComponents(); 

     fixture = TestBed.createComponent(MyComponent); 

    }); 

    it('should navigate',() => { 
     let component = fixture.componentInstance; 
     let navigateSpy = spyOn((<any>component).router, 'navigate'); 

     component.goSomewhere(); 
     expect(navigateSpy).toHaveBeenCalledWith(['/expectedUrl']); 
    }); 
});