Jest unit tests not working with third party node module

Question

Jest unit tests not working with third party node module.

I'm finding it hard to mock this third party npm module that I use all over my app.

Tech stack: jest, angular v12 and typescript.

The third party npm thats causing issues is:

import { NgxPermissionsService } from 'ngx-permissions';

(Reference: https://www.npmjs.com/package/ngx-permissions)

My unit test:

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core'; 
import { NgxPermissionsService } from 'ngx-permissions';
import { mock } from 'jest-mock-extended';

import { InteractiveModalComponent } from './interactive-modal.component';
import { GoogleService } from '../../../services';

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [InteractiveModalComponent],
      imports: [],
      providers: [{ provide: NgxPermissionsService, useValue: mock<NgxPermissionsService>() }, GoogleService],
      schemas: [NO_ERRORS_SCHEMA],
    }).compileComponents();
  });

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

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

  it('should equal true', () => {
    expect(true).toBeTruthy();
  });
});

My component that I'm trying to start testing:

import { Component, Output, EventEmitter } from '@angular/core';

import { GoogleService } from '../../../services';

@Component({
  selector: 'interactive-modal-view',
  templateUrl: './interactive-modal.component.html',
  styleUrls: ['./interactive-modal.component.scss'],
})
export class InteractiveModalComponent {
  @Output() close = new EventEmitter<void>();

  constructor(private googleService: GoogleService) {}

  private sendEvent(): void {
    this.googleService.send('test');
  }

  navigate(): void {
    this.close.emit();
  }
}

My error:

jest-config.js:

module.exports = {
  preset: 'jest-preset-angular',
  roots: [
    "<rootDir>",
  ],
  modulePaths: [
    "<rootDir>"
  ],
  moduleDirectories: [
    "node_modules"
  ],
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  collectCoverage: true,
  coverageReporters: ['html'],
  coverageDirectory: 'coverage/test',
};

Permission service:

import { Injectable } from '@angular/core';
import { NgxPermissionsService } from 'ngx-permissions';

import { UtilityService } from '.';

@Injectable()
export class PermissionService {
  constructor(private utilityService: UtilityService, private permissionsService: NgxPermissionsService) {}

  public setPermission(roles: object): void {
    const permissions = this.utilityService.mapRoles(roles);
    this.permissionsService.loadPermissions(permissions);
  }
}