角度4中的每个组件都需要单元测试吗？答案

【问题标题】：Is unit test required for each and every component in angular 4?角度4中的每个组件都需要单元测试吗？
【发布时间】：2018-03-05 21:33:45
【问题描述】：

Angular 4 带有cli 工具。当您创建一个新组件时，它会生成一个组件文件、模板文件、样式表和规范文件（单元测试）。

MainComponent 什么都不做，只是其他组件的占位符，例如

mainComponent 在其模板中包含以下内容

<navbar-component></navbar-component> 
<router-outlet></router-outlet>
<footer-component></footer-component>

在单元测试文件（main.component.spec.ts）中，我们必须导入所有这些组件，以及其他依赖项（例如，如果您使用的是角度材质库，图标模块或这三个组件的服务和依赖项），路由器模块你必须存根路由器等。

是否值得为这个组件保留单元测试文件？或者我应该删除这些类型组件的规范文件

【问题讨论】：

标签： angular unit-testing

【解决方案1】：

您必须将 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 和stubbing of services。

CUSTOM_ELEMENTS_SCHEMA 将忽略

任何名称中带有 - 的非 Angular 元素，
元素名称中带有 - 的任何属性，这是自定义元素的通用规则。

因此，如果您使用 <md-icon> 或 <app-footer>，它不会引发错误。

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [
      AppComponent
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  }).compileComponents();
}));

通过存根您的路由器，您将避免访问您的服务器，这是推荐的方式。请在offical angular guide 阅读有关存根服务的更多信息

注入真正的 UserService 可能是一场噩梦。真正的服务可能会要求用户提供登录凭据并尝试访问身份验证服务器。这些行为很难被拦截。代替真正的 UserService 创建和注册测试替身要容易和安全得多。

【讨论】：

谢谢我不知道我们可以直接导入 AppModule！

【解决方案2】：

测试您的代码是最佳实践，但是，如果一个组件没有做任何事情，那么就没有什么可测试的了。我仍然会保留规范文件，以防将来有人添加功能。

如果您不想要测试期，那么您可以使用--skip-tests 或--minimal 标志运行ng new。后者还将您的样式和模板文件内联。

请记住，cli 将为您完成大部分工作，您始终可以在 TestBed 模块中使用 schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 让测试忽略模板中引用的组件。

参考资料：

【讨论】：