Question

我用angular-cli生成了一个项目，当我尝试运行我的测试时，我得到一个循环依赖错误。

这就是我在测试文件中包含路由器模块的方法：

import { Router, RouterModule } from '@angular/router';

...

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [NavbarComponent],
      providers: [{ provide: Router, useClass: RouterModule }, Auth]
    })
      .compileComponents();
  }));

运行ng test时出现以下错误：

Failed: Provider parse errors:
Cannot instantiate cyclic dependency! Router ("[ERROR ->]"): in NgModule DynamicTestModule in ./DynamicTestModule@-1:-1


Error: Provider parse errors:
Cannot instantiate cyclic dependency! Router ("[ERROR ->]"): in NgModule DynamicTestModule in ./DynamicTestModule@-1:-1
    at NgModuleProviderAnalyzer.webpackJsonp.../../../compiler/@angular/compiler.es5.js.NgModuleProviderAnalyzer.parse (http://localhost:9876/_karma_webpack_/vendor.bundle.js:37690:19)
    at NgModuleCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.NgModuleCompiler.compile (http://localhost:9876/_karma_webpack_/vendor.bundle.js:44506:36)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModule (http://localhost:9876/_karma_webpack_/vendor.bundle.js:52725:73)
    at http://localhost:9876/_karma_webpack_/vendor.bundle.js:52684:106
    at Object.then (http://localhost:9876/_karma_webpack_/vendor.bundle.js:27694:148)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:52681:26)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/vendor.bundle.js:52613:37)
    at TestingCompilerImpl.webpackJsonp.../../../compiler/@angular/compiler/testing.es5.js.TestingCompilerImpl.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/vendor.bundle.js:54029:31)
    at TestBed.webpackJsonp.../../../core/@angular/core/testing.es5.js.TestBed.compileComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:69896:31)
    at Function.webpackJsonp.../../../core/@angular/core/testing.es5.js.TestBed.compileComponents (http://localhost:9876/_karma_webpack_/vendor.bundle.js:69779:67)

这是路由器本身的问题吗？我应该避免注射吗？

Answer 1

就个人而言，我更喜欢在处理Angular的Router时简单地创建一个jasmine spy对象并检查它是否被调用的方法，因为使用这种方法你可以快速查看它是否被调用三行代码插入到你的组件：

describe('MyComponent', () => {
  let component: MyComponent;
  let router: any;

  beforeEach(async(() => {
    router = jasmine.createSpyObj('router', ['navigate']);
    component = new MyComponent;

  }));

更详细的方法，更接近标准是使用RouterStub，Angular - Testing Guide页面对此进行了描述。

class RouterStub {
  navigateByUrl(url: string) { return url; }
}

beforeEach( async(() => {
  TestBed.configureTestingModule({
    providers: [
      { provide: HeroService, useClass: FakeHeroService },
      { provide: Router,      useClass: RouterStub }
    ]
  })
  .compileComponents().then(() => {
    fixture = TestBed.createComponent(DashboardComponent);
    comp = fixture.componentInstance;
  });

it('should tell ROUTER to navigate when hero clicked',
  inject([Router], (router: Router) => { // ...

  const spy = spyOn(router, 'navigateByUrl');

  heroClick(); // trigger click on first inner <div class="hero">

  // args passed to router.navigateByUrl()
  const navArgs = spy.calls.first().args[0];

  // expecting to navigate to id of the component's first hero
  const id = comp.heroes[0].id;
  expect(navArgs).toBe('/heroes/' + id,
    'should nav to HeroDetail for first hero');
}));

我知道其他人提到了这一点，但是如果你想要实现更接近完整模块而不是Stub或jasmine间谍的任何东西，你将需要使用RouterTestingModule。通常情况下，茉莉花间谍或存根就足以测试组件的功能。

在业力测试

1 个答案: