Angular 清理组件时发生TypeError

我正试图弄明白为什么我的角度分量测试失败了。查看堆栈跟踪，问题似乎来自这样一个事实：

\u subscriptions

对象是

未定义的

，但我不明白这是怎么可能的，也不明白为什么会发生这种情况。这是测试失败时我得到的完整堆栈：

HeadlessChrome 79.0.3945 (Windows 10.0.0): Executed 8 of 26 SUCCESS (0 secs / 0.191 secs)
ERROR: 'Error during cleanup of component', Object{component: PlayerComponent{...}, _subscriptions: Object{routerSubscription: ...}}, stacktrace: TypeError: Cannot read property 'unsubscribe' of undefined
TypeError: Cannot read property 'unsubscribe' of undefined
    at http://localhost:9876/_karma_webpack_/src/app/player/player.component.ts:58:29
    at Array.map (<anonymous>)
    at PlayerComponent.ngOnDestroy (http://localhost:9876/_karma_webpack_/src/app/web-player/web-player.component.ts:57:36)
    at callProviderLifecycles (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28212:1)
    at callElementProvidersLifecycles (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28171:1)
    at callLifecycleHooksChildrenFirst (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28153:1)
    at destroyView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:38603:1)
    at callWithDebugContext (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:39716:1)
    at Object.debugDestroyView [as destroyView] (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:39313:1)
    at ViewRef_.destroy (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:27128:1)}
HeadlessChrome 79.0.3945 (Windows 10.0.0): Executed 9 of 26 SUCCESS (0 secs / 0.207 secs)
ERROR: 'Error during cleanup of component', Object{component: PlayerComponent{router: Object{navigate: ..., events: ...}, _subscriptions: Object{routerSubscription: ...}}, stacktrace: TypeError: Cannot read property 'unsubscribe' of undefined
TypeError: Cannot read property 'unsubscribe' of undefined
    at http://localhost:9876/_karma_webpack_/src/app/web-player/web-player.component.ts:58:29
    at Array.map (<anonymous>)
    at PlayerComponent.ngOnDestroy (http://localhost:9876/_karma_webpack_/src/app/web-player/web-player.component.ts:57:36)
    at callProviderLifecycles (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28212:1)
    at callElementProvidersLifecycles (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28171:1)
    at callLifecycleHooksChildrenFirst (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28153:1)
    at destroyView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:38603:1)
    at callWithDebugContext (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:39716:1)
    at Object.debugDestroyView [as destroyView] (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:39313:1)

这就是对它的考验：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';

describe('PlayerComponent', () => {
    let component: PlayerComponent;
    let fixture: ComponentFixture<PlayerComponent>;

    beforeEach(async(() => {
        let router = {
            navigate: jasmine.createSpy(),
            events: {
                subscribe: jasmine.createSpy(),
                unsubscribe: jasmine.createSpy()
            }
        };


        TestBed.configureTestingModule({
            providers: [
                { provide: Router, useValue: router },
            ],
            declarations: [ PlayerComponent ]
        })
        .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(PlayerComponent);
        fixture.detectChanges();
        component = fixture.componentInstance;

    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从'@angular/Router'导入{Router}；
描述（'PlayerComponent'，（）=>{
let组件：PlayerComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
让路由器={
导航：jasmine.createSpy（），
活动：{
订阅：jasmine.createSpy（），
取消订阅：jasmine.createSpy（）
}
};
TestBed.configureTestingModule({
供应商：[
{提供：路由器，使用值：路由器}，
],
声明：[玩家组件]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（PlayerComponent）；
fixture.detectChanges（）；
组件=fixture.componentInstance；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
});

您确定routerSubscription是唯一的订阅吗？是否发生了另一个可能导致取消订阅未定义的订阅？尝试导入RouterTestingModule，而不是将其存根。angular.io/api/router/testing/RouterTestingModule尝试将console.log（key）放在取消订阅之前，以查看它试图取消订阅的密钥。

您确定

routerSubscription

是唯一的订阅吗？是否有另一个订阅发生，可能导致

取消订阅

未定义？尝试导入

RouterTestingModule

，而不是将其存根。尝试将

console.log（key）

放在取消订阅之前，查看它试图取消订阅的密钥。谢谢@AliF50。将尝试that@AliF50，将我的路由器存根替换为路由器测试模块的导入解决了问题。请加上你的推荐作为回答，这样我就可以接受了。非常感谢你！

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';

describe('PlayerComponent', () => {
    let component: PlayerComponent;
    let fixture: ComponentFixture<PlayerComponent>;

    beforeEach(async(() => {
        let router = {
            navigate: jasmine.createSpy(),
            events: {
                subscribe: jasmine.createSpy(),
                unsubscribe: jasmine.createSpy()
            }
        };


        TestBed.configureTestingModule({
            providers: [
                { provide: Router, useValue: router },
            ],
            declarations: [ PlayerComponent ]
        })
        .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(PlayerComponent);
        fixture.detectChanges();
        component = fixture.componentInstance;

    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});