Unit test cases shows 'TypeError: $(...).DataTable is not a function'

[shivajim]

Hi Team,
I have been writing unit test cases of angular component where I have been added one common component of Datatable, but *spec.ts file is not getting compiled successfully it shows me an error as error properties: Object({ longStack: 'TypeError: $(...).DataTable is not a function

----------------------------------------------------------------- Error ----------------------------------------------------------------------------------------------
Chrome 91.0.4472.77 (Linux x86_64) ERROR
  An error was thrown in afterAll
  error properties: Object({ longStack: 'TypeError: $(...).DataTable is not a function
      at http://localhost:9876/_karma_webpack_/webpack:/node_modules/angular-datatables/__ivy_ngcc__/src/angular-datatables.directive.js:90:1
      at timer (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:2561:1)
      at ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:406:1)
      at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:332:1)

----------------------------------------------------------------- .*spec.ts  ---------------------------------------------------------------------------------------
// Adeed datatable in shared module. 
  beforeEach(async () => {
    employerService = jasmine.createSpyObj('EmployerService', ['fetchALlEmployers', 'searchGroups']);
    await TestBed.configureTestingModule({
      declarations: [SelectEmployerComponent, EmployerSearchPipe, DatatablesComponent],
      imports: [SharedModule, BrowserAnimationsModule, HttpClientTestingModule],
      providers: [EmployerSearchPipe, {provide: EmployerService, useValue: employerService}]
    })
    .compileComponents();
  });

----------------------------------------------------------------- .*component.ts  --------------------------------------------------------------------------------
export class SelectEmployerComponent implements OnInit, AfterViewChecked, OnDestroy {
  @ViewChild(DatatablesComponent, {static: false}) commonDatatable: DatatablesComponent | undefined;

----------------------------------------------------------------- .*datatble.component.ts  -------------------------------------------------------------------
export class DatatablesComponent implements OnInit, AfterViewInit, AfterViewChecked, OnDestroy {
  @Input() tableData: TableData[];
  @ViewChildren(DataTableDirective) dtElements: QueryList | undefined;
  dtOptions: DataTables.Settings[] = [];
  dtTrigger1: Subject = new Subject();
  dtTrigger2: Subject = new Subject();

🌐 Environment

• Ubuntu 18.04
• node version: 14.0.0
• angular version: 11.2.5
• angular-cli version: 11.2.5
• jquery version: 3.5.1
• datatables version: 1.10.21
• angular-datatables version: 9.0.2

[shanmukhateja]

Hi,

angular-datatables version: 9.0.2
angular version: 11.2.5

Please upgrade angular-datatables package to v11.

We have a draft PR for unit tests #1529 which may help you with this.

[shanmukhateja]

Please provide a reproducible StackBlitz repo or GitHub link to investigate.

[Nana-Darko]

@shivajim

declare dataTable forRoot as:

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        // Declare dt table 
        DataTablesModule.forRoot()
      ]
}