Testing Angular component with unsubscribe Error during cleanup of component

You need to refactor your method ngOnDestroy as below :

ngOnDestroy() {
  if ( this.routeSubscription)
    this.routeSubscription.unsubscribe();
}

In my case destroying the component after each test solved the problem. So you could try adding this to your describe function:

afterEach(() => {
  fixture.destroy();
})

You can add

teardown: { destroyAfterEach: false },

in the TestBed.configureTestingModule, it will look like this

beforeEach(async () => {
        await TestBed.configureTestingModule({
            declarations: [<Your component here>],
            imports: [<Your imports here>],
            providers: [<Your providers here>],
            teardown: { destroyAfterEach: false },
        }).compileComponents();
    });

I'm in a similar situation where I want to test a function in my component outside the context of the component itself.

This is what worked for me:

afterEach(() => {
  spyOn(component, 'ngOnDestroy').and.callFake(() => { });
  fixture.destroy();
});

So my situation was similar, but not exactly the same: I'm just putting this here in case someone else finds it helpful. When unit testing with Jamine/Karma I was getting

 'ERROR: 'Error during cleanup of component','

It turns out that was because I wasn't properly handling my observables, and they didn't have an error function on them. So the fix was adding an error function:

this.entityService.subscribe((items) => {
      ///Do work
},
  error => {
    this.errorEventBus.throw(error);
  });

Adding to @David Brown's response the code below is what worked for me.

      .subscribe(res => {
          ...
        },
        error => Observable.throw(error)
      )

As explained by @randomPoison, the error is triggered when the component that uses unsubscribe is not initialised. However, calling fixture.detectChanges() is a solution for when the error is in the spec file of the respective component.

But we might also be dealing with a FooComponent that creates BarComponent and BarComponent uses unsubscribe in its ngOnDestroy. Proper mocking must be done.

I'd suggest a different approach to the subscription cleanup, one that is declarative and won't trigger such problems. Here's an example:

export class BazComponent implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject();

  ngOnInit(): void {
    someObservable$
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(...);
  }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}

More on this approach here

You have to do 2 things, to solve this error.

1- add fixture.detectChanges(); in beforeEach()
2 - you need to add below, so that component can be clear.

afterEach(() => {
        fixture.destroy();
      });

I got this due to human error.

In my case, I forgot to add method sendC(a new method added to ABCComponent) to the list of methods of the dependent spy component. As an Example below

let abcComponent: jasmine.SpyObj<ABCComponent>
///
beforeEach(async () => {

    abcComponent = jasmine.createSpyObj('ABCComponent', [
      'sendA$',
      'sendB$',
      'sendC$' // initially forgot to add and I got the Failed: [ 'Error during cleanup of component' error. after adding this, my issue is fixed.
    ])

    await TestBed.configureTestingModule({
      declarations: [AComponent],
      providers: [
        AState,
        APipe,
        BPipe,
        
        { provide: ABCComponent, useValue: abcComponent },
        { provide: Router, useValue: routerSpy },
        { provide: NavigationService, useValue: navigationServiceSpy},
      ],
      imports: [ABCModule]
    })
      .compileComponents()
      abcComponent = TestBed.inject(ABCComponent) as jasmine.SpyObj<ABCComponent>
  })

So checking this solved my issue and also might solve yours.!!

Well in my case the error was in the template. There was error in the child component ngDestroy ,which wasn't getting destroyed as i was trying to set readonly property. It would be worth your time checking your child components whether they are getting destroyed properly.

For me what fixed this error was inside of my component's ngOnDestroy, I wrapped my store dispatch and my unsubscribe in a 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()));
  }
}

In my case I was testing a component with multiple @Input properties. I had to set it inside beforeEach block to [] component.xyz = [] (since it was type of an array). That was the origin of an problem.

I got this error message when I was setting one of the services variables to undefined. That variable holds the information (id) of currently active entity that is being edited. In that setter method I check that if the parent entity is set ... and that caused the error, because my tests don't set that parent entity at any point.

so the code looked like this

 ngOnDestroy(): void {
    this.subs.forEach(s => s.unsubscribe());
    this.xxxEditService.activeYYY = undefined; // setter checks that parent is set, otherwise throws an error
 }

I solved this by providing some mock entity in my test file

providers: [
 {
   provide: xxxEditService,
   useValue: {
     parentEntity: {} as Parent,
     activeYYY: -1   // id
   }
}

TLDR: Something crashes during the clean up (ie. null/undef references), and it might be because of non-valid presets