1

2016 年 6 月に、Angular 2 アプリケーションのテスト方法に関する記事を書きました。出発点としてangular2-seedを使用しました。

https://raibledesigns.com/rd/entry/testing_angular_2_0_rc1

Angular 2 RC5 を使用する Angular CLI (マスター ブランチから) を使用して、このチュートリアルを書き直すことにしました。テストの 1 つから奇妙なエラーが表示されます。

Error: Token must be defined!
    at new BaseException (/Users/mraible/ng2-demo/src/test.ts:1940:23 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/src/facade/exceptions.js:27:0)
    at new ReflectiveKey (/Users/mraible/ng2-demo/src/test.ts:27600:19 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/src/di/reflective_key.js:36:0)
    at KeyRegistry.get (/Users/mraible/ng2-demo/src/test.ts:27641:22 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/src/di/reflective_key.js:77:0)
    at Function.ReflectiveKey.get (/Users/mraible/ng2-demo/src/test.ts:27615:35 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/src/di/reflective_key.js:51:0)
    at ReflectiveInjector_.get (/Users/mraible/ng2-demo/src/test.ts:58418:62 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/src/di/reflective_injector.js:586:0)
    at NgModuleInjector.get (/Users/mraible/ng2-demo/src/test.ts:40942:52 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/src/linker/ng_module_factory.js:98:0)
    at TestBed.get (/Users/mraible/ng2-demo/src/test.ts:11910:47 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/testing/test_bed.js:269:0)
    at /Users/mraible/ng2-demo/src/test.ts:11916:61 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/testing/test_bed.js:275:46
    at Array.map (native)
    at TestBed.execute (/Users/mraible/ng2-demo/src/test.ts:11916:29 <- webpack:///Users/mraible/ng2-demo/~/@angular/core/testing/test_bed.js:275:0)

これが私のテストです：

import { provide } from '@angular/core';
import { TestComponentBuilder } from '@angular/compiler/testing';

import { MockActivatedRoute } from '../shared/search/mocks/routes';
import { MockSearchService } from '../shared/search/mocks/search.service';

import { EditComponent } from './edit.component';
import { ActivatedRoute } from "@angular/router";
import { inject } from "@angular/core/testing/test_bed";

describe('Component: Edit', () => {
  var mockSearchService:MockSearchService;

  beforeEach(() => {
    mockSearchService = new MockSearchService();

    return [
      mockSearchService.getProviders(),
      provide(ActivatedRoute, { useValue: new MockActivatedRoute({ 'id': '1' }) })
    ];
  });

  it('should fetch a single record', inject([TestComponentBuilder], (tcb:TestComponentBuilder) => {
    return tcb.createAsync(EditComponent).then((fixture) => {
      let person = {name: 'Emmanuel Sanders', address: {city: 'Denver'}};
      mockSearchService.setResponse(person);

      fixture.detectChanges();
      // verify service was called
      expect(mockSearchService.getByIdSpy).toHaveBeenCalledWith(1);

      // verify data was set on component when initialized
      let editComponent = fixture.debugElement.componentInstance;
      expect(editComponent.editAddress.city).toBe('Denver');

      // verify HTML renders as expected
      var compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('h3')).toBe('Emmanuel Sanders');
    });
  }));
});

このプロジェクトを GitHub に投稿したので、必要に応じてこの問題を再現できます: https://github.com/mraible/ng2-demo。

4

1 に答える 1

1

マット、私はあなたの作業コードの関連行であると思われるものをコピーして、将来この質問に出くわす可能性のある人を助けました.

あなたの修正は からインポートするTestBedことだとおっしゃいましたが、角度テストのドキュメントとガイドライン@angular/core/testingにも反映されている方法で、モック サービスを注入するというガイダンスにも従っていることに気付きました。

私の修正は少し異なりました。メソッドで提供したサービスの 1 つの名前が間違っていたことが原因でしたTestBed.configureTestingModule()。

たとえば、あなたの場合、 new をインスタンス化し、それをとして配列MockSearchServiceに渡します。providersmockSearchService{provide: SearchService, useValue: mockSearchService}

私の場合、次のようにMockSearchService タイプ（注、インスタンスではなく実際のタイプ）を渡しました：（{provide: SearchService, useValue: MockSearchService}大文字に注意してください）...

...そして、次のようにサービスのインスタンスを取得しました: mockSearchService = fixture.debugElement.injector.get(MockSearchService);.

ただし、私の場合、渡した値のスペルを間違えました...injector.get(mockSearchService)。これは、インジェクターのゲッターに渡すには無効なトークンでした。したがって、この無効なトークン エラーは、未定義のトークンにアクセスまたは渡そうとするすべてのケースをキャッチするものとして、Karma またはテスト プロセスに関与する他のツールの 1 つによってスローされると思います。話の教訓として、それはおそらくどこかで変数の名前を間違えたことに関係していた. あなたのケースは少し異なりますが、私はそれが何らかの形で関連していたことをほぼ確信しています:]。乾杯！

あなたの作業コード

import { MockSearchService } from '../shared/search/mocks/search.service';
// other imports ...

describe('Component: Edit', () => {
    let mockSearchService: MockSearchService;
    // other service declarations...

    beforeEach(() => {
        mockSearchService = new MockSearchService();
        // other service instances...

        TestBed.configureTestingModule({
            // declarations...

            providers: [
                {provide: SearchService, useValue: mockSearchService},

                // other providers...
            ],

            // imports...
        });
    });

    // Tests ...

});
于 2016-10-28T21:43:00.210 に答える