Угловой провайдер не использует фиктивный класс на стенде

Question

Я пытаюсь написать модульные тесты для одного из моих компонентов Angular, который получает данные от вызова веб-службы. Все работает нормально, но тестовый стенд Angular всегда использует реальный сервисный вызов вместо предоставленного имитационного класса обслуживания. Я использую Angular 6 и Jasmine 3.

Вот файл спецификации, как вы можете видеть, я предоставляю фиктивный сервис, который возвращает наблюдаемое с моими предопределенными данными.

describe('MyComponent Service Integration', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

class MockService{
  getData(){
    return of(data); //data imported from json file
  }
}

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [ MyComponent],
    imports:[HttpClientTestingModule],
    providers:[{provide : MyService, useClass: MockService}],
  })
  .compileComponents();
});

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

it('should create a my component with data from the service', () => {
  ngOnInit();
  expect(component.data).toBe(data);
}

Есть ли что-то, чего мне здесь не хватает? Когда тестовый стенд создает MyComponent, он должен внедрить мой MockService в компонент, а не MyService правильно? Я просто не могу понять это, любая помощь будет отличной.

Вот мой мертвый простой компонент, который тестируется.

export class MyComponent implements OnInit {

  data : any;

  constructor(private myService: MyService) { }

   ngOnInit() {
     this.myService.getData().subscribe(
     response =>{
       this.data = response;
     },
     error =>{
       console.log("ERROR");
     });
   }
}

Answer 1

Держу пари, что compileComponents() не завершено, когда запускается второй метод beforeEach(), потому что он запускается из синхронного метода beforeEach() с синхронной лямбдой - Jasmin должен помочь вам, если вы просто сделаете лямбду асинхронные.

Из документов:

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

См. https://angular.io/guide/testing#compilecomponents-is-async