你需要将你的Angular应用程序拆分为不同的模块。不建议使用只有一个模块的多组件完整应用程序。
话虽如此,在配置TestBed
时,您可以导入包含主要组件的模块。在main.component.spec.ts
中,您会像这样导入其他组件:
之前
beforeEach(async(() => {
TestBed.configureTestingModule({
imports:[RouterModule.forRoot(routes)
....
....],
declarations: [NavbarComponent,
FooterComponent
....
....]
})
.compileComponents();
}));
相反,您可以直接导入AppModule。
之后
import AppModule from '../app.module'
beforeEach(async(() => {
TestBed.configureTestingModule({
imports:[AppModule]
})
.compileComponents();
}));
这里的AppModule
包含了组件NavbarComponent和FooterComponent。
编辑
请谨慎操作。这样做是解决原问题的捷径。因为您正在使用真实服务,而不是模拟服务。因此,如果您正在使用调用服务器的服务,则您的测试也将调用服务器。如果您的服务处理本地存储,则您的测试也将操作本地存储。
更好的方法是结合CUSTOM_ELEMENTS_SCHEMA
和服务桩
。
CUSTOM_ELEMENTS_SCHEMA
会忽略:
- 任何名称中带有 - 的非Angular元素,
- 任何名称中带有 - 的元素上的属性,这是自定义元素的通用规则。
因此,如果您使用了一些<md-icon>
或<app-footer>
,它也不会抛出错误。
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}).compileComponents();
}));
通过桩化您的路由器,您将避免访问服务器,这是推荐的方法。请在
官方Angular指南中了解更多有关存根服务的信息。
注入真正的UserService可能会很麻烦。真实服务可能会要求用户提供登录凭据并尝试到达身份验证服务器。这些行为很难拦截。创建和注册测试替身以代替真正的UserService要容易得多且更加安全。