92

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

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

规格

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) {}
4

4 回答 4

187

您也可以只使用 RouterTestingModule 并像这样 spyOn 导航功能......

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

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

describe('something', () => {

    let fixture: ComponentFixture<LandingComponent>;
    let router: Router;

    beforeEach(() => {

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

        fixture = TestBed.createComponent(MyComponent);
        router = TestBed.get(Router); // TestBed.inject(Router) for Angular 9+

    });

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

        component.goSomewhere();
        expect(navigateSpy).toHaveBeenCalledWith(['/expectedUrl']);
    });
});
于 2016-10-22T01:00:18.013 回答
36

这是因为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).toHaveBeenCalledWith(['/home']);
  });
});

或类似的东西。您使用TestBed为测试从头开始配置模块。您配置它的方式几乎与@NgModule.

在这里，我们只是在模拟路由器。由于我们只是单元测试，我们可能不需要真正的路由工具。我们只想确保使用正确的参数调用它。模拟者和间谍将能够为我们捕获该呼叫。

如果您确实想使用真正的路由器，那么您需要使用RouterTestingModule，您可以在其中配置路由。在此处和此处查看示例

也可以看看：

于 2016-09-30T13:57:12.180 回答
4

如果我们在组件控制器中注入 Route 服务，这里有一个例子：

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing'; // Because we inject service in our component
import { Router } from '@angular/router'; // Just if we need to test Route Service functionality

import { AppComponent } from './app.component';
import { DummyLoginLayoutComponent } from '../../../testing/mock.components.spec'; // Because we inject service in your component

describe('AppComponent', () => {
  let router: Router; // Just if we need to test Route Service functionality

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        DummyLoginLayoutComponent // Because we inject service in our component
      ],
      imports: [
        RouterTestingModule.withRoutes([
          { path: 'login', component: DummyLoginLayoutComponent },
        ]) // Because we inject service in our component
      ],
    }).compileComponents();

    router = TestBed.get(Router); // Just if we need to test Route Service functionality
    router.initialNavigation(); // Just if we need to test Route Service functionality
  }));

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

我们还可以测试其他功能，例如navigate(). 以防万一：

it('should call eventPage once with /register path if event is instanceof NavigationStart', fakeAsync(() => {
    spyOn(analyticService, 'eventPage');
    router.navigate(['register'])
      .then(() => {
        const baseUrl = window.location.origin;
        const url = `${baseUrl}/register`;
        expect(analyticService.eventPage).toHaveBeenCalledTimes(1);
        expect(analyticService.eventPage).toHaveBeenCalledWith(url);
      });
}));

我的所有模拟组件文件（mock.components.specs.ts）

import { Component } from '@angular/core';

@Component({
    selector: 'home',
    template: '<div>Dummy home component</div>',
    styleUrls: []
})

export class DummyHomeComponent { }
于 2019-04-09T22:10:44.543 回答
3

茉莉花与完整的间谍对象更好...

describe('Test using router', () => {
    const router = jasmine.createSpyObj('Router', ['navigate']);
    ...
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            providers: [  { provide: Router, useValue: router } ],
            ...
    });        
});
于 2018-06-21T21:08:34.867 回答