在Angular 4中，每个组件都需要进行单元测试吗？

Question

在Angular 4中，每个组件都需要进行单元测试吗？

3

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

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

MainComponent在其模板中包含以下内容：

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

在单元测试文件(main.component.spec.ts)中，我们必须导入所有这些组件以及其他依赖项(例如如果您正在使用 Angular Material 库、图标模块或这三个组件的服务和依赖项)，路由器模块并且必须存根路由器等。针对这种组件是否值得保留单元测试文件？还是应该删除此类组件的 spec 文件呢？

- netuser

2个回答

2

测试你的代码是最佳实践，但如果一个组件没有做任何事情，则没有什么可测试的。不过，我建议保留规范文件，以防将来有人添加功能。

如果你不想进行测试，则可以使用--skip-tests或--minimal标志运行ng new。后者还会将样式和模板文件内联。

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

参考资料：

- ender

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Santosh · Accepted Answer

你需要将你的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要容易得多且更加安全。