Angular 7: NullInjectorError за неудачный тест, сервис по-прежнему работает в компоненте

Question

У меня не пройден тест кармы из-за ошибки NullInjector для службы.

• Служба работает в компоненте (проблема с тестом, а не с компонентом?),
• внедрение службы работает для других компонентов, и их тесты проходят

Решения по аналогичным вопросам связаны с объявлением поставщика.В моем случае я объявил поставщика (см. Ниже), и служба работает внутри компонента.

Error: StaticInjectorError[LoginComponent -> AuthenticationProvider]: 
    NullInjectorError: No provider for AuthenticationProvider! 

Служба:

@Injectable()
export class AuthenticationProvider {
  uri: string
  constructor(
    private http: HttpClient,
     private config: SancusConfiguration,
    ) 
    {

  }

Неудачный тест:

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ AppModule ],
      declarations: [  ]
    })
    .compileComponents();
  }));

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

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

Я перечислил AuthenticationProvider в провайдерах в NgModule:

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ....
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CollapseModule.forRoot(),
    ReactiveFormsModule,
    HttpClientModule
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [
  AuthenticationProvider,
   .....
  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

• Вы должны указать своих поставщиков в модуле тестирования, поскольку AppModule не экспортирует своих поставщиков.
• Вы также не должны загружать все свои AppModule для проверки только LoginComponent.
• Вам придется издеваться над этими провайдерами, поскольку похоже, что они совершают сетевые вызовы.

Пример кода:

TestBed.configureTestingModule({
  providers: [{provide: AuthenticationProvider,  useValue: mockProvider}, ... ],
  declarations: []
})

Answer 2

Тесты должны быть полностью независимы от ваших модулей.

Поэтому в тесте не должно быть imports: [ AppModule ].

Вы должны импортировать все компоненты и службы, используемые в вашем компоненте.(или издевается над ними) и не более.Потому что, если вы добавите больше элемента, ваш тест не будет проверять реальное состояние компонента.

пример:

TestBed.configureTestingModule({
  imports: [
    SharedModule,
    TranslateModule
  ],
  declarations: [
    LoginComponent,
    MockAnotherComponent,
  ],
  providers: [
    AuthenticationProvider,
    {
      provide: Router,
      useValue: mockRouter
    }
  ]
})

... 

@Component({
  selector: 'app-another-component',
  template: '<ng-content></ng-content>'
})
export class MockAnotherComponent{
  @Input()
  title: string = null;
}