Angular testing with primeng : NullInjectorError: StaticInjectorError(DynamicTestModule)[ButtonDirective -> ElementRef

I am trying to test my angular 8 app using primeng but karma displays following error :

NullInjectorError: StaticInjectorError(DynamicTestModule)[ButtonDirective -> ElementRef]: 

 StaticInjectorError(Platform: core)[ButtonDirective -> ElementRef]: 

      NullInjectorError: No provider for ElementRef!

I think it is cause of primeng button component, indeed on its github (primeng/src/app/components/button/button.ts) we got that :

export class ButtonDirective implements AfterViewInit, OnDestroy {

    @Input() iconPos: 'left' | 'right' = 'left';

    @Input() cornerStyleClass: string = 'ui-corner-all';

    public _label: string;

    public _icon: string;

    public initialized: boolean;

    constructor(public el: ElementRef) {}

I tried lots of things but nothing worked :'(

I tried :

  • to mock Element Ref by using

    • { provide: ElementRef, useClass: MockElementRef },
    • { provide: ElementRef, useValue: MockElementRef },
  • to add angular in path of tsconfig.json
  • to add “build”: {
    “preserveSymlinks”: true
    }
    in angular.json

Here is my app.component.spec.ts :

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import {BrowserModule} from "@angular/platform-browser";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";

// Import PrimeNG modules
import {
 /**
    PRIMENG IMPORTS
 **/
 ButtonModule
} from "primeng/primeng";

import { } from 'jasmine'
import { ElementRef } from '@angular/core';

export class MockElementRef extends ElementRef {
  constructor() { super(null); }
  // nativeElement = {};
}

describe('AppComponent', () => {

  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let elRef: ElementRef;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        /**
            LOTS OF MODULES
        **/
        ButtonModule,
      ],
      declarations: [        
        /**
            LOTS OF COMPONENTS
        **/
      ],
      providers: [
        /**
            LOTS OF SERVICES
        **/
        { provide: ElementRef, useClass: MockElementRef },
        // { provide: ElementRef, useValue: MockElementRef },
        { provide: APP_BASE_HREF, useValue: '/' },
        { provide: HTTP_INTERCEPTORS, useClass: HttpClientInterceptor, multi: true },
        { provide: HttpService, useFactory: httpClientCreator, deps: [HttpClient] }
      ]
    }).compileComponents();
    // elRef = TestBed.get(MockElementRef);
  }));

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

  it('should create', () => {
    const app = fixture.debugElement.componentInstance;    
    expect(app).toBeTruthy()
  });
});

Help me pleeeeeeeeeease !!! :'(

Source: New feed
Source Url Angular testing with primeng : NullInjectorError: StaticInjectorError(DynamicTestModule)[ButtonDirective -> ElementRef