TestBed: Компонент не компилируется при импорте через модуль

Question

В настоящее время я пытаюсь написать набор модульных тестов для компонента, который использует другой тег компонента в своем html.

<bm-panel [title]="title" [panelType]="panelType" [icon]="icon" 
    class="bm-assignment-form-panel"> 
    <div *ngIf="isLoading" class="bm-loader"><img src="../../../assets/animal.gif"></div> 
    <div class="container-fluid w-100 m-0 p-0"> 
     <!-- Content --> 
    </div> 
</bm-panel> 

Однако, похоже, я не могу скомпилировать этот другой компонент. Я пробовал несколько подходов, используя NO_ERROR_SCHEMA, 1-3 beforeEach'es. Единственный подход, который работал выглядит следующим образом

import {...} 

export function main() { 
    describe('AssignmentFormComponent',() => { 
    let comp: AssignmentFormComponent; 
    let fixture: ComponentFixture<AssignmentFormComponent>; 
    let de: DebugElement; 
    let el: HTMLElement; 

    beforeEach(() => { 
     TestBed.configureTestingModule({ 
     imports: [ AssignmentFormModule ] 
     }); 
    }); 

    describe('should build with no problems',() => { 
     it('should be defined',() => { 
     TestBed.compileComponents().then(() => { 
      fixture = TestBed.createComponent(AssignmentFormComponent); 
      comp = fixture.componentInstance; 
      expect(comp).toBeDefined(); 
     }); 

     }); 
    }); 
    }); 
} 

Это на самом деле не чувствует, как передовую практику, как и несколько поражения цели из до каждого блока. Я пробовал смотреть, как насмехаться над этим, но я не могу найти какие-либо ресурсы, которые объясняли бы, как работает функция overridecomponent, или то, как насмешливые вообще работают с жасмином.

Глядя на пару видео с rangle.io, они написали свои beforeEach блоки, как это:

beforeEach(async() => { 
     TestBed.configureTestingModule({ 
     imports: [ AssignmentFormModule ] 
     }); 
    }); 

    beforeEach(async() => { 
     TestBed.compileComponents(); 
    }); 

    beforeEach(() => { 
     fixture = TestBed.createComponent(AssignmentFormComponent); 
     comp = fixture.componentInstance; 
    }); 
    it('should be defined',() => { 
     expect(comp).toBeDefined(); 
    }); 

Это не может скомпилировать TemplateUrl компонента ой-панели. Я также попытался объявить компоненты напрямую, а не через модуль, но это не влияет.

PanelContainerComponent (bm-panel) импортируется через модуль в AssignmentFormModule, делает ли это compileComponent неспособным его скомпилировать?

Если бы overrideComponent было бы возможным решением, хотел бы кто-нибудь объяснить, как я буду использовать его?

should display TestTitle 
     Chrome 56.0.2924 (Windows 10 0.0.0) 
     Error: This test module uses the component PanelContainerComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Plea 
se call "TestBed.compileComponents" before your test. 
      at TestBed._initIfNeeded (node_modules/@angular/core/bundles/core-testing.umd.js:774:31) [ProxyZone] 
      at TestBed.createComponent (node_modules/@angular/core/bundles/core-testing.umd.js:853:18) [ProxyZone] 
      at Function.TestBed.createComponent (node_modules/@angular/core/bundles/core-testing.umd.js:682:33) [ProxyZone] 
      at Object.eval (dist/dev/app/bachelor-manager/panels/assignment-form/assignment-form.component.spec.js:62:41) [ProxyZone] 
      at ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:79:39) [ProxyZone] 
      at Zone.run (node_modules/zone.js/dist/zone.js:126:43) [<root> => ProxyZone] 
      at Object.<anonymous> (node_modules/zone.js/dist/jasmine-patch.js:102:34) [<root>] 
      at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (node_modules/zone.js/dist/jasmine-patch.js:132:42) [<root>] 
      at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (node_modules/zone.js/dist/jasmine-patch.js:132:42) [<root>] 
      at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (node_modules/zone.js/dist/jasmine-patch.js:132:42) [<root>] 
      at Zone.runTask (node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>] 
      at drainMicroTaskQueue (node_modules/zone.js/dist/zone.js:529:35) [<root>] 
      at ZoneTask.invoke (node_modules/zone.js/dist/zone.js:420:25) [<root>] 
      at data.args.(anonymous function) (node_modules/zone.js/dist/zone.js:1527:25) [<root>] 

Answer 1

Я нашел ответ. Я ошибочно написал асинхронную функцию как
async() => {} вместо async(()=>{}).

Кажется, он использовал попытку использовать функцию async из 'rxjs/scheduler/async', поэтому lint не вызывал меня на нее.