web-dev-qa-db-ja.com

ルーターのすべてのパラメーターを解決できない：（？、？、？、？、？、？、？）ユニットテスト時のAngular RC 5

Angular RC 5にアップグレードしたばかりですが、「ROUTER_DIRECTIVES」を使用するすべてのコンポーネントが「ルーターのすべてのパラメーターを解決できません：（？、？、？、？、？、？、？、？）」で失敗しますコンポーネントを単体テストしようとすると。

import { inject, addProviders } from '@angular/core/testing';
import { ComponentFixture, TestComponentBuilder } from '@angular/core/testing';
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, Router } from '@angular/router';

import { HomeComponent } from './home.component';
import { UserService } from '../_services/user.service';

describe('Component: Home', () => {

  beforeEach(() => {
    addProviders([HomeComponent, UserService, ROUTER_DIRECTIVES, Router]);
  });  

  it('should inject the component', inject([HomeComponent, UserService, ROUTER_DIRECTIVES, Router],
    (component: HomeComponent) => {
      expect(component).toBeTruthy();
      // expect(component.currentUser.firstname).toEqual('Jan');
    }));

完全なエラーログ：

     Chrome 52.0.2743 (Windows 10 0.0.0)
   Error: Can't resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?).
       at new BaseException (webpack:///C:/ng/anbud/~/@angular/compiler/src/facade/exceptions.js:27:0 <- src/test.ts:2943:23)
       at CompileMetadataResolver.getDependenciesMetadata (webpack:///C:/ng/anbud/~/@angular/compiler/src/metadata_resolver.js:551:0 <- src/test.ts:24542:19)
       at CompileMetadataResolver.getTypeMetadata (webpack:///C:/ng/anbud/~/@angular/compiler/src/metadata_resolver.js:448:0 <- src/test.ts:24439:26)
       at webpack:///C:/ng/anbud/~/@angular/compiler/src/metadata_resolver.js:594:0 <- src/test.ts:24585:41
       at Array.forEach (native)
       at CompileMetadataResolver.getProvidersMetadata (webpack:///C:/ng/anbud/~/@angular/compiler/src/metadata_resolver.js:575:0 <- src/test.ts:24566:19)
       at CompileMetadataResolver.getNgModuleMetadata (webpack:///C:/ng/anbud/~/@angular/compiler/src/metadata_resolver.js:305:0 <- src/test.ts:24296:58)
       at RuntimeCompiler._compileComponents (webpack:///C:/ng/anbud/~/@angular/compiler/src/runtime_compiler.js:150:0 <- src/test.ts:37986:47)
       at RuntimeCompiler._compileModuleAndAllComponents (webpack:///C:/ng/anbud/~/@angular/compiler/src/runtime_compiler.js:78:0 <- src/test.ts:37914:37)
       at RuntimeCompiler.compileModuleAndAllComponentsSync (webpack:///C:/ng/anbud/~/@angular/compiler/src/runtime_compiler.js:52:0 <- src/test.ts:37888:21)

コンポーネントをルーティングで単体テストする方法はありますか？

javascriptunit-testingangulartypescriptangular2-routing
41
ganjan

最終的に修正することができ、これは次のように簡単でした：

beforeEach(() => addProviders([
    { 
        provide: Router, 
        useClass: class { navigate = jasmine.createSpy("navigate"); }
    }]));
45
ganjan

私にとっては、RouterTestingModuleを追加するために働いた

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

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

上記の解決策には運がありませんでした。代わりに、公式ドキュメントの推奨アプローチに従いました： ルーティングされたコンポーネントのテスト

最初に、コンポーネントが呼び出すメソッドを使用してスタブルーターを作成します。

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

次に、テストモジュールを構成するときに、次のことを行います。

TestBed.configureTestingModule({
  declarations: [HeaderComponent],
  providers: [
    {provide: Router, useClass: RouterStub}
  ]
});
17
masterwok

私の場合、プロバイダーにはルーターがあり、インポートにはRouterTestingModuleがありました。これが競合を引き起こしていたと思います。次の構成が機能しました。

    TestBed.configureTestingModule({
        declarations: [Component],
        imports: [
            RouterTestingModule,             
        ],
        providers: [
         ...         //Remove Router from providers
        ]              

    });
14
Koji D'infinte

RouterModuleを追加してみてください：

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

beforeEach(() => {
        TestBed.configureTestingModule({
            providers: [
                 ...
                {provide: Router, useClass: RouterModule},
        });
    });
11
ByTheWayer

プロバイダーからルーターを削除するする必要がありました。それが問題を引き起こしていました。

7
Felipe Bejarano

最新のAngular 7については、こちらが私にとって有効なソリューションです。例は latest angular docs からコピーされます。

app/dashboard/dashboard.component.spec.ts（スパイ）

const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
const heroServiceSpy = jasmine.createSpyObj('HeroService', ['getHeroes']);

TestBed.configureTestingModule({
  providers: [
    { provide: HeroService, useValue: heroServiceSpy },
    { provide: Router,      useValue: routerSpy }
  ]
})

app/dashboard/dashboard.component.spec.ts（テストのナビゲート）

it('should tell ROUTER to navigate when hero clicked', () => {

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

  // args passed to router.navigateByUrl() spy
  const spy = router.navigateByUrl as jasmine.Spy;
  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');
});
1
Rash

私は同じエラーを受け取り、imports配列にRouterTestModuleをインポートし、プロバイダーからRouter/ActivatedRouteを削除し、imports配列からRouterModuleを削除することで、この問題を解決できました。

これは私の作業バージョンがどのように見えるかです

import { RouterTestingModule } from '@angular/router/testing';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { MyAppComponent } from './my-apppp.component';
import { MyAppService } from '../../../services/my-app.service';
import { NO_ERRORS_SCHEMA} from '@angular/core';

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MyAppComponent ],
      schemas:      [NO_ERRORS_SCHEMA],
      imports: [ FormsModule, RouterTestingModule ],
      providers: [ MyAppService ]
    })
    .compileComponents();
  }));

すでに多くの人がここでコメントしていることは知っていますが、更新された回答を提供することが役立つと感じました。

ありがとう！

1
Siddhartha Thota