我有一个顶级组件AppComponent
,在其template
属性中,它会在页面上呈现<child>
元素。 (<child>
是另一个Angular组件)。
我是否需要告诉单元测试忽略<child>
元素或以某种方式为测试声明它?
我实际上并没有尝试在此测试文件中测试<child>
,我将创建一个单独的单元测试文件来验证它的功能。
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChildComponent } from './child.component';
@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent, ChildComponent],
imports: [BrowserModule]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app',
template: '<child></child>'
})
export class AppComponent { }
child.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'child',
templateUrl: './child.component.html'
})
export class ChildComponent { }
app.component.spec.ts
import { async, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { ChildComponent } from './child.component';
describe('App', (() => {
beforeEach(async() => {
TestBed.configureTestingModule({ declarations: [AppComponent, ChildComponent] }).compileComponents();
}));
it('should work', () => {
let fixture = TestBed.createComponent(AppComponent);
// assert app.component exists
});
});
当我运行单元测试时,我收到此错误:
Error: This test module uses the component ChildComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Please call "TestBed.compileComponents" before your test. in /tmp/karma-typescript-bundle-3142O76A6m7KjQOD.js (line 3929)
答案 0 :(得分:3)
错误表示其他单位(ChildComponent
)参与测试。此错误是由ChildComponent
使用templateUrl
引起的,此类组件可能需要调用compileComponents
来编译它们。
由于AppComponent
有template
而不是templateUrl
,这会使测试同步,并且无需async
帮助,也无需使用compileComponents
。
如the guide中所述,
TestBed.compileComponents方法异步编译测试模块中配置的所有组件。在此示例中,BannerComponent是唯一要编译的组件。当compileComponents完成时,外部模板和css文件已经“内联”,TestBed.createComponent可以同步创建BannerComponent的新实例。
单元测试假定只测试一个单元,而其他单元被忽略,存根或模拟。这样可以保持测试的隔离。
由于未声明的组件会导致错误,因此必须使用存根:
beforeEach(() => {
@Component({ selector: 'child', template: '' })
class DummyChildComponent {}
TestBed.configureTestingModule({ declarations: [AppComponent, DummyChildComponent] });
});
虚拟组件的替代方法是CUSTOM_ELEMENTS_SCHEMA
或NO_ERRORS_SCHEMA
,它们不适合测试,因为任何可能的错误输出都可能很有价值。 custom schema是更重量级的解决方案。
答案 1 :(得分:1)
您需要将ChildComponent
添加到您的模块中:
beforeEach(() => {
TestBed.configureTestingModule({ declarations: [AppComponent, ChildComponent] });
});