ルーターのパラメーターをサブスクライブするコンポーネントをテストしています。すべてのテストパスとすべてが正常に動作します。しかし、コンソールを見ると、エラーが表示されます。
コンポーネントApplicationViewComponent localConsole。(anonymous function)@ context.js:232のクリーンアップ中のエラー
これが起こる理由を知っていますか?
unsubscribe()
メソッドからngOnDestroy()
を削除しようとすると、エラーが消えます。
karma/jasmineはunsubscribe()
を自動的にサポートしていますか?
これがコンポーネントとテストです
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Rx'
import { AppService } from 'app.service';
@Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
private routeSubscription: Subscription;
// Main ID
public applicationId: string;
constructor(
private route: ActivatedRoute,
private _service: AppService
) { }
ngOnInit() {
this.routeSubscription = this.route.params.subscribe(params => {
this.applicationId = params['id'];
this.getDetails();
this.getList();
});
}
getDetails() {
this._service.getDetails(this.applicationId).subscribe(
result => {
console.log(result);
},
error => {
console.error(error);
},
() => {
console.info('complete');
}
);
}
getList(notifyWhenComplete = false) {
this._service.getList(this.applicationId).subscribe(
result => {
console.log(result);
},
error => {
console.error(error);
},
() => {
console.info('complete');
}
);
}
ngOnDestroy() {
this.routeSubscription.unsubscribe();
}
}
import { NO_ERRORS_SCHEMA } from '@angular/core';
import {
async,
fakeAsync,
ComponentFixture,
TestBed,
tick,
inject
} from '@angular/core/testing';
import {
RouterTestingModule
} from '@angular/router/testing';
import {
HttpModule
} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Router, ActivatedRoute } from '@angular/router';
// Components
import { AppComponent } from './app.component';
// Service
import { AppService } from 'app.service';
import { AppServiceStub } from './app.service.stub';
let comp: AppComponent;
let fixture: ComponentFixture<AppComponent>;
let service: AppService;
let expectedApplicationId = 'abc123';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [AppComponent],
imports: [RouterTestingModule, HttpModule],
providers: [
FormBuilder,
{
provide: ActivatedRoute,
useValue: {
params: Observable.of({id: expectedApplicationId})
}
},
{
provide: AppService,
useClass: AppServiceStub
}
],
schemas: [ NO_ERRORS_SCHEMA ]
})
.compileComponents();
}));
tests();
});
function tests() {
beforeEach(() => {
fixture = TestBed.createComponent(AppComponent);
comp = fixture.componentInstance;
service = TestBed.get(AppService);
});
/*
* COMPONENT BEFORE INIT
*/
it(`should be initialized`, () => {
expect(fixture).toBeDefined();
expect(comp).toBeDefined();
});
/*
* COMPONENT INIT
*/
it(`should retrieve param id from ActivatedRoute`, async(() => {
fixture.detectChanges();
expect(comp.applicationId).toEqual(expectedApplicationId);
}));
it(`should get the details after ngOnInit`, async(() => {
spyOn(comp, 'getDetails');
fixture.detectChanges();
expect(comp.getDetails).toHaveBeenCalled();
}));
it(`should get the list after ngOnInit`, async(() => {
spyOn(comp, 'getList');
fixture.detectChanges();
expect(comp.getList).toHaveBeenCalled();
}));
}
import { Observable } from 'rxjs/Observable';
export class AppServiceStub {
getList(id: string) {
return Observable.from([
{
id: "7a0c6610-f59b-4cd7-b649-1ea3cf72347f",
name: "item 1"
},
{
id: "f0354c29-810e-43d8-8083-0712d1c412a3",
name: "item 2"
},
{
id: "2494f506-009a-4af8-8ca5-f6e6ba1824cb",
name: "item 3"
}
]);
}
getDetails(id: string) {
return Observable.from([
{
id: id,
name: "detailed item 1"
}
]);
}
}
受け入れられた解決策は最適ではなく、テストが正しくセットアップされていないという事実を回避します。
「コンポーネントのクリーンアップ中のエラー」エラーメッセージは、ngOnDestroy()
が呼び出されたときにthis.routeSubscription
が未定義であるために発生します。これは、ngOnInit()
が呼び出されなかったため、つまり、ルートにサブスクライブしたことがないためです。 Angular testing tutorial で説明されているように、_fixture.detectChanges()
を最初に呼び出すまで、コンポーネントは完全に初期化されません。
したがって、正しいソリューションは、createComponent
が呼び出された直後にfixture.detectChanges()
ブロックにbeforeEach()
を追加することです。フィクスチャを作成した後はいつでも追加できます。そうすることで、コンポーネントが完全に初期化され、コンポーネントのクリーンアップも期待どおりに動作するようになります。
メソッドngOnDestroyを以下のようにリファクタリングする必要があります。
ngOnDestroy() {
if ( this.routeSubscription)
this.routeSubscription.unsubscribe();
}
したがって、私の状況は似ていましたが、まったく同じではありません。他の誰かがそれを助けてくれると思った場合に備えて、これをここに置いています。 Jamine/Karmaで単体テストを行ったとき、
'ERROR: 'Error during cleanup of component','
それは、私がオブザーバブルを適切に処理していなかったためであり、それらにはエラー関数がありませんでした。そのため、修正によりエラー関数が追加されました。
this.entityService.subscribe((items) => {
///Do work
},
error => {
this.errorEventBus.throw(error);
});
@David Brownの応答に次のコードを追加すると、うまくいきました。
.subscribe(res => {
...
},
error => Observable.throw(error)
)
私は、コンポーネント自体のコンテキスト外でコンポーネントの機能をテストしたいという同様の状況にあります。
これは私のために働いたものです:
afterEach(() => {
spyOn(component, 'ngOnDestroy').and.callFake(() => { });
fixture.destroy();
});
このエラーを解決するには、2つのことを行う必要があります。
1- fixture.detectChanges(); beforeEach()を追加
2-コンポーネントを明確にするために、以下を追加する必要があります。
afterEach(() => {
fixture.destroy();
});
私の場合、各テストが問題を解決した後にコンポーネントを破壊しました。したがって、これを記述関数に追加してみてください。
afterEach(() => {
fixture.destroy();
})
私の場合、エラーはテンプレートにありました。子コンポーネントngDestroyにエラーがありましたが、読み取り専用プロパティを設定しようとしていたため破壊されませんでした。子コンポーネントが適切に破棄されているかどうかを確認するのに時間をかける価値があります。
私にとって、このエラーを修正したのはコンポーネントのngOnDestroyの内部でした。ストアディスパッチとサブスクライブ解除をtry catchでラップしました。
ngOnDestroy(): void {
try {
this.store.dispatch(new foo.Bar(this.testThing()));
if(this.fooBarSubscription) {
this.fooBarSubscription.unsubscribe();
}
} catch (error) {
this.store.dispatch(new foo.Bar(this.testThing()));
}
}