TestBed:通过模块导入时组件不编译
TestBed: Component doesn't compile when imported through a module
我目前正在尝试为在 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's 的方法。唯一有效的方法如下所示
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 函数的工作原理,或者一般的模拟如何与 jasmine 一起工作。
查看来自 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();
} );
编译 bm-panel 组件的 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>]
我找到了答案。我错误地将异步函数写为
async() => {}
而不是 async(()=>{})
.
它似乎正在尝试使用 'rxjs/scheduler/async' 中的异步函数,因此 lint 没有叫我出来。
我目前正在尝试为在 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's 的方法。唯一有效的方法如下所示
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 函数的工作原理,或者一般的模拟如何与 jasmine 一起工作。
查看来自 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();
} );
编译 bm-panel 组件的 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>]
我找到了答案。我错误地将异步函数写为
async() => {}
而不是 async(()=>{})
.
它似乎正在尝试使用 'rxjs/scheduler/async' 中的异步函数,因此 lint 没有叫我出来。