Mock MsalService in Angular Jest

Question

I have a Test in Angular that looks like this. But it always fails because I cannot mock the MsalService correctly.

export class MockedMsalService extends MsalService {}

 describe('NavbarComponent', () => {
  let component: NavbarComponent;
  let fixture: ComponentFixture<NavbarComponent>;
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [NavbarComponent],
      imports: [
      ],
      providers: [
        { provide: MsalService, useClass: MockedMsalService },
        { provide: Router, useClass: RouterMock },
        { provide: UsersService, useClass: UsersServiceMock },
      ],
      schemas: [NO_ERRORS_SCHEMA],
    }).compileComponents();
  });

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

When I try to run the test I get the error:NullInjectorError: R3InjectorError(DynamicTestModule)[MsalService -> InjectionToken MSAL_INSTANCE -> InjectionToken MSAL_INSTANCE]: NullInjectorError: No provider for InjectionToken MSAL_INSTANCE!

I would be very grateful if someone could help me further

Answer 1

The right answer is in the comment: MockedMsalService extends MsalService doesn't mock MsalService.

To avoid dependency hassle, the best way is to use a mocking library, for example ng-mocks.

In this case, your test can look like:

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

  // NavbarComponent stays as it is
  // All dependencies in NavbarModule will be mocks
  beforeEach(() => MockBuilder(NavbarComponent, NavbarModule));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

And to customize mocks, you can use MockInstance or MockBuilder.mock().

Answer 2

You can provide all factories wich were declared into your app.module.ts

    import {
       MsalGuard,
       MsalService,
       MSAL_GUARD_CONFIG,
       MSAL_INSTANCE,
     } from '@azure/msal-angular';

     describe('NavbarComponent', () => {
      let component: NavbarComponent;
      let fixture: ComponentFixture<NavbarComponent>;
      beforeEach(async () => {
        await TestBed.configureTestingModule({
          declarations: [NavbarComponent],
          imports: [
          ],
          providers: [
            { provide: MsalService, useClass: MockedMsalService },
            { provide: Router, useClass: RouterMock },
            { provide: UsersService, useClass: UsersServiceMock },
            {
              provide: MSAL_INSTANCE,
              useFactory: MSALFactory, // your app.module.ts factory
            },
            {
              provide: MSAL_GUARD_CONFIG,
              useFactory: MSALGuardConfigFactory, // your app.module.ts guard factory
            },
             MsalService,
             MsalGuard,
          ],
          schemas: [NO_ERRORS_SCHEMA],
        }).compileComponents();
      });
    
      beforeEach(() => {
        fixture = TestBed.createComponent(NavbarComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });
    
      it('should create', () => {
        expect(component).toBeTruthy();
      });
    });