Importing OverlayModule in Karma not working

Test file :

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { AlertsComponent } from './alerts.component';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpProvider, StorageProvider, ToastMessageProvider } from '@ln/radix-providers-ng12';
import { AlertServiceProvider } from 'src/shared/providers/alert-service-provider.service';
import { ActivatedRoute, Router } from '@angular/router';
import { NotificationModule, ToastNotification, ToastNotificationService } from 'ln-components-angular/notification';
import { AlertResultProvider } from 'src/shared/providers/AlertResult.provider';
import { SelectedItemService } from '../../../../../_shared-business/src/services/selected-item.service';
import { AlertSupportLinksService } from '../../../../../_shared-business/src/services/AlertSupportLinks.service';
import { PaginationServiceProvider } from '@ln/pagination-module-ng12';
import { BackGroundService } from 'src/shared/services/background.service';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { SharedModule } from 'src/shared/shared.module';
import { HttpClientModule } from '@angular/common/http';
import { IconsRegistry } from 'ln-components-angular/icon';
import { ModalService } from 'ln-components-angular/modal';
import { Overlay, OverlayModule } from '@angular/cdk/overlay';


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

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        HttpClientModule,
        OverlayModule
      ],
      declarations: [AlertsComponent],
      providers: [
        StorageProvider,
        AlertServiceProvider,
        { provide: HttpProvider, useClass: HttpProvider },
        { provide: ToastNotificationService, useClass: ToastNotificationService },
        AlertResultProvider,
        SelectedItemService,
        AlertSupportLinksService,
        IconsRegistry,
        PaginationServiceProvider,
        ModalService,
        BackGroundService,
      ]
    })
      .compileComponents();
  });

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

  it('should change active tab on click', () => {
    const tabElements = fixture.debugElement.queryAll(By.css('li'));

    // Assuming the first tab is active initially
    expect(tabElements[0].classes['active']).toBeTrue();

    // Click the second tab
    tabElements[1].triggerEventHandler('click', null);

    fixture.detectChanges();

    // The first tab should no longer be active, and the second tab should be active
    expect(tabElements[0].classes['active']).toBeFalse();
    expect(tabElements[1].classes['active']).toBeTrue();
  });
});

First I am trying to import my ToastNotificationService then I have an error that say

R3InjectorError(DynamicTestModule)[ToastNotificationService -> Overlay -> Overlay]: NullInjectorError: No provider for Overlay!

Then I am trying to import the OverlayModule but I have the following error

inject() must be called from an injection context

Answer

So as per the first error states that you have imported overlayModule and added in the imports array but didn't add in the providers array.

2. You need to inject your service like this inside beforeEach

toastNotificationService = TestBed.inject(ToastNotificationService);

Hope it works, happy coding!