在 Angular Jest 中模擬 MsalService

Question

我在 Angular 中有一個看起來像這樣的測試。 但它總是失敗，因為我無法正確模擬 MsalService。

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();
  });
});

當我嘗試運行測試時出現錯誤： NullInjectorError: R3InjectorError(DynamicTestModule)[MsalService -> InjectionToken MSAL_INSTANCE -> InjectionToken MSAL_INSTANCE]: NullInjectorError: No provider for InjectionToken MSAL_INSTANCE!

如果有人能進一步幫助我，我將不勝感激

Answer 1

正確答案在評論中： MockedMsalService extends MsalService doesn't mock MsalService 。

為避免依賴問題，最好的方法是使用 mocking 庫，例如ng-mocks 。

在這種情況下，您的測試可能如下所示：

 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();
  });
});

要自定義模擬，您可以使用MockInstance或MockBuilder.mock() 。

Answer 2

您可以提供在您的 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();
      });
    });